其主要实现方式是通过输入框的ValidateBox属性来实现，此属性有如下几个要素：
| 名称 | 类型 | 说明 | 默认值 |
| required | boolean | 定义是否字段应被输入。 | false |
| validType | string | 定义字段的验证类型，比如 email、url，等等。 | null |
| missingMessage | string | 当文本框是空时出现的提示文字。 | This field is required. |
| invalidMessage | string | 当文本框的内容无效时出现的提示文字。 | null |
那么实现验证功能有如下几种方式：
法一：在控件中定义
待定以的控件：
<input id=’vv’/ type=’test’/>
定义后的控件：
<input id=’vv’ class="easyui-validatebox" required=’true’validType="minLength[5]" />
只有引用了class="easyui-validatebox"才能定义要素，以上表示验证框必须输入，并且定义字段验证类型为自定类型，需要复写$.fn.validatebox.
defaults.rules ，来定义一个验证函数和无效的信息。如果validType=“enail“或其它jQueryEasyUI已定义完的字段则不需要复写验证函数和无效信息。
Js函数：
$(function(){
$.extend($.fn.validatebox.defaults.rules,{
minLength: {
validator: function(value, param){
return value.length <= param[0];
},
message: '输入字符最多为5个字'
}
});
});
上面是固定格式，如果function返回的是真则不输出message，如果false输出message，需注意上述黄色和蓝色，黄色应该与验证字段类型名一样，蓝色是验证类型名中后接的数组的值，[0]代表取第一个元素。
法二：直接通过js获取属性，定义要素
待定以的控件：
<input id=’vv’/ type=’test’/>
通过js定义：
$(function(){
$('#vv').validatebox({
validType:"zhuji[5]",
required: "true",
});
$.extend($.fn.validatebox.defaults.rules,{
zhuji: {
validator: function(value, param){
return value.length <= param[0];
},
message: '输入字符最多为5个字'
}
});
});
值得注意的是：missingMessage有默认值，而invalidMessage为null，如果定义了invalidMessage，怎在判定返回false时会覆盖message的信息。
以上就是这两种方法，那么下面篇幅将具体讲在一些特殊场景的应用：
1、身份证号码验证：
$(function(){
$('#idNumber').validatebox({
validType:'idcard'
});
//身份证号验证
$.extend($.fn.validatebox.defaults.rules,{
idcard : {
validator : function(value) {
return/^\d{15}(\d{2}[A-Za-z0-9])?$/i.test(value);
},
message : '身份证号码格式不正确'
},
});
2、 一下是转载的”UULE”博客的一些复写验证方法：
3、 //扩展easyui表单的验证
4、 $.extend($.fn.validatebox.defaults.rules, {
5、 //验证汉子
6、 CHS: {
7、 validator: function (value) {
8、 return /^[\u0391-\uFFE5]+$/.test(value);
9、 },
10、 message: '只能输入汉字'
11、 },
12、 //移动手机号码验证
13、 mobile: {//value值为文本框中的值
14、 validator: function (value) {
15、 var reg = /^1[3|4|5|8|9]\d{9}$/;
16、 return reg.test(value);
17、 },
18、 message: '输入手机号码格式不准确.'
19、 },
20、 //国内邮编验证
21、 zipcode: {
22、 validator: function (value) {
23、 var reg = /^[1-9]\d{5}$/;
24、 return reg.test(value);
25、 },
26、 message: '邮编必须是非0开始的6位数字.'
27、 },
28、 //用户账号验证(只能包括 _ 数字 字母)
29、 account: {//param的值为[]中值
30、 validator: function (value, param) {
31、 if (value.length < param[0] || value.length > param[1]) {
32、 $.fn.validatebox.defaults.rules.account.message = '用户名长度必须在' + param[0] + '至' + param[1] + '范围';
33、 return false;
34、 } else {
35、 if (!/^[\w]+$/.test(value)) {
36、 $.fn.validatebox.defaults.rules.account.message = '用户名只能数字、字母、下划线组成.';
37、 return false;
38、 } else {
39、 return true;
40、 }
41、 }
42、 }, message: ''
43、 }
44、 })
45、 $.extend($.fn.validatebox.defaults.rules, {
46、 checkWSDL: {
47、 validator: function(value,param){
48、 var reg = "^(http://|([0-9]{1,3}[.]{1}[0-9]{1,3}[.]{1}[0-9]{1,3}[.]{1}[0-9]{1,3}:[0-9]{1,4}))[/a-zA-Z0-9._%&:=(),?+]*[?]{1}wsdl$";
49、 return reg.test(value);
50、 },
51、 message: '请输入合法的WSDL地址'
52、 },
53、 checkIp : {// 验证IP地址
54、 validator : function(value) {
55、 var reg = /^((1?\d?\d|(2([0-4]\d|5[0-5])))\.){3}(1?\d?\d|(2([0-4]\d|5[0-5])))$/ ;
56、 return reg.test(value);
57、 },
58、 message : 'IP地址格式不正确'
59、 }
60、 });
61、 /**
62、 * 扩展easyui的validator插件rules，支持更多类型验证
63、 */
64、 $.extend($.fn.validatebox.defaults.rules, {
65、 minLength : { // 判断最小长度
66、 validator : function(value, param) {
67、 return value.length >= param[0];
68、 },
69、 message : '最少输入 {0} 个字符'
70、 },
71、 length : { // 长度
72、 validator : function(value, param) {
73、 var len = $.trim(value).length;
74、 return len >= param[0] && len <= param[1];
75、 },
76、 message : "输入内容长度必须介于{0}和{1}之间"
77、 },
78、 phone : {// 验证电话号码
79、 validator : function(value) {
80、 return /^((\(\d{2,3}\))|(\d{3}\-))?(\(0\d{2,3}\)|0\d{2,3}-)?[1-9]\d{6,7}(\-\d{1,4})?$/i.test(value);
81、 },
82、 message : '格式不正确,请使用下面格式:020-88888888'
83、 },
84、 mobile : {// 验证手机号码
85、 validator : function(value) {
86、 return /^(13|15|18)\d{9}$/i.test(value);
87、 },
88、 message : '手机号码格式不正确'
89、 },
90、 phoneAndMobile : {// 电话号码或手机号码
91、 validator : function(value) {
92、 return /^((\(\d{2,3}\))|(\d{3}\-))?(\(0\d{2,3}\)|0\d{2,3}-)?[1-9]\d{6,7}(\-\d{1,4})?$/i.test(value) || /^(13|15|18)\d{9}$/i.test(value);
93、 },
94、 message : '电话号码或手机号码格式不正确'
95、 },
96、 idcard : {// 验证身份证
97、 validator : function(value) {
98、 return /^\d{15}(\d{2}[A-Za-z0-9])?$/i.test(value) || /^\d{18}(\d{2}[A-Za-z0-9])?$/i.test(value);
99、 },
100、 message : '身份证号码格式不正确'
101、 },
102、 intOrFloat : {// 验证整数或小数
103、 validator : function(value) {
104、 return /^\d+(\.\d+)?$/i.test(value);
105、 },
106、 message : '请输入数字，并确保格式正确'
107、 },
108、 currency : {// 验证货币
109、 validator : function(value) {
110、 return /^\d+(\.\d+)?$/i.test(value);
111、 },
112、 message : '货币格式不正确'
113、 },
114、 qq : {// 验证QQ,从10000开始
115、 validator : function(value) {
116、 return /^[1-9]\d{4,9}$/i.test(value);
117、 },
118、 message : 'QQ号码格式不正确'
119、 },
120、 integer : {// 验证整数
121、 validator : function(value) {
122、 return /^[+]?[1-9]+\d*$/i.test(value);
123、 },
124、 message : '请输入整数'
125、 },
126、 chinese : {// 验证中文
127、 validator : function(value) {
128、 return /^[\u0391-\uFFE5]+$/i.test(value);
129、 },
130、 message : '请输入中文'
131、 },
132、 chineseAndLength : {// 验证中文及长度
133、 validator : function(value) {
134、 var len = $.trim(value).length;
135、 if (len >= param[0] && len <= param[1]) {
136、 return /^[\u0391-\uFFE5]+$/i.test(value);
137、 }
138、 },
139、 message : '请输入中文'
140、 },
141、 english : {// 验证英语
142、 validator : function(value) {
143、 return /^[A-Za-z]+$/i.test(value);
144、 },
145、 message : '请输入英文'
146、 },
147、 englishAndLength : {// 验证英语及长度
148、 validator : function(value, param) {
149、 var len = $.trim(value).length;
150、 if (len >= param[0] && len <= param[1]) {
151、 return /^[A-Za-z]+$/i.test(value);
152、 }
153、 },
154、 message : '请输入英文'
155、 },
156、 englishUpperCase : {// 验证英语大写
157、 validator : function(value) {
158、 return /^[A-Z]+$/.test(value);
159、 },
160、 message : '请输入大写英文'
161、 },
162、 unnormal : {// 验证是否包含空格和非法字符
163、 validator : function(value) {
164、 return /.+/i.test(value);
165、 },
166、 message : '输入值不能为空和包含其他非法字符'
167、 },
168、 username : {// 验证用户名
169、 validator : function(value) {
170、 return /^[a-zA-Z][a-zA-Z0-9_]{5,15}$/i.test(value);
171、 },
172、 message : '用户名不合法（字母开头，允许6-16字节，允许字母数字下划线）'
173、 },
174、 faxno : {// 验证传真
175、 validator : function(value) {
176、 return /^((\(\d{2,3}\))|(\d{3}\-))?(\(0\d{2,3}\)|0\d{2,3}-)?[1-9]\d{6,7}(\-\d{1,4})?$/i.test(value);
177、 },
178、 message : '传真号码不正确'
179、 },
180、 zip : {// 验证邮政编码
181、 validator : function(value) {
182、 return /^[1-9]\d{5}$/i.test(value);
183、 },
184、 message : '邮政编码格式不正确'
185、 },
186、 ip : {// 验证IP地址
187、 validator : function(value) {
188、 return /d+.d+.d+.d+/i.test(value);
189、 },
190、 message : 'IP地址格式不正确'
191、 },
192、 name : {// 验证姓名，可以是中文或英文
193、 validator : function(value) {
194、 return /^[\u0391-\uFFE5]+$/i.test(value) | /^\w+[\w\s]+\w+$/i.test(value);
195、 },
196、 message : '请输入姓名'
197、 },
198、 engOrChinese : {// 可以是中文或英文
199、 validator : function(value) {
200、 return /^[\u0391-\uFFE5]+$/i.test(value) | /^\w+[\w\s]+\w+$/i.test(value);
201、 },
202、 message : '请输入中文'
203、 },
204、 engOrChineseAndLength : {// 可以是中文或英文
205、 validator : function(value) {
206、 var len = $.trim(value).length;
207、 if (len >= param[0] && len <= param[1]) {
208、 return /^[\u0391-\uFFE5]+$/i.test(value) | /^\w+[\w\s]+\w+$/i.test(value);
209、 }
210、 },
211、 message : '请输入中文或英文'
212、 },
213、 carNo : {
214、 validator : function(value) {
215、 return /^[\u4E00-\u9FA5][\da-zA-Z]{6}$/.test(value);
216、 },
217、 message : '车牌号码无效（例：粤B12350）'
218、 },
219、 carenergin : {
220、 validator : function(value) {
221、 return /^[a-zA-Z0-9]{16}$/.test(value);
222、 },
223、 message : '发动机型号无效(例：FG6H012345654584)'
224、 },
225、 same : {
226、 validator : function(value, param) {
227、 if ($("#" + param[0]).val() != "" && value != "") {
228、 return $("#" + param[0]).val() == value;
229、 } else {
230、 return true;
231、 }
232、 },
233、 message : '两次输入的密码不一致!'
234、 }
235、 });
236、 /**
237、 $.extend($.fn.validatebox.defaults.rules, {
238、 selectValueRequired: {
239、 validator: function(value,param){
240、 if (value == "" || value.indexOf('请选择') >= 0) {
241、 return false;
242、 }else {
243、 return true;
244、 }
245、 },
246、 message: '该下拉框为必选项'
247、 }
248、 });
下面我们看一些jQueryEasyUI提供的封装好的特性判别：
1、jQueryEasyUI提供了url的验证信息，例：
<inputtype=’test’ id=’vv’ class="easyui-validatebox" required=’true’validType="url">
2、jQueryEasyUI也提供了ajax异步调用后台获取验证信息，例：
<inputtype=’test’ id=’vv’ class="easyui-validatebox" required=’true’validType="remote['后台控制器路径','参数名字']">上述定义会把文本框的值传到后台进行验证，这儿特别需要注意的是，在验证成功是必须为ajax响应”true”,也就是说必须为其传回一个”true”字符串，作者在SpringMVC中实验了两种返回方法均可以，希望能为你带来帮助。
法一：假设定义了HttpMessageConverter返回值对象
此时，异步调用只支持xml数据格式，也就是说,只要定义如下：
@RequestMapping(value ="/test1")
@ResponseBody
//name为前台传入的参数
public void test4(Stringname,HttpServletResponse rep){
String result=null;
if(name.equals("1234")){
result=”true”;
}
return result;
}
但是，如果是json作为返回数据格式的话，理论上不支持，但是如果返回的是单一值，单一值不会序列化为json数据格式，那么也就是说定义了返回值对象格式为json格式时用上述方法，也能实现验证。
法二：用response体响应
@RequestMapping(value ="/test1")
//name为前台传入的参数
public void test4(Stringname,HttpServletResponse rep){
if(name.equals("1234")){
try {
rep.getWriter().print("true");
}catch(IOException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
}
}
此时也能起到验证的功能。
当然如果是复杂的异步调用验证，我们可以通过复写方法来实现。具体方法如下：
1. <table cellpadding="0" align="center" style="width: 98%; height: 98%; text-align: right;">
2. <tr>
3. <td>请输入原密码：</td>
4. <td style="text-align: left; padding-left: 10px;"><input type="password" id="userPassword" name="userPassword" class="easyui-validatebox"
5. data-options="required:true" validType="checkPassword"/>
6. </td>
7. </tr>
8. <tr>
9. <td>请输入新密码：</td>
10. <td style="text-align: left; padding-left: 10px;"><input type="password" id="newPassword" name="newPassword" class="easyui-validatebox"
11. data-options="required:true" />
12. </td>
13. </tr>
14. <tr>
15. <td>请确认输入新密码：</td>
16. <td style="text-align: left; padding-left: 10px;"><input type="password" id="reNewPassword" name="reNewPassword"
17. class="easyui-validatebox" data-options="required:true" validType="equalTo['newPassword']" />
18. </td>
19. </tr>
20.</table>
Js代码
1. equalTo : {
2. validator : function(value, param) {
3. return $("#" + param[0]).val() == value;
4. },
5. message : '两次输入的密码不一致!'
6. },
7. checkPassword :{
8. validator : function(value,param){
9. var sysUser = {};
10. var flag ;
11. sysUser.userPassword = value;
12. $.ajax({
13. url : root + 'login/checkPwd.do',
14. type : 'POST',
15. timeout : 60000,
16. data:sysUser,
17. async: false,
18. success : function(data, textStatus, jqXHR) {
19. if (data == "0") {
20. flag = true;
21. }else{
22. flag = false;
23. }
24. }
25. });
26. if(flag){
27. $("#userPassword").removeClass('validatebox-invalid');
28. }
29. return flag;
30. },
31. message: '原始密码输入错误！'
32. }
3、支持emali验证，
4、支持length[0,100]验证。
目前对它的一些方法还有些不懂的地方，还有如何在一个待验证字段实现两个不同验证，比如：注册用户名验证既要正则匹配、又要异步调用验证是否用户名存在，如果有大神有详细的方法描述，请留言。。。。
1249
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
