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:'请输入正确的电话号码格式'
}
});

注意：

其中规则的名称是自己随便命名，在某个页面运用是将validType属性的值配置为该名称即可。

方法中参数也是自己命名如：value该参数的作用是，拿到输入框的内容。

规则用正则表达式来进行书写，通过test方法进行判断，该方法返回值为布尔类型，当验证通过返回，不通过时在页面中显示对应提示消息。

同时书写多个规则用逗号隔开即可。

在页面的头部引入该文件

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