客户端验证的极品--jQuery.validator

客户端验证的极品--jQuery.validator(转)

最近在做一个用户注册登录的页面，资料查寻过程中发现了一个非常不错的客户端验证的极品－jQuery.validate。
它是著名的JavaScript包jQuery的一个插件，其实它还有其它的一些插件应该都爽，有待慢慢来学习

官方地址：http://bassistance.de/jquery-plugins/jquery-plugin-validation/
jQuery用户手册：http://jquery.org.cn/visual/cn/index.xml

开发使用起来非常简单明了，
我的代码：

    1 . $(document).ready( function (){   
    2 .   
    3 .  /*  设置默认属性  */    
    4 . $.validator.setDefaults({   
    5 .   submitHandler:  function (form) { form.submit(); }   
    6 . });   
    7 .  //  中文字两个字节   
    8 . jQuery.validator.addMethod( " byteRangeLength " ,  function (value, element, param) {   
    9 .    var  length  =  value.length;   
   10 .    for ( var  i  =   0 ; i  <  value.length; i ++ ){   
   11 .     if (value.charCodeAt(i)  >   127 ){   
   12 .     length ++ ;   
   13 .    }   
   14 .   }   
   15 .    return   this .optional(element)  ||  ( length  >=  param[ 0 ]  &&  length  <=  param[ 1 ] );   
   16 . },  " 请确保输入的值在3-15个字节之间(一个中文字算2个字节) " );   
   17 .   
   18 .  /*  追加自定义验证方法  */    
   19 .  //  身份证号码验证   
   20 . jQuery.validator.addMethod( " isIdCardNo " ,  function (value, element) {   
   21 .    return   this .optional(element)  ||  isIdCardNo(value);   
   22 . },  " 请正确输入您的身份证号码 " );   
   23 .   
   24 .  //  字符验证   
   25 . jQuery.validator.addMethod( " userName " ,  function (value, element) {   
   26 .    return   this .optional(element)  ||   /^ [\u0391 - \uFFE5\w] + $ / .test(value);   
   27 . },  " 用户名只能包括中文字、英文字母、数字和下划线 " );   
   28 .   
   29 .  //  手机号码验证   
   30 . jQuery.validator.addMethod( " isMobile " ,  function (value, element) {   
   31 .    var  length  =  value.length;   
   32 .    return   this .optional(element)  ||  (length  ==   11   &&   /^ ((( 13 [ 0 - 9 ]{ 1 }) | ( 15 [ 0 - 9 ]{ 1 })) + \d{ 8 })$ / .test(value));   
   33 . },  " 请正确填写您的手机号码 " );   
   34 .   
   35 .  //  电话号码验证   
   36 . jQuery.validator.addMethod( " isPhone " ,  function (value, element) {   
   37 .    var  tel  =   /^ (\d{ 3 , 4 } -? ) ? \d{ 7 , 9 }$ / g;   
   38 .    return   this .optional(element)  ||  (tel.test(value));   
   39 . },  " 请正确填写您的电话号码 " );   
   40 .   
   41 .  //  邮政编码验证   
   42 . jQuery.validator.addMethod( " isZipCode " ,  function (value, element) {   
   43 .    var  tel  =   /^ [ 0 - 9 ]{ 6 }$ / ;   
   44 .    return   this .optional(element)  ||  (tel.test(value));   
   45 . },  " 请正确填写您的邮政编码 " );   
   46 . $(regFrom).validate({   
   47 .  /*  设置验证规则  */    
   48 .   rules: {   
   49 .    userName: {   
   50 .     required:  true ,   
   51 .     userName:  true ,   
   52 .     byteRangeLength: [ 3 , 15 ]   
   53 .    },   
   54 .    password: {   
   55 .     required:  true ,   
   56 .     minLength:  5    
   57 .    },   
   58 .    repassword: {   
   59 .     required:  true ,   
   60 .     minLength:  5 ,   
   61 .     equalTo:  " #password "    
   62 .    },   
   63 .    question: {   
   64 .     required:  true    
   65 .    },   
   66 .    answer: {   
   67 .     required:  true    
   68 .    },   
   69 .    realName: {   
   70 .     required:  true    
   71 .    },   
   72 .    cardNumber: {   
   73 .     isIdCardNo:  true    
   74 .    },   
   75 .    mobilePhone: {   
   76 .     isMobile:  true    
   77 .    },   
   78 .    phone: {   
   79 .     isPhone:  true    
   80 .    },   
   81 .    email: {   
   82 .     required:  true ,   
   83 .     email:  true    
   84 .    },   
   85 .    zipCode: {   
   86 .     isZipCode: true    
   87 .    }   
   88 .   },   
   89 .  /*  设置错误信息  */    
   90 .   messages: {   
   91 .    userName: {   
   92 .     required:  " 请填写用户名 " ,   
   93 .     byteRangeLength:  " 用户名必须在3-15个字符之间(一个中文字算2个字符) "    
   94 .    },   
   95 .    password: {   
   96 .     required:  " 请填写密码 " ,   
   97 .     minlength: jQuery.format( " 输入{0}. " )   
   98 .    },   
   99 .    repassword: {   
  100 .     required:  " 请填写确认密码 " ,   
  101 .     equalTo:  " 两次密码输入不相同 "    
  102 .    },   
  103 .    question: {   
  104 .     required:  " 请填写您的密码提示问题 "    
  105 .    },   
  106 .    answer: {   
  107 .     required:  " 请填写您的密码提示答案 "    
  108 .    },   
  109 .    realName: {   
  110 .     required:  " 请填写您的真实姓名 "    
  111 .    },   
  112 .    email: {   
  113 .     required:  " 请输入一个Email地址 " ,   
  114 .     email:  " 请输入一个有效的Email地址 "    
  115 .    }   
  116 .   },   
  117 .  /*  错误信息的显示位置  */    
  118 .   errorPlacement:  function (error, element) {   
  119 .    error.appendTo( element.parent() );   
  120 .   },   
  121 .  /*  验证通过时的处理  */    
  122 .   success:  function (label) {   
  123 .     //  set   as text for IE   
  124 .    label.html( "   " ).addClass( " checked " );   
  125 .   },   
  126 .  /*  获得焦点时不验证  */    
  127 .   focusInvalid:  false ,   
  128 .   onkeyup:  false    
  129 . });   
  130 .   
  131 .  //  输入框获得焦点时，样式设置   
  132 . $('input').focus( function (){   
  133 .    if ($( this ).is( " :text " )  ||  $( this ).is( " :password " ))   
  134 .    $( this ).addClass('focus');   
  135 .    if  ($( this ).hasClass('have_tooltip')) {   
  136 .    $( this ).parent().parent().removeClass('field_normal').addClass('field_focus');   
  137 .   }   
  138 . });   
  139 .   
  140 .  //  输入框失去焦点时，样式设置   
  141 . $('input').blur( function () {   
  142 .   $( this ).removeClass('focus');   
  143 .    if  ($( this ).hasClass('have_tooltip')) {   
  144 .    $( this ).parent().parent().removeClass('field_focus').addClass('field_normal');   
  145 .   }   
  146 . });   
  147 . });  

网上的资料有人说，它跟prototype包会有冲突，我还没有同时使用过，这点不是很清楚，但我是发现一个问题：
对于最小/大 长度的验证方法，作者可能考虑到大家的命名习惯不同，同时做了minLength和minlength（maxLength和maxlength）方法， 应该哪一个都是可以的，但对于用户Message来说，只能够定义针对minlength（maxlength），才能调用用户自定义的Message，
否则只是调用包的默认Message，但具体原因还没有查清楚。同时，这个插件提供了本地化的消息，但对于我这里初学者来说，怎么使用它还有待摸索！