EasyUI（五）表单验证

控件已有的验证规则

表单中有一个自己默认的表单验证控件，其中包含了一些常用的验证规则，要运用该控件提供的验证规则，只需要使用该控件，并在控件中配置vaildType属性。以验证邮箱输入是否符合规则为例，在之前添加对话框的邮箱中进行配置。也可以运用data-options将多个属性配在一起。

<input type="text" class="easyui-validatebox" name="user.email" required="true" validType="email">

自己定义验证
该种方法主要是重写 $.fn.validatebox.defaults.rules（运用扩展空控件的方法）定义一个validator(验证器)函数和一个invalid(不合法)信息,例如:定义一个minLength(最小长度)验证类型。

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

本文采用在页面的外部自己定义一个js书写控件扩展的验证规则,然后通过外部引入因为这样可以方便多个页面使用。
在之前新建的jquery文件夹下新建一个js文件，在其中书写下列内容：

$.extend($.fn.validatebox.defaults.rules, {   
    myEmail: {   
        validator: function(value){   
            return /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/.test(value);
        },   
        message: '请输入正确的电子邮箱格式，例如:xxx@163.com'  
    } ,
    myTel:{
        validator:function(val){
            return /^((\(\d{2,3}\))|(\d{3}\-))?13\d{9}$/.test(val);

        },
        message:'请输入正确的电话号码格式'
    }
}); 

注意：

1. 其中规则的名称是自己随便命名，在某个页面运用是将validType属性的值配置为该名称即可。
2. 方法中参数也是自己命名如：value该参数的作用是，拿到输入框的内容。
3. 规则用正则表达式来进行书写，通过test方法进行判断，该方法返回值为布尔类型，当验证通过返回，不通过时在页面中显示对应提示消息。
4. 同时书写多个规则用逗号隔开即可。

在页面的头部引入该文件

<script type="text/javascript" src="jquery/validatorForm.js"></script>

在对用的控件中配置规则名称

input type="text" class="easyui-validatebox" name="user.email" required="true" validType="myEmail">
<input type="text" class="easyui-validatebox" name="user.telPhone" required="true"validType="myTel">