easyui 进阶之表单校验、自定义校验

前言

easyui是一种基于jQuery的用户界面插件集合，它为创建现代化，互动，JavaScript应用程序，提供必要的功能，完美支持HTML5网页的完整框架，节省网页开发的时间和规模。非常的简单易学。

easyui中文网：http://www.jeasyui.net/

easyui官网：http://www.jeasyui.com/documentation/#

今天我们来学习表单校验以及如何自定义表单校验

 

正文

一、从标记创建验证框（validatebox）。

1.邮箱校验

a.标记方式创建验证框：

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

 

b.使用 javascript 创建验证框（validatebox）。

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

 

2.设置必输以及长度限制：

<input class="easyui-numberbox"  type="text" name="dispid" style="width: 625px" data-options="required:true,validType:'length[6,16]'" />

 

3、设置只能输入数字

<input class="easyui-numberbox"  type="text" name="pid" style="width: 625px" data-options="required:true" />

4、设置日期并屏蔽手动输入

<input class="easyui-datebox" id ="dispid" type="text" name="dispid" style="width: 625px" data-options="editable:false" />

 

 

二，自定义表单校验方法

 

1、静态传参 --检查两次密码是否相同。

检查密码和重新输入密码是相同的。

// extend the 'equals' rule
$.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']">

 

 

2.动态传参--传入校验的长度的数字参数

$.extend($.fn.validatebox.defaults.rules, {
    nameLength: {
        validator: function(value, param){
            //正则表达式需要动态传递参数，必须采用正则对象即构造器方式，传入拼接了动态参数的字符串的方式
            var re =new RegExp("^[\u4e00-\u9fa5]|[a-zA-Z0-9]{" + param[0]+ "," + param[1] + "}$");
            return re.test(value);
        },
        //提示信息中也需要动态添加参数，此时获取param中的参数方式为{0}、{1}，分别代表param[0]，param[1]
        message: "菜单名称长度要求为{0}-{1}位!"
    },
    pageValidata: {
        validator: function(value, param){
            //正则表达式需要动态传递参数，必须采用正则对象即构造器方式，传入拼接了动态参数的字符串的方式
           var m_reg = new RegExp("^[a-zA-Z0-9]{" + param[0]+ "," + param[1] + "}$");
            if (!m_reg.test(value)) {
                $.fn.validatebox.defaults.rules.pageValidata.message = "只能为{0}-{1}位英文或数字!";//动态设置message提示信息，complexValid与方法名对应
                return false;
            }else {
                return true;
            }
        },
        //提示信息中也需要动态添加参数，此时获取param中的参数方式为{0}、{1}，分别代表param[0]，param[1]
        message: ""
    },
})

页面调用

<input class="easyui-textbox" id ="iconCls" type="text" name="iconCls" style="width: 625px" data-options="validType:'pageValidata[2,16]',required:true" />
<input class="easyui-textbox" id ="name" type="text" name="name" style="width: 625px" data-options="validType:'nameLength[2,30]',required:true" />

 

3.动态传参--传入正则表达式，提示信息，参数等

（例子来自 javaloveiphone）

$.extend($.fn.validatebox.defaults.rules, {
   //五个参数：第一个是正则表达式，第二个是错误提示信息，前两个参数用户合法性验证；第三个是调用的url，第四个是传递给服务器的参数名(参数key)，第五个是错误提示信息，第六个参数是当前表单id字段
    complexValid : {
       validator: function(value, param) {  
           var m_reg = new RegExp(param[0]); 
           if (!m_reg.test(value)) {  
               $.fn.validatebox.defaults.rules.complexValid.message = param[1];//动态设置message提示信息，complexValid与方法名对应
               return false;  
           }  
           else {  
               var postdata = {};  
               postdata[param[3]] = value;  //动态的key和value对应
               postdata['id'] = $("#"+param[5]).val();//获取id值
               var result = $.ajax({  
                   url: param[2],  //动态URL
                   data: postdata,
                   async:false,
                   type: "post"  
               }).responseText;
               if (result == "false") {
                   $.fn.validatebox.defaults.rules.complexValid.message = param[4];  //动态设置message提示信息，complexValid与方法名对应
                   return false;  
               }  
               else {  
                   return true;  
               }  
           }  
       }, 
    message : "" 
    }
})

 

页面调用

<input class="easyui-textbox" type="text" name="userCode" validType="complexValid['^[0-9a-zA-Z]+$','只能包含字母、数字','userCode','已被占用,换一个试试!','userId']"></input>

 

 

三、正则表达式

自定义的表单校验再加上正则表达式大全基本上可以覆盖所有的校验规则

正则表达式大全：https://www.cnblogs.com/clwydjgs/p/9366883.html

 

四、表单提交

在提交表单前记得要校验通过才能提交哦

$('#save').click(function(){
            if($('#form').form('validate')){
                //校验通过
                $('#form').submit();
            }
        });

 

欢迎大家关注公众号，不定时干货，只做有价值的输出

作者：Dawnzhang 
出处：https://www.cnblogs.com/clwydjgs/p/9390488.html