控件已有的验证规则
表单中有一个自己默认的表单验证控件,其中包含了一些常用的验证规则,要运用该控件提供的验证规则,只需要使用该控件,并在控件中配置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">