原创

Jquery EasyUI 中 ValidateBox 验证框使用讲解

Validatebox(验证框)的设计目的是为了验证输入的表单字段是否有效。如果用户输入了无效的值,它将会更改输入框的背景颜色,并且显示警告图标和提示信息。该验证框可以结合form(表单)插件并防止表单重复提交。 使用$.fn.validatebox.defaults重写默认值对象。

具体用法如下:

<input id="email" class="easyui-validatebox" data-options="required:true,validType:'email'" />

使用Javascript创建验证框,具体代码如下:

<input id="email" type="text" name="email"/>  
$('#email').validatebox({    
    required: true,    
    validType: 'email'   
});

检查密码和确认密码是否相同,具体代码如下:

<input id="pwd" name="pwd" type="password" class="easyui-validatebox" data-options="required:true" />   
<input id="rpwd" name="rpwd" type="password" class="easyui-validatebox" required="required" validType="equals['#pwd']" />  

$.extend($.fn.validatebox.defaults.rules, {    
    equals: {    
validator: function(value,param){    
    return value == $(param[0]).val();    
},    
message: 'Field do not match.'   
    }    
});

 

输入框中限制最小长度为5的自定义最小长度验证,具体代码如下:

<input class="easyui-validatebox" data-options="validType:'minLength[5]'"> 
$.extend($.fn.validatebox.defaults.rules, {    
    minLength: {    
validator: function(value, param){    
    return value.length >= param[0];    
},    
message: 'Please enter at least {0} characters.'   
    }    
});

验证规则是根据使用需求和验证类型属性来定义的,如下:

email:匹配E-Mail的正则表达式规则。

url:匹配URL的正则表达式规则。

length[0,100]:允许在x到x之间个字符。

remote['http://.../action.do','paramName']:发送ajax请求需要验证的值,当成功时返回true。

自定义验证规则,需要重写$.fn.validatebox.defaults.rules中定义的验证器函数和无效消息。

正则表达式参考地址如下:

http://blog.yoodb.com/yoodb/article/detail/306

http://blog.yoodb.com/yoodb/article/detail/308

~阅读全文~人机检测~

关注下方微信公众号“Java精选”(w_z90110),回复关键词领取资料:如Mysql、Hadoop、Dubbo、Spring Boot等,免费领取视频教程、资料文档和项目源码。

Java精选专注程序员推送一些Java开发知识,包括基础知识、各大流行框架(Mybatis、Spring、Spring Boot等)、大数据技术(Storm、Hadoop、MapReduce、Spark等)、数据库(Mysql、Oracle、NoSQL等)、算法与数据结构、面试专题、面试技巧经验、职业规划以及优质开源项目等。其中一部分由小编总结整理,另一部分来源于网络上优质资源,希望对大家的学习和工作有所帮助。

评论

分享:

支付宝

微信