EasyUI验证扩展
近段时间做的项目遇到好多的文本框验证,类型太多,而一味的写验证,感觉有太麻烦,所以自己又重新学习整理了些常用的验证,希望对大家有所帮助。
好了,废话不多说,下面让我们切入正题。
首先,让我们先看下EasyUI的验证规则:
<input id="vv" required="true" validType="email">
$('#vv').validatebox({ required:true });
<input id="vv" class="easyui-validatebox" data-options="required:true,validType:'email'" />
验证规则
验证规则是通过使用 required 和 validType 特性来定义的, 这里是已经实施的规则:
email:匹配 email 正则表达式规则
url:匹配 URL 正则表达式规则
length[0,100]:允许从 x 到 y 个字符
remote['http://.../action.do','paramName']:发送 ajax 请求来验证值,成功时返回 'true' 。
看到这里,相信大家很多用过EasyUI验证的码农都或多或少用过,但是EasyUI本身自带的验证有限,我们又怎么进行符合自己需求进行扩展呢?
自定义规则扩展
同样的我们先来看看自定义规则:
不得不说的是在这里需要用到JQuery的extend扩展方法。 Jquery的扩展方法extend是我们在写插件的过程中常用的方法,该方法有一些重载原型,在此,我们也一起去了解了解。
http://www.cnblogs.com/RascallySnake/archive/2010/05/07/1729563.html
看了上面的规则,相信大家已经懂了很多了,下面看下文档的一个简单举例吧,
$.extend($.fn.validatebox.defaults.rules, { minLength: { validator: function(value, param){ return value.length >= param[0]; }, message: 'Please enter at least {0} characters.' } });
<input class="easyui-validatebox" data-options="validType:'minLength[5]'">
下面是各种校验总结:
/** * auther by heands * * date : 2016 - 1 -2 */ $.extend($.fn.validatebox.defaults.rules, { minLength : { // 判断最小长度 validator : function(value, param) { return value.length >= param[0]; }, message : '最少输入 {0} 个字符。' }, length:{validator:function(value,param){ var len=$.trim(value).length; return len>=param[0]&&len<=param[1]; }, message:"内容长度介于{0}和{1}之间." }, phone : {// 验证电话号码 validator : function(value) { return /^((\(\d{2,3}\))|(\d{3}\-))?(\(0\d{2,3}\)|0\d{2,3}-)?[1-9]\d{6,7}(\-\d{1,4})?$/i.test(value); }, message : '格式不正确,请使用下面格式:020-88888888' }, mobile : {// 验证手机号码 validator : function(value) { return /^(13|15|18)\d{9}$/i.test(value); }, message : '手机号码格式不正确(正确格式如:13450774432)' }, phoneOrMobile:{//验证手机或电话 validator : function(value) { return /^(13|15|18)\d{9}$/i.test(value) || /^((\(\d{2,3}\))|(\d{3}\-))?(\(0\d{2,3}\)|0\d{2,3}-)?[1-9]\d{6,7}(\-\d{1,4})?$/i.test(value); }, message:'请填入手机或电话号码,如13688888888或020-8888888' }, idcard : {// 验证身份证 validator : function(value) { return /^\d{15}(\d{2}[A-Za-z0-9])?$/i.test(value); }, message : '身份证号码格式不正确' }, floatOrInt : {// 验证是否为小数或整数 validator : function(value) { return /^(\d{1,3}(,\d\d\d)*(\.\d{1,3}(,\d\d\d)*)?|\d+(\.\d+))?$/i.test(value); }, message : '请输入数字,并保证格式正确' }, currency : {// 验证货币 validator : function(value) { return /^d{0,}(\.\d+)?$/i.test(value); }, message : '货币格式不正确' }, qq : {// 验证QQ,从10000开始 validator : function(value) { return /^[1-9]\d{4,9}$/i.test(value); }, message : 'QQ号码格式不正确(正确如:453384319)' }, integer : {// 验证整数 validator : function(value) { return /^[+]?[1-9]+\d*$/i.test(value); }, message : '请输入整数' }, chinese : {// 验证中文 validator : function(value) { return /^[\u0391-\uFFE5]+$/i.test(value); }, message : '请输入中文' }, english : {// 验证英语 validator : function(value) { return /^[A-Za-z]+$/i.test(value); }, message : '请输入英文' }, unnormal : {// 验证是否包含空格和非法字符 validator : function(value) { return /.+/i.test(value); }, message : '输入值不能为空和包含其他非法字符' }, username : {// 验证用户名 validator : function(value) { return /^[a-zA-Z][a-zA-Z0-9_]{5,15}$/i.test(value); }, message : '用户名不合法(字母开头,允许6-16字节,允许字母数字下划线)' }, faxno : {// 验证传真 validator : function(value) { // return /^[+]{0,1}(\d){1,3}[ ]?([-]?((\d)|[ ]){1,12})+$/i.test(value); return /^((\(\d{2,3}\))|(\d{3}\-))?(\(0\d{2,3}\)|0\d{2,3}-)?[1-9]\d{6,7}(\-\d{1,4})?$/i.test(value); }, message : '传真号码不正确' }, zip : {// 验证邮政编码 validator : function(value) { return /^[1-9]\d{5}$/i.test(value); }, message : '邮政编码格式不正确' }, ip : {// 验证IP地址 validator : function(value) { return /d+.d+.d+.d+/i.test(value); }, message : 'IP地址格式不正确' }, name : {// 验证姓名,可以是中文或英文 validator : function(value) { return /^[\u0391-\uFFE5]+$/i.test(value)|/^\w+[\w\s]+\w+$/i.test(value); }, message : '请输入姓名' }, carNo:{ validator : function(value){ return /^[\u4E00-\u9FA5][\da-zA-Z]{6}$/.test(value); }, message : '车牌号码无效(例:粤J12350)' }, carenergin:{ validator : function(value){ return /^[a-zA-Z0-9]{16}$/.test(value); }, message : '发动机型号无效(例:FG6H012345654584)' }, email:{ validator : function(value){ return /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/.test(value); }, message : '请输入有效的电子邮件账号(例:[email protected])' }, msn:{ validator : function(value){ return /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/.test(value); }, message : '请输入有效的msn账号(例:[email protected](msn/live).com)' },department:{ validator : function(value){ return /^[0-9]*$/.test(value); }, message : '请输入部门排序号(例:1)' },same:{ validator : function(value, param){ if($("#"+param[0]).val() != "" && value != ""){ return $("#"+param[0]).val() == value; }else{ return true; } }, message : '两次输入的密码不一致!' } });
http://asialee.iteye.com/blog/2001239