【转】jQuery验证控件jquery.validate.js使用说明+中文API

<script src="../js/jquery.js" type="text/javascript"></script>
 <script src="../js/jquery.validate.js" type="text/javascript"></script>

 (1)required:true                必输字段
 (2)remote:"check.php"      使用ajax方法调用check.php验证输入值
 (3)email:true                    必须输入正确格式的电子邮件
 (4)url:true                        必须输入正确格式的网址
 (5)date:true                      必须输入正确格式的日期 日期校验ie6出错，慎用
 (6)dateISO:true                必须输入正确格式的日期(ISO)，例如：2009-06-23，1998/01/22 只验证格式，不验证有效性
 (7)number:true                 必须输入合法的数字(负数，小数)
 (8)digits:true                    必须输入整数
 (9)creditcard:                   必须输入合法的信用卡号
 (10)equalTo:"#field"          输入值必须和#field相同
 (11)accept:                       输入拥有合法后缀名的字符串（上传文件的后缀）
 (12)maxlength:5               输入长度最多是5的字符串(汉字算一个字符)
 (13)minlength:10              输入长度最小是10的字符串(汉字算一个字符)
 (14)rangelength:[5,10]      输入长度必须介于 5 和 10 之间的字符串")(汉字算一个字符)
 (15)range:[5,10]               输入值必须介于 5 和 10 之间
 (16)max:5                        输入值不能大于5
 (17)min:10                       输入值不能小于10

三、默认的提示
 messages: {
 required: "This field is required.",
 remote: "Please fix this field.",
 email: "Please enter a valid email address.",
 url: "Please enter a valid URL.",
 date: "Please enter a valid date.",
 dateISO: "Please enter a valid date (ISO).",
 dateDE: "Bitte geben Sie ein g眉ltiges Datum ein.",
 number: "Please enter a valid number.",
 numberDE: "Bitte geben Sie eine Nummer ein.",
 digits: "Please enter only digits",
 creditcard: "Please enter a valid credit card number.",
 equalTo: "Please enter the same value again.",
 accept: "Please enter a value with a valid extension.",
 maxlength: $.validator.format("Please enter no more than {0} characters."),
 minlength: $.validator.format("Please enter at least {0} characters."),
 rangelength: $.validator.format("Please enter a value between {0} and {1} characters long."),
 range: $.validator.format("Please enter a value between {0} and {1}."),
 max: $.validator.format("Please enter a value less than or equal to {0}."),
 min: $.validator.format("Please enter a value greater than or equal to {0}.")
 },

jQuery.extend(jQuery.validator.messages, {
 required: "必选字段",
 remote: "请修正该字段",
 email: "请输入正确格式的电子邮件",
 url: "请输入合法的网址",
 date: "请输入合法的日期",
 dateISO: "请输入合法的日期 (ISO).",
 number: "请输入合法的数字",
 digits: "只能输入整数",
 creditcard: "请输入合法的信用卡号",
 equalTo: "请再次输入相同的值",
 accept: "请输入拥有合法后缀名的字符串",
 maxlength: jQuery.validator.format("请输入一个 长度最多是 {0} 的字符串"),
 minlength: jQuery.validator.format("请输入一个 长度最少是 {0} 的字符串"),
 rangelength: jQuery.validator.format("请输入 一个长度介于 {0} 和 {1} 之间的字符串"),
 range: jQuery.validator.format("请输入一个介于 {0} 和 {1} 之间的值"),
 max: jQuery.validator.format("请输入一个最大为{0} 的值"),
 min: jQuery.validator.format("请输入一个最小为{0} 的值")
 });

<script src="../js/jquery.validate.js" type="text/javascript"></script>
<script src="./js/jquery.metadata.js" type="text/javascript"></script>
 
$().ready(function() {
 $("#signupForm").validate();
});
 
 
<form id="signupForm" method="get" action="">
    <p>
        <label for="firstname">Firstname</label>
        <input id="firstname" name="firstname" class="required" />
    </p>
 <p>
  <label for="email">E-Mail</label>
  <input id="email" name="email" class="required email" />
 </p>
 <p>
  <label for="password">Password</label>
  <input id="password" name="password" type="password" class="{required:true,minlength:5}" />
 </p>
 <p>
  <label for="confirm_password">确认密码</label>
  <input id="confirm_password" name="confirm_password" type="password" class="{required:true,minlength:5,equalTo:'#password'}" />
 </p>
    <p>
        <input class="submit" type="submit" value="Submit"/>
    </p>
</form>

class="{required:true,minlength:5,messages:{required:'请输入内容'}}"

class="{required:true,minlength:5,equalTo:'#password'}"

$("#signupForm").validate({
        rules: {
   firstname: "required",
   email: {
    required: true,
    email: true
   },
   password: {
    required: true,
    minlength: 5
   },
   confirm_password: {
    required: true,
    minlength: 5,
    equalTo: "#password"
   }
  },
        messages: {
   firstname: "请输入姓名",
   email: {
    required: "请输入Email地址",
    email: "请输入正确的email地址"
   },
   password: {
    required: "请输入密码",
    minlength: jQuery.format("密码不能小于{0}个字 符")
   },
   confirm_password: {
    required: "请输入确认密码",
    minlength: "确认密码不能小于5个字符",
    equalTo: "两次输入密码不一致不一致"
   }
  }
    });
});

  <p>
        <label for="firstname">Firstname</label>
        <input id="firstname" name="firstname" />
    </p>
 <p>
  <label for="email">E-Mail</label>
  <input id="email" name="email" />
 </p>
 <p>
  <label for="password">Password</label>
  <input id="password" name="password" type="password" />
 </p>
 <p>
  <label for="confirm_password">确认密码</label>
  <input id="confirm_password" name="confirm_password" type="password" />
 </p>
    <p>
        <input class="submit" type="submit" value="Submit"/>
    </p>
</form>

$().ready(function() {
 $("#signupForm").validate({
        submitHandler:function(form){
            alert("submitted");   
            form.submit();
        }    
    });
});

 $(".selector").validate({     
 submitHandler: function(form) 
   {      
      $(form).ajaxSubmit();     
   }  
 })

$.validator.setDefaults({
 submitHandler: function(form) { alert("submitted!");form.submit(); }
});
1
2
3
$.validator.setDefaults({
 submitHandler: function(form) { alert("submitted!");form.submit(); }
});

$().ready(function() {
 $("#signupForm").validate({
        debug:true
    });
});

$.validator.setDefaults({
   debug: true
})

<tr>
    <td class="label"><label id="lfirstname" for="firstname">First Name</label></td>
    <td class="field"><input id="firstname" name="firstname" type="text" value="" maxlength="100" /></td>
    <td class="status"></td>
</tr>
<tr>
    <td style="padding-right: 5px;">
        <input id="dateformat_eu" name="dateformat" type="radio" value="0" />
        <label id="ldateformat_eu" for="dateformat_eu">14/02/07</label>
    </td>
    <td style="padding-left: 5px;">
        <input id="dateformat_am" name="dateformat" type="radio" value="1"  />
        <label id="ldateformat_am" for="dateformat_am">02/14/07</label>
    </td>
    <td></td>
</tr>
<tr>
    <td class="label">&nbsp;</td>
    <td class="field" colspan="2">
        <div id="termswrap">
            <input id="terms" type="checkbox" name="terms" />
            <label id="lterms" for="terms">I have read and accept the Terms of Use.</label>
        </div>
    </td>
</tr>
 
errorPlacement: function(error, element) {
    if ( element.is(":radio") )
        error.appendTo( element.parent().next().next() );
    else if ( element.is(":checkbox") )
        error.appendTo ( element.next() );
    else
        error.appendTo( element.parent().next() );
}

input.error { border: 1px solid red; }
label.error {
  background:url("./demo/images/unchecked.gif") no-repeat 0px 0px;
 
  padding-left: 16px;
 
  padding-bottom: 2px;
 
  font-weight: bold;
 
  color: #EA5200;
}
label.checked {
  background:url("./demo/images/checked.gif") no-repeat 0px 0px;
}

// 重置表单
 $().ready(function() {
 var validator = $("#signupForm").validate({
 submitHandler:function(form){
 alert("submitted");
 form.submit();
 }
 });
 $("#reset").click(function() {
 validator.resetForm();
 });
});

remote: "check-email.php"
remote: {
 url: "check-email.php",     //后台处理程序
 type: "post",               //数据发送方式
 dataType: "json",           //接受数据格式
 data: {                     //要传递的数据
 username: function() {
 return $("#username").val();
 }
 }
 }
 远程地址只能输出 "true" 或 "false"，不能有其它输出

9添加自定义校验
 addMethod：name, method, message
 自定义验证方法
 // 中文字两个字节
 jQuery.validator.addMethod("byteRangeLength", function(value, element, param) {
 var length = value.length;
 for(var i = 0; i < value.length; i++){
 if(value.charCodeAt(i) > 127){
 length++;
 }
 }
 return this.optional(element) || ( length >= param[0] && length <= param[1] );
 }, $.validator.format("请确保输入的值在{0}-{1}个字节之间(一个中文字算2个字节)"));
 // 邮政编码验证
 jQuery.validator.addMethod("isZipCode", function(value, element) {
 var tel = /^[0-9]{6}$/;
 return this.optional(element) || (tel.test(value));
 }, "请正确填写您的邮政编码");