easyui-tooltip的使用

通常情况下,在提交form表单时,需要验证一些基本信息,下面是一个平时遇到的小例子:

<div class="form-group">
    <label for="title" class="col-sm-3 control-label">姓名</label>
    <div class="col-sm-7">
        <input type="text" class="form-control easyui-tooltip" id="name" name="name" placeholder="请输入姓名" data-options="position: 'top',onShow:inputTipOnShow">
    </div>
    <span class="redtip">*</span>
</div>

function inputTipOnShow(){    
  $(this).tooltip('tip').css({
    backgroundColor: '#666',
    borderColor: '#666'
  });
}

$(document).ready(function() {
  //通过tooltipshowEventhideEvent来控制tooltip显示,以下设置方式表示tooltip只有主动show的时候才会显示,当键盘有输入就会隐藏,避免鼠标一移到输入框tooltip就显示
  $("#name").tooltip({
    showEvent: null,
       hideEvent: "keydown"
  });
  //如果form表单在一个弹出的window中,在关闭window时,要将tooltip隐藏,否则如果关闭window之前有tootip信息显示,那么该tooltip会一直显示,直到页面刷新
  $('#window').window({
    onBeforeClose:function(){
      $("#name").tooltip('hide');
    }
  });
});
//在提交时判断是否为空,如果为空就要tootip提示
if($("#name").val().length == 0){
    $("#name").tooltip({
        content:"姓名不能为空!"
    });
    $("#name").tooltip("show");
    $("#name").focus();
    return false;
}
顺带提一句,如果输入的是年龄,要控制年龄的合法性,首先要用正则表达式判断是否为正整数,然后再看是否在某个范围内,在js中比较大小要用parseInt()不能直接比较,例如if(parseInt(s1)>parseInt(s2)){}
原文地址:https://www.cnblogs.com/llfddmm/p/7883162.html