EasyUI表单验证填坑

最新推荐文章于 2021-03-23 00:27:46 发布

原创最新推荐文章于 2021-03-23 00:27:46 发布 · 1k 阅读

0 ·

CC 4.0 BY-SA版权

前端知识小结专栏收录该内容

1 篇文章

订阅专栏

1、easyui表单的基本验证

1.1 使用class创建验证框 class=“easyui-validatebox”

验证框（validatebox）是为了验证表单输入字段而设计的。如果用户输入无效的值，它将改变背景颜色，显示警告图标和提示消息。

验证框（validatebox）可与表单（form）插件集成，防止提交无效的字段。

（1）验证必填就是required="required"

<tr>
	<td>验证必填：</td>
	<td><input type="text" required="required" class="easyui-validatebox" /></td>
</tr>

（2）验证邮箱就是validType="email"

<tr>
	<td>验证邮箱：</td>
	<td><input type="text" validType="email" class="easyui-validatebox" /></td>
</tr>

（3）验证长度就是validType="length[4,6]"

<tr>
	<td>验证长度：</td>
	<td><input type="text" validType="length[0,12]" class="easyui-validatebox" /></td>
</tr>

1.2使用javascript创建验证框（validatebox）

<input id="test" type="text" />

$('#test').validatebox({  
      required:true,  //验证必填
      validType:'email'  //验证邮箱
});

2、easyui表单的验证扩展

扩展就是通过 $.fn.validatebox.defaults 重写默认的 defaults。

例如：字符长度验证

$.extend($.fn.validatebox.defaults.rules, {  
    minLength: {  
        validator: function(value, param){  
            return value.length >= param[0];  
        },  
        message: 'Please enter at least {0} characters.'  
    }  
});

现在就可以使用这个minLength验证类型来定义一个至少输入5个字符的输入框：

<input class="easyui-validatebox" data-options="validType:'minLength[5]'"> 
<input validType = "minLength[5]">

minLength是你定义的验证规则名、value是你的input框的值、param是你民Length[5]中括号的传入参数、message是提示框的内容

常用的表单验证

$.extend($.fn.validatebox.defaults.rules,  
                {  
                    // 移动手机号码验证  
                    mobile : {// value值为文本框中的值  
                        validator : function(value) {  
                            var reg = /^1[3|4|5|8|9]\d{9}$/;  
                            return reg.test(value);  
                        },  
                        message : '输入手机号码格式不准确.'  
                    },  
                    combo : {  
                        validator : function(value) {  
                            if (value) {  
                                return true;  
                            } else {  
                                return false;  
                            }  
                        },  
                        message : '不能为空'  
                    },    
                    // 用户账号验证(只能包括 _ 数字 字母)  
                    username : {  
                        validator : function(value) {  
                            return /^[a-zA-Z][a-zA-Z0-9_]{5,15}$/i.test(value);  
                        },  
                        message : '用户名不合法（字母开头，允许6-16字符，允许字母数字下划线）'  
                    },  
                    // 汉字验证  
                    CHS : {  
                        validator : function(value) {  
                            return /^[\u0391-\uFFE5]+$/.test(value);  
                        },  
                        message : '只能输入汉字'  
                    },  
                    // 验证身份证    
                    idcard : {  
                        validator : function(num) {  
                            num = num.toUpperCase();  
                            //身份证号码为15位或者18位，15位时全为数字，18位前17位为数字，最后一位是校验位，可能为数字或字符X。  
                            if (!(/(^\d{15}$)|(^\d{17}([0-9]|X)$)/.test(num))) {  
                                return false;  
                            }  
                            //校验位按照ISO 7064:1983.MOD 11-2的规定生成，X可以认为是数字10。  
                            //下面分别分析出生日期和校验位  
                            var len, re;  
                            len = num.length;  
                            if (len == 15) {  
                                re = new RegExp(  
                                        /^(\d{6})(\d{2})(\d{2})(\d{2})(\d{3})$/);  
                                var arrSplit = num.match(re);  
   
                                //检查生日日期是否正确  
                                var dtmBirth = new Date('19' + arrSplit[2]  
                                        + '/' + arrSplit[3] + '/' + arrSplit[4]);  
                                var bGoodDay;  
                                bGoodDay = (dtmBirth.getYear() == Number(arrSplit[2]))  
                                        && ((dtmBirth.getMonth() + 1) == Number(arrSplit[3]))  
                                        && (dtmBirth.getDate() == Number(arrSplit[4]));  
                                if (!bGoodDay) {  
                                    return false;  
                                } else {  
                                    //将15位身份证转成18位  
                                    //校验位按照ISO 7064:1983.MOD 11-2的规定生成，X可以认为是数字10。  
                                    var arrInt = new Array(7, 9, 10, 5, 8, 4,  
                                            2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2);  
                                    var arrCh = new Array('1', '0', 'X', '9',  
                                            '8', '7', '6', '5', '4', '3', '2');  
                                    var nTemp = 0, i;  
                                    num = num.substr(0, 6) + '19'  
                                            + num.substr(6, num.length - 6);  
                                    for (i = 0; i < 17; i++) {  
                                        nTemp += num.substr(i, 1) * arrInt[i];  
                                    }  
                                    num += arrCh[nTemp % 11];  
                                    return true;  
                                }  
                            }  
                            if (len == 18) {  
                                re = new RegExp(  
                                        /^(\d{6})(\d{4})(\d{2})(\d{2})(\d{3})([0-9]|X)$/);  
                                var arrSplit = num.match(re);  
   
                                //检查生日日期是否正确  
                                var dtmBirth = new Date(arrSplit[2] + "/"  
                                        + arrSplit[3] + "/" + arrSplit[4]);  
                                var bGoodDay;  
                                bGoodDay = (dtmBirth.getFullYear() == Number(arrSplit[2]))  
                                        && ((dtmBirth.getMonth() + 1) == Number(arrSplit[3]))  
                                        && (dtmBirth.getDate() == Number(arrSplit[4]));  
                                if (!bGoodDay) {  
                                    return false;  
                                } else {  
                                    //检验18位身份证的校验码是否正确。  
                                    //校验位按照ISO 7064:1983.MOD 11-2的规定生成，X可以认为是数字10。  
                                    var valnum;  
                                    var arrInt = new Array(7, 9, 10, 5, 8, 4,  
                                            2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2);  
                                    var arrCh = new Array('1', '0', 'X', '9',  
                                            '8', '7', '6', '5', '4', '3', '2');  
                                    var nTemp = 0, i;  
                                    for (i = 0; i < 17; i++) {  
                                        nTemp += num.substr(i, 1) * arrInt[i];  
                                    }  
                                    valnum = arrCh[nTemp % 11];  
                                    if (valnum != num.substr(17, 1)) {  
                                        return false;  
                                    }  
                                    return true;  
                                }  
                            }  
                            return false;  
                        },  
                        message : '身份证号码格式不正确'  
                    },  
                });

密码一致的验证

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

使用方法：

<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']">

3、表单的多重验证

3.1、自从1.3.2版本开始，validatebox本身已经支持多重校验了，例如：

<input class="easyui-validatebox" data-options="required:true,validType:['email','length[0,20]']">

$.extend($.fn.validatebox.defaults.rules, {

3.2、原理就是一层一层验证，每层提示不同的message

var aa;//用于接收ajax返回值
$.extend($.fn.validatebox.defaults.rules, {
    accountOnlyOne:{
        //验证用户名格式和唯一性
        validator:function(value){
            var rules = $.fn.validatebox.defaults.rules;
            var reg = /^[a-zA-Z][a-zA-Z0-9_]{4,15}$/;
            //先验证格式是否正确
            if(!reg.test(value)){
                rules.accountOnlyOne.message = "用户名不合法（字母开头，允许5-16字符，允许字母数字下划线）"
                return false
            }
            //通过ajax请求是否存在相同的用户名
            $.ajax({
                async : false,//此处是一个坑   ajax默认异步请求，导致没有返回结果就执行后面的  所以改成false
                type:'get',
                url:"${ctx}/system/user/checkAccount?account="+value,
                success:function(res){
                    aa = res
                }
            })
            if(!aa){
                rules.accountOnlyOne.message = "用户名已经存在"
                return false
            }
            return true
        },
        message:''
    }
    })

通过rules.accountOnlyone.message重写message 注意rules和message之间是你定义的规则名我这里是accountOnlyOne