easyui-tooltip的使用

最新推荐文章于 2019-01-08 16:13:00 发布

weixin_30402085

最新推荐文章于 2019-01-08 16:13:00 发布

阅读量193

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/llfddmm/p/7883162.html

本文介绍了一个简单的表单验证实例，展示了如何使用easyUI Tooltip进行实时反馈，并且介绍了如何确保年龄输入的有效性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

通常情况下，在提交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() {
　　//通过tooltip的showEvent和hideEvent来控制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)){}