jQuery validate自定义

    jQuery Validate的表单验证功能倒是强大，但是和我现在做的还是有些区别。

    除了要把验证元素放置到form标签里外，我自己有提交的按钮，这样就不能使用submit了。这时，我们使用Validate提供的valid方法，返回值是true和false，表单没有通过验证，也是提交不了的。

 

1.             <form id="fProfile"  method="post" action="">
2.                 <div class="content">
3.                     <table>
4.                         <tr>
5.                             <td class="field-name field-required">用户名</td>
6.                             <td>
7.                                 <input type="text" id="txtLoginName" name="txtLoginName" class="disabled" />
8.                             </td>
9.                         </tr>
10.                         <tr>
11.                             <td class="field-name field-required">昵称</td>
12.                             <td>
13.                                 <input type="text" id="txtNickName" name="txtNickName" class="required userName"/>
14.                             </td>
15.                         </tr>
16.                         <tr>
17.                             <td class="field-name field-required">电子邮件</td>
18.                             <td>
19.                                 <input type="text" id="txtEmail" name="txtEmail" class="required email"/>   
20.                             </td>
21.                         </tr>
22.                         <tr>
23.                             <td class="field-name">生日</td>
24.                             <td>
25.                                 <input type="text" id="txtBirthDate" name="txtBirthDate"/>   
26.                             </td>
27.                         </tr>
28.                         <tr>
29.                             <td class="field-name">联系电话</td>
30.                             <td>
31.                                 <input type="text" id="txtContactPhone" name="txtContactPhone" class="isPhone"/>   
32.                             </td>
33.                         </tr>
34.                         <tr>
35.                             <td class="field-name">工作电话</td>
36.                             <td>
37.                                 <input type="text" id="txtWorkPhone" name="txtWorkPhone" class="isPhone"/>   
38.                             </td>
39.                         </tr>
40.                         <tr>
41.                             <td class="field-name">手机号码</td>
42.                             <td>
43.                                 <input type="text" id="txtMobileNo" name="txtMobileNo" class="isMobile"/>   
44.                             </td>
45.                         </tr>
46.                     </table>
47.                 </div>
48.                 <div class="button-pane">
49.                     <button id="btnUpdateProfile">保存</button>
50.                     <button>取消</button>
51.                 </div>
52.             </form>

验证脚本：

1. // 验证个人资料修改表单
2.     $("#fProfile").validate({
3.         rules: {
4.             txtNickName: {
5.                 maxlength: 64
6.             }
7.             , txtContactPhone: {
8.                 maxlength: 32
9.             }
10.             , txtWorkPhone: {
11.                 maxlength: 32
12.             }
13.             , txtMobileNo: {
14.                 maxlength: 32
15.             }
16.         }
17.         , messages: {
18.             txtNickName: {
19.                 maxlength: lmslang.v_NickName_maxlen
20.             }
21.             , txtContactPhone: {
22.                 maxlength: lmslang.v_ContactPhone_maxlen
23.             }
24.             , txtWorkPhone: {
25.                 maxlength: lmslang.v_WorkPhone_maxlen
26.             }
27.             , txtMobileNo: {
28.                 maxlength: lmslang.v_Mobile_maxlen
29.             }
30.         }
31.     });
32. 
    
33.     $("#btnUpdateProfile").click(function() {
34.         var b = $("#fProfile").valid();
35.         if (b) {
36.             editProfile();
37.         } else {
38.             showError(lmslang.formValidate_Error);
39.         }
40.     });

ok！这样判断就不会和以前button的事件冲突了。

 

第二个问题：

Validate的中国化支持：

我们可以使用Validate的API自己进行扩展：

 

// 字符验证
jQuery.validator.addMethod("userName", function(value, element) {
    return this.optional(element) || /^[/u0391-/uFFE5/w]+$/.test(value);
}, "用户名只能包括中文字、英文字母、数字和下划线");
// 手机号码验证
jQuery.validator.addMethod("isMobile", function(value, element) {
    var length = value.length;
    return this.optional(element) || (length == 11 && /^(((13[0-9]{1})|(15[0-9]{1}))+/d{8})$/.test(value));
}, "请正确填写您的手机号码");

// 电话号码验证
jQuery.validator.addMethod("isPhone", function(value, element) {
    var tel = /^(/d{3,4}-?)?/d{7,9}$/g;
    return this.optional(element) || (tel.test(value));
}, "请正确填写您的电话号码");

// 邮政编码验证
jQuery.validator.addMethod("isZipCode", function(value, element) {
    var tel = /^[0-9]{6}$/;
    return this.optional(element) || (tel.test(value));
}, "请正确填写您的邮政编码");

 

参考：

http://docs.jquery.com/Plugins/Validation/valid

 

插件文档地址： http://www.webreference.com/programming/javascript/jquery/form_validation/index.html

 

http://docs.jquery.com/Plugins/Validation/Validator/addMethod#namemethodmessage