{"id":612,"date":"2011-04-02T11:15:01","date_gmt":"2011-04-02T11:15:01","guid":{"rendered":""},"modified":"2011-04-02T11:15:01","modified_gmt":"2011-04-02T11:15:01","slug":"612","status":"publish","type":"post","link":"https:\/\/www.poloo.org\/?p=612","title":{"rendered":"jquery validate \u4f7f\u7528\u8be6\u89e3"},"content":{"rendered":"

\u9ed8\u8ba4\u6821\u9a8c\u89c4\u5219<\/p>\n

(1)required:true               \u5fc5\u8f93\u5b57\u6bb5
(2)remote:”check.php”          \u4f7f\u7528ajax\u65b9\u6cd5\u8c03\u7528check.php\u9a8c\u8bc1\u8f93\u5165\u503c
(3)email:true                  \u5fc5\u987b\u8f93\u5165\u6b63\u786e\u683c\u5f0f\u7684\u7535\u5b50\u90ae\u4ef6
(4)url:true                    \u5fc5\u987b\u8f93\u5165\u6b63\u786e\u683c\u5f0f\u7684\u7f51\u5740
(5)date:true                   \u5fc5\u987b\u8f93\u5165\u6b63\u786e\u683c\u5f0f\u7684\u65e5\u671f
(6)dateISO:true                \u5fc5\u987b\u8f93\u5165\u6b63\u786e\u683c\u5f0f\u7684\u65e5\u671f(ISO)\uff0c\u4f8b\u5982\uff1a2009-06-23\uff0c1998\/01\/22 \u53ea\u9a8c\u8bc1\u683c\u5f0f\uff0c\u4e0d\u9a8c\u8bc1\u6709\u6548\u6027
(7)number:true                 \u5fc5\u987b\u8f93\u5165\u5408\u6cd5\u7684\u6570\u5b57(\u8d1f\u6570\uff0c\u5c0f\u6570)
(8)digits:true                 \u5fc5\u987b\u8f93\u5165\u6574\u6570
(9)creditcard:                 \u5fc5\u987b\u8f93\u5165\u5408\u6cd5\u7684\u4fe1\u7528\u5361\u53f7
(10)equalTo:”#field”           \u8f93\u5165\u503c\u5fc5\u987b\u548c#field\u76f8\u540c
(11)accept:                    \u8f93\u5165\u62e5\u6709\u5408\u6cd5\u540e\u7f00\u540d\u7684\u5b57\u7b26\u4e32\uff08\u4e0a\u4f20\u6587\u4ef6\u7684\u540e\u7f00\uff09
(12)maxlength:5                \u8f93\u5165\u957f\u5ea6\u6700\u591a\u662f5\u7684\u5b57\u7b26\u4e32(\u6c49\u5b57\u7b97\u4e00\u4e2a\u5b57\u7b26)
(13)minlength:10               \u8f93\u5165\u957f\u5ea6\u6700\u5c0f\u662f10\u7684\u5b57\u7b26\u4e32(\u6c49\u5b57\u7b97\u4e00\u4e2a\u5b57\u7b26)
(14)rangelength:[5,10]         \u8f93\u5165\u957f\u5ea6\u5fc5\u987b\u4ecb\u4e8e 5 \u548c 10 \u4e4b\u95f4\u7684\u5b57\u7b26\u4e32”)(\u6c49\u5b57\u7b97\u4e00\u4e2a\u5b57\u7b26)
(15)range:[5,10]               \u8f93\u5165\u503c\u5fc5\u987b\u4ecb\u4e8e 5 \u548c 10 \u4e4b\u95f4
(16)max:5                      \u8f93\u5165\u503c\u4e0d\u80fd\u5927\u4e8e5
(17)min:10                     \u8f93\u5165\u503c\u4e0d\u80fd\u5c0f\u4e8e10
\u9ed8\u8ba4\u7684\u63d0\u793a

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\u7709ltiges 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}.\")
},
<\/code>
\u5982\u9700\u8981\u4fee\u6539\uff0c\u53ef\u5728js\u4ee3\u7801\u4e2d\u52a0\u5165\uff1a

jQuery.extend(jQuery.validator.messages, {
        required: \"\u5fc5\u9009\u5b57\u6bb5\",
  remote: \"\u8bf7\u4fee\u6b63\u8be5\u5b57\u6bb5\",
  email: \"\u8bf7\u8f93\u5165\u6b63\u786e\u683c\u5f0f\u7684\u7535\u5b50\u90ae\u4ef6\",
  url: \"\u8bf7\u8f93\u5165\u5408\u6cd5\u7684\u7f51\u5740\",
  date: \"\u8bf7\u8f93\u5165\u5408\u6cd5\u7684\u65e5\u671f\",
  dateISO: \"\u8bf7\u8f93\u5165\u5408\u6cd5\u7684\u65e5\u671f (ISO).\",
  number: \"\u8bf7\u8f93\u5165\u5408\u6cd5\u7684\u6570\u5b57\",
  digits: \"\u53ea\u80fd\u8f93\u5165\u6574\u6570\",
  creditcard: \"\u8bf7\u8f93\u5165\u5408\u6cd5\u7684\u4fe1\u7528\u5361\u53f7\",
  equalTo: \"\u8bf7\u518d\u6b21\u8f93\u5165\u76f8\u540c\u7684\u503c\",
  accept: \"\u8bf7\u8f93\u5165\u62e5\u6709\u5408\u6cd5\u540e\u7f00\u540d\u7684\u5b57\u7b26\u4e32\",
  maxlength: jQuery.validator.format(\"\u8bf7\u8f93\u5165\u4e00\u4e2a\u957f\u5ea6\u6700\u591a\u662f {0} \u7684\u5b57\u7b26\u4e32\"),
  minlength: jQuery.validator.format(\"\u8bf7\u8f93\u5165\u4e00\u4e2a\u957f\u5ea6\u6700\u5c11\u662f {0} \u7684\u5b57\u7b26\u4e32\"),
  rangelength: jQuery.validator.format(\"\u8bf7\u8f93\u5165\u4e00\u4e2a\u957f\u5ea6\u4ecb\u4e8e {0} \u548c {1} \u4e4b\u95f4\u7684\u5b57\u7b26\u4e32\"),
  range: jQuery.validator.format(\"\u8bf7\u8f93\u5165\u4e00\u4e2a\u4ecb\u4e8e {0} \u548c {1} \u4e4b\u95f4\u7684\u503c\"),
  max: jQuery.validator.format(\"\u8bf7\u8f93\u5165\u4e00\u4e2a\u6700\u5927\u4e3a {0} \u7684\u503c\"),
  min: jQuery.validator.format(\"\u8bf7\u8f93\u5165\u4e00\u4e2a\u6700\u5c0f\u4e3a {0} \u7684\u503c\")
});
<\/code>
\u63a8\u8350\u505a\u6cd5\uff0c\u5c06\u6b64\u6587\u4ef6\u653e\u5165messages_cn.js\u4e2d\uff0c\u5728\u9875\u9762\u4e2d\u5f15\u5165
<script src=”..\/js\/messages_cn.js” type=”text\/javascript”><\/script><\/p>\n

\u4f7f\u7528\u65b9\u5f0f
1.\u5c06\u6821\u9a8c\u89c4\u5219\u5199\u5230\u63a7\u4ef6\u4e2d

<script src=\"..\/js\/jquery.js\" type=\"text\/javascript\"><\/script>
<script src=\"..\/js\/jquery.validate.js\" type=\"text\/javascript\"><\/script>
<script src=\".\/js\/jquery.metadata.js\" type=\"text\/javascript\"><\/script>
$().ready(function() {
$(\"#signupForm\").validate();
});<\/p>\n

<form id=\"signupForm\" method=\"get\" action=\"\">
        <label for=\"firstname\">Firstname<\/label>
        <input id=\"firstname\" name=\"firstname\" class=\"required\" \/><\/p>\n

        <label for=\"email\">E-Mail<\/label>
        <input id=\"email\" name=\"email\" class=\"required email\" \/><\/p>\n

         <label for=\"password\">Password<\/label>
        <input id=\"password\" name=\"password\" type=\"password\" class=\"{required:true,minlength:5}\" \/><\/p>\n

         <label for=\"confirm_password\">\u786e\u8ba4\u5bc6\u7801<\/label>
        <input id=\"confirm_password\" name=\"confirm_password\" type=\"password\" class=\"{required:true,minlength:5,equalTo:'#password'}\" \/><\/p>\n

        <input class=\"submit\" type=\"submit\" value=\"Submit\"\/>  
<\/form>
<\/code>
\u4f7f\u7528class=”{}”\u7684\u65b9\u5f0f\uff0c\u5fc5\u987b\u5f15\u5165\u5305\uff1ajquery.metadata.js
\u53ef\u4ee5\u4f7f\u7528\u5982\u4e0b\u7684\u65b9\u6cd5\uff0c\u4fee\u6539\u63d0\u793a\u5185\u5bb9\uff1a
class=”{required:true,minlength:5,messages:{required:’\u8bf7\u8f93\u5165\u5185\u5bb9’}}”
\u5728\u4f7f\u7528equalTo\u5173\u952e\u5b57\u65f6\uff0c\u540e\u9762\u7684\u5185\u5bb9\u5fc5\u987b\u52a0\u4e0a\u5f15\u53f7\uff0c\u5982\u4e0b\u4ee3\u7801\uff1a
class=”{required:true,minlength:5,equalTo:’#password’}”
\u53e6\u5916\u4e00\u4e2a\u65b9\u5f0f\uff0c\u4f7f\u7528\u5173\u952e\u5b57\uff1ameta\uff08\u4e3a\u4e86\u5143\u6570\u636e\u4f7f\u7528\u5176\u4ed6\u63d2\u4ef6\u4f60\u8981\u5305\u88c5 \u4f60\u7684\u9a8c\u8bc1\u89c4\u5219\u5728\u4ed6\u4eec\u81ea\u5df1\u7684\u9879\u76ee\u4e2d\u53ef\u4ee5\u7528\u8fd9\u4e2a\u7279\u6b8a\u7684\u9009\u9879\uff09
Tell the validation plugin to look inside a validate-property in metadata for validation rules.
\u4f8b\u5982\uff1a

meta: \"validate\"
<input id=\"password\" name=\"password\" type=\"password\" class=\"{validate:{required:true,minlength:5}}\" \/>
<\/code>
\u518d\u6709\u4e00\u79cd\u65b9\u5f0f\uff1a
$.metadata.setType(“attr”, “validate”);
\u8fd9\u6837\u53ef\u4ee5\u4f7f\u7528validate=”{required:true}”\u7684\u65b9\u5f0f\uff0c\u6216\u8005class=”required”\uff0c\u4f46class=”{required:true,minlength:5}”\u5c06\u4e0d\u8d77\u4f5c\u7528<\/p>\n

2.\u5c06\u6821\u9a8c\u89c4\u5219\u5199\u5230\u4ee3\u7801\u4e2d

$().ready(function() {
$(\"#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: \"\u8bf7\u8f93\u5165\u59d3\u540d\",
   email: {
    required: \"\u8bf7\u8f93\u5165Email\u5730\u5740\",
    email: \"\u8bf7\u8f93\u5165\u6b63\u786e\u7684email\u5730\u5740\"
   },
   password: {
    required: \"\u8bf7\u8f93\u5165\u5bc6\u7801\",
    minlength: jQuery.format(\"\u5bc6\u7801\u4e0d\u80fd\u5c0f\u4e8e{0}\u4e2a\u5b57\u7b26\")
   },
   confirm_password: {
    required: \"\u8bf7\u8f93\u5165\u786e\u8ba4\u5bc6\u7801\",
    minlength: \"\u786e\u8ba4\u5bc6\u7801\u4e0d\u80fd\u5c0f\u4e8e5\u4e2a\u5b57\u7b26\",
    equalTo: \"\u4e24\u6b21\u8f93\u5165\u5bc6\u7801\u4e0d\u4e00\u81f4\u4e0d\u4e00\u81f4\"
   }
  }
    });
});
\/\/messages\u5904\uff0c\u5982\u679c\u67d0\u4e2a\u63a7\u4ef6\u6ca1\u6709message\uff0c\u5c06\u8c03\u7528\u9ed8\u8ba4\u7684\u4fe1\u606f<\/p>\n

<form id=\"signupForm\" method=\"get\" action=\"\">
        <label for=\"firstname\">Firstname<\/label>
        <input id=\"firstname\" name=\"firstname\" \/><\/p>\n

        <label for=\"email\">E-Mail<\/label>
        <input id=\"email\" name=\"email\" \/><\/p>\n

        <label for=\"password\">Password<\/label>
        <input id=\"password\" name=\"password\" type=\"password\" \/><\/p>\n

        <label for=\"confirm_password\">\u786e\u8ba4\u5bc6\u7801<\/label>
        <input id=\"confirm_password\" name=\"confirm_password\" type=\"password\" \/><\/p>\n

         <input class=\"submit\" type=\"submit\" value=\"Submit\"\/>  
<\/form>
<\/code>
required:true \u5fc5\u987b\u6709\u503c
required:”#aa:checked”\u8868\u8fbe\u5f0f\u7684\u503c\u4e3a\u771f\uff0c\u5219\u9700\u8981\u9a8c\u8bc1
required:function(){}\u8fd4\u56de\u4e3a\u771f\uff0c\u8868\u65f6\u9700\u8981\u9a8c\u8bc1
\u540e\u8fb9\u4e24\u79cd\u5e38\u7528\u4e8e\uff0c\u8868\u5355\u4e2d\u9700\u8981\u540c\u65f6\u586b\u6216\u4e0d\u586b\u7684\u5143\u7d20<\/p>\n

\u5e38\u7528\u65b9\u6cd5\u53ca\u6ce8\u610f\u95ee\u9898
1.\u7528\u5176\u4ed6\u65b9\u5f0f\u66ff\u4ee3\u9ed8\u8ba4\u7684SUBMIT

$().ready(function() {
$(\"#signupForm\").validate({
        submitHandler:function(form){
            alert(\"submitted\");  
            form.submit();
        }    
    });
});
<\/code>
\u53ef\u4ee5\u8bbe\u7f6evalidate\u7684\u9ed8\u8ba4\u503c\uff0c\u5199\u6cd5\u5982\u4e0b\uff1a

$.validator.setDefaults({
submitHandler: function(form) { alert(\"submitted!\");form.submit(); }
});
<\/code>
\u5982\u679c\u60f3\u63d0\u4ea4\u8868\u5355, \u9700\u8981\u4f7f\u7528form.submit()\u800c\u4e0d\u8981\u4f7f\u7528$(form).submit()<\/p>\n

2.debug\uff0c\u5982\u679c\u8fd9\u4e2a\u53c2\u6570\u4e3atrue\uff0c\u90a3\u4e48\u8868\u5355\u4e0d\u4f1a\u63d0\u4ea4\uff0c\u53ea\u8fdb\u884c\u68c0\u67e5\uff0c\u8c03\u8bd5\u65f6\u5341\u5206\u65b9\u4fbf

$().ready(function() {
$(\"#signupForm\").validate({
        debug:true
    });
});
<\/code>
\u5982\u679c\u4e00\u4e2a\u9875\u9762\u4e2d\u6709\u591a\u4e2a\u8868\u5355\uff0c\u7528

$.validator.setDefaults({
   debug: true
})
<\/code>
3.ignore\uff1a\u5ffd\u7565\u67d0\u4e9b\u5143\u7d20\u4e0d\u9a8c\u8bc1
ignore: “.ignore”<\/p>\n

4.errorPlacement\uff1aCallback  Default: \u628a\u9519\u8bef\u4fe1\u606f\u653e\u5728\u9a8c\u8bc1\u7684\u5143\u7d20\u540e\u9762
\u6307\u660e\u9519\u8bef\u653e\u7f6e\u7684\u4f4d\u7f6e\uff0c\u9ed8\u8ba4\u60c5\u51b5\u662f\uff1aerror.appendTo(element.parent());\u5373\u628a\u9519\u8bef\u4fe1\u606f\u653e\u5728\u9a8c\u8bc1\u7684\u5143\u7d20\u540e\u9762
errorPlacement: function(error, element) {  
    error.appendTo(element.parent());  
}
\/\/\u793a\u4f8b\uff1a

<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\"> <\/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>
    <\/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() );
}
<\/code>
\u4ee3\u7801\u7684\u4f5c\u7528\u662f\uff1a\u4e00\u822c\u60c5\u51b5\u4e0b\u628a\u9519\u8bef\u4fe1\u606f\u663e\u793a\u5728<td class=”status”><\/td>\u4e2d\uff0c\u5982\u679c\u662fradio\u663e\u793a\u5728<td><\/td>\u4e2d\uff0c\u5982\u679c\u662fcheckbox\u663e\u793a\u5728\u5185\u5bb9\u7684\u540e\u9762
errorClass\uff1aString  Default: “error”
\u6307\u5b9a\u9519\u8bef\u63d0\u793a\u7684css\u7c7b\u540d\uff0c\u53ef\u4ee5\u81ea\u5b9a\u4e49\u9519\u8bef\u63d0\u793a\u7684\u6837\u5f0f
errorElement\uff1aString  Default: “label”
\u7528\u4ec0\u4e48\u6807\u7b7e\u6807\u8bb0\u9519\u8bef\uff0c\u9ed8\u8ba4\u7684\u662flabel\u4f60\u53ef\u4ee5\u6539\u6210em
errorContainer\uff1aSelector
\u663e\u793a\u6216\u8005\u9690\u85cf\u9a8c\u8bc1\u4fe1\u606f\uff0c\u53ef\u4ee5\u81ea\u52a8\u5b9e\u73b0\u6709\u9519\u8bef\u4fe1\u606f\u51fa\u73b0\u65f6\u628a\u5bb9\u5668\u5c5e\u6027\u53d8\u4e3a\u663e\u793a\uff0c\u65e0\u9519\u8bef\u65f6\u9690\u85cf\uff0c\u7528\u5904\u4e0d\u5927
errorContainer: “#messageBox1, #messageBox2”
errorLabelContainer\uff1aSelector
\u628a\u9519\u8bef\u4fe1\u606f\u7edf\u4e00\u653e\u5728\u4e00\u4e2a\u5bb9\u5668\u91cc\u9762\u3002
wrapper\uff1aString
\u7528\u4ec0\u4e48\u6807\u7b7e\u518d\u628a\u4e0a\u8fb9\u7684errorELement\u5305\u8d77\u6765
\u4e00\u822c\u8fd9\u4e09\u4e2a\u5c5e\u6027\u540c\u65f6\u4f7f\u7528\uff0c\u5b9e\u73b0\u5728\u4e00\u4e2a\u5bb9\u5668\u5185\u663e\u793a\u6240\u6709\u9519\u8bef\u63d0\u793a\u7684\u529f\u80fd\uff0c\u5e76\u4e14\u6ca1\u6709\u4fe1\u606f\u65f6\u81ea\u52a8\u9690\u85cf
errorContainer: “div.error”,
errorLabelContainer: $(“#signupForm div.error”),
wrapper: “li”<\/p>\n

\u8bbe\u7f6e\u9519\u8bef\u63d0\u793a\u7684\u6837\u5f0f\uff0c\u53ef\u4ee5\u589e\u52a0\u56fe\u6807\u663e\u793a

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;
}
success\uff1aString,Callback
<\/code>
\u8981\u9a8c\u8bc1\u7684\u5143\u7d20\u901a\u8fc7\u9a8c\u8bc1\u540e\u7684\u52a8\u4f5c\uff0c\u5982\u679c\u8ddf\u4e00\u4e2a\u5b57\u7b26\u4e32\uff0c\u4f1a\u5f53\u505a\u4e00\u4e2acss\u7c7b\uff0c\u4e5f\u53ef\u8ddf\u4e00\u4e2a\u51fd\u6570

success: function(label) {
    \/\/ set   as text for IE
    label.html(\" \").addClass(\"checked\");
    \/\/label.addClass(\"valid\").text(\"Ok!\")
}
<\/code>
\u6dfb\u52a0”valid” \u5230\u9a8c\u8bc1\u5143\u7d20, \u5728CSS\u4e2d\u5b9a\u4e49\u7684\u6837\u5f0f<style>label.valid {}<\/style>
success: “valid”<\/p>\n

nsubmit\uff1a Boolean  Default: true
\u63d0\u4ea4\u65f6\u9a8c\u8bc1. \u8bbe\u7f6e\u552ffalse\u5c31\u7528\u5176\u4ed6\u65b9\u6cd5\u53bb\u9a8c\u8bc1
onfocusout\uff1aBoolean  Default: true
\u5931\u53bb\u7126\u70b9\u662f\u9a8c\u8bc1(\u4e0d\u5305\u62eccheckboxes\/radio buttons)
onkeyup\uff1aBoolean  Default: true
\u5728keyup\u65f6\u9a8c\u8bc1.
onclick\uff1aBoolean  Default: true
\u5728checkboxes \u548c radio \u70b9\u51fb\u65f6\u9a8c\u8bc1
focusInvalid\uff1aBoolean  Default: true
\u63d0\u4ea4\u8868\u5355\u540e\uff0c\u672a\u901a\u8fc7\u9a8c\u8bc1\u7684\u8868\u5355(\u7b2c\u4e00\u4e2a\u6216\u63d0\u4ea4\u4e4b\u524d\u83b7\u5f97\u7126\u70b9\u7684\u672a\u901a\u8fc7\u9a8c\u8bc1\u7684\u8868\u5355)\u4f1a\u83b7\u5f97\u7126\u70b9
focusCleanup\uff1aBoolean  Default: false
\u5982\u679c\u662ftrue\u90a3\u4e48\u5f53\u672a\u901a\u8fc7\u9a8c\u8bc1\u7684\u5143\u7d20\u83b7\u5f97\u7126\u70b9\u65f6\uff0c\u79fb\u9664\u9519\u8bef\u63d0\u793a\u3002\u907f\u514d\u548c focusInvalid \u4e00\u8d77\u7528<\/p>\n

\/\/ \u91cd\u7f6e\u8868\u5355

$().ready(function() {
var validator = $(\"#signupForm\").validate({
        submitHandler:function(form){
            alert(\"submitted\");  
            form.submit();
        }    
    });
    $(\"#reset\").click(function() {
        validator.resetForm();
    });
});
<\/code>
remote\uff1aURL
\u4f7f\u7528ajax\u65b9\u5f0f\u8fdb\u884c\u9a8c\u8bc1\uff0c\u9ed8\u8ba4\u4f1a\u63d0\u4ea4\u5f53\u524d\u9a8c\u8bc1\u7684\u503c\u5230\u8fdc\u7a0b\u5730\u5740\uff0c\u5982\u679c\u9700\u8981\u63d0\u4ea4\u5176\u4ed6\u7684\u503c\uff0c\u53ef\u4ee5\u4f7f\u7528data\u9009\u9879
remote: “check-email.php”

remote: {
    url: \"check-email.php\",     \/\/\u540e\u53f0\u5904\u7406\u7a0b\u5e8f
    type: \"post\",               \/\/\u6570\u636e\u53d1\u9001\u65b9\u5f0f
    dataType: \"json\",           \/\/\u63a5\u53d7\u6570\u636e\u683c\u5f0f  
    data: {                     \/\/\u8981\u4f20\u9012\u7684\u6570\u636e
        username: function() {
            return $(\"#username\").val();
        }
    }
}
<\/code>
\u8fdc\u7a0b\u5730\u5740\u53ea\u80fd\u8f93\u51fa “true” \u6216 “false”\uff0c\u4e0d\u80fd\u6709\u5176\u5b83\u8f93\u51fa<\/p>\n

addMethod\uff1aname, method, message
\u81ea\u5b9a\u4e49\u9a8c\u8bc1\u65b9\u6cd5<\/p>\n

\/\/ \u4e2d\u6587\u5b57\u4e24\u4e2a\u5b57\u8282

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(\"\u8bf7\u786e\u4fdd\u8f93\u5165\u7684\u503c\u5728{0}-{1}\u4e2a\u5b57\u8282\u4e4b\u95f4(\u4e00\u4e2a\u4e2d\u6587\u5b57\u7b972\u4e2a\u5b57\u8282)\"));
<\/code>
\/\/ \u90ae\u653f\u7f16\u7801\u9a8c\u8bc1  

jQuery.validator.addMethod(\"isZipCode\", function(value, element) {  
    var tel = \/^[0-9]{6}$\/;
    return this.optional(element) || (tel.test(value));
}, \"\u8bf7\u6b63\u786e\u586b\u5199\u60a8\u7684\u90ae\u653f\u7f16\u7801\");
<\/code>
radio\u548ccheckbox\u3001select\u7684\u9a8c\u8bc1
radio\u7684required\u8868\u793a\u5fc5\u987b\u9009\u4e2d\u4e00\u4e2a

<input  type=\"radio\" id=\"gender_male\" value=\"m\" name=\"gender\" class=\"{required:true}\" \/>
<input  type=\"radio\" id=\"gender_female\" value=\"f\" name=\"gender\"\/>
<\/code>
checkbox\u7684required\u8868\u793a\u5fc5\u987b\u9009\u4e2d

<input type=\"checkbox\" class=\"checkbox\" id=\"agree\" name=\"agree\" class=\"{required:true}\" \/>
<\/code>
checkbox\u7684minlength\u8868\u793a\u5fc5\u987b\u9009\u4e2d\u7684\u6700\u5c0f\u4e2a\u6570,maxlength\u8868\u793a\u6700\u5927\u7684\u9009\u4e2d\u4e2a\u6570,rangelength:[2,3]\u8868\u793a\u9009\u4e2d\u4e2a\u6570\u533a\u95f4

<input type=\"checkbox\" class=\"checkbox\" id=\"spam_email\" value=\"email\" name=\"spam[]\" class=\"{required:true, minlength:2}\" \/>
<input type=\"checkbox\" class=\"checkbox\" id=\"spam_phone\" value=\"phone\" name=\"spam[]\" \/>
<input type=\"checkbox\" class=\"checkbox\" id=\"spam_mail\" value=\"mail\" name=\"spam[]\" \/>
<\/code>
select\u7684required\u8868\u793a\u9009\u4e2d\u7684value\u4e0d\u80fd\u4e3a\u7a7a

<select id=\"jungle\" name=\"jungle\" title=\"Please select something!\" class=\"{required:true}\">
    <option value=\"\"><\/option>
    <option value=\"1\">Buga<\/option>
    <option value=\"2\">Baga<\/option>
    <option value=\"3\">Oi<\/option>
<\/select>
<\/code>
select\u7684minlength\u8868\u793a\u9009\u4e2d\u7684\u6700\u5c0f\u4e2a\u6570\uff08\u53ef\u591a\u9009\u7684select\uff09,maxlength\u8868\u793a\u6700\u5927\u7684\u9009\u4e2d\u4e2a\u6570,rangelength:[2,3]\u8868\u793a\u9009\u4e2d\u4e2a\u6570\u533a\u95f4

<select id=\"fruit\" name=\"fruit\" title=\"Please select at least two fruits\" class=\"{required:true, minlength:2}\" multiple=\"multiple\">
    <option value=\"b\">Banana<\/option>
    <option value=\"a\">Apple<\/option>
    <option value=\"p\">Peach<\/option>
    <option value=\"t\">Turtle<\/option>
<\/select>
<\/code><\/p>\n","protected":false},"excerpt":{"rendered":"

\u9ed8\u8ba4\u6821\u9a8c\u89c4\u5219 (1)required:true &nbsp...<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[5],"tags":[],"class_list":["post-612","post","type-post","status-publish","format-standard","hentry","category-Note"],"_links":{"self":[{"href":"https:\/\/www.poloo.org\/index.php?rest_route=\/wp\/v2\/posts\/612","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.poloo.org\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.poloo.org\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.poloo.org\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.poloo.org\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=612"}],"version-history":[{"count":0,"href":"https:\/\/www.poloo.org\/index.php?rest_route=\/wp\/v2\/posts\/612\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.poloo.org\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=612"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.poloo.org\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=612"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.poloo.org\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=612"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}