\u261e \u5b89\u88dd<\/h3>\n\n\n\n

\u700f\u89bd\u5668 \/ CDN<\/h4>\n\n\n\n
<script src=\"\/\/cdnjs.cloudflare.com\/ajax\/libs\/validate.js\/0.12.0\/validate.min.js\"><\/script><\/pre>\n\n\n\nnpm \/ node.js<\/h4>\n\n\n\n$ npm install --save validate.js\n\nvar validate = require(\"validate.js\");<\/pre>\n\n\n\nBower<\/h4>\n\n\n\n$ bower install --save validate.js<\/pre>\n\n\n\nComponent<\/h4>\n\n\n\n$ component install ansman\/validate.js<\/pre>\n<\/div>\n<\/div>\n\n\n\n\n\n\u261e \u683c\u5f0f<\/h3>\n\n\n\n
\u7528\u6cd5<\/h4>\n\n\n\n\/\/\u7528\u6cd5\n<attribute>: {\n  <validator name>: <validator options>\n}<\/pre>\n\n\n\n\u904b\u7528\u8aaa\u660e<\/h4>\n\n\n\n\/\/Javascript \u7bc4\u4f8b\nemail: {\n  presence: true, \/\/ Email \u662f\u5fc5\u586b\u6b04\u4f4d\n  email: true \/\/ \u9700\u8981\u7b26\u5408 Email \u683c\u5f0f\n},<\/pre>\n\n\n\n\/\/Html\n<input id=\"email\" class=\"form-control\" type=\"email\" placeholder=\"Email\" name=\"email\"><\/pre>\n\n\n\n\u9810\u8a2d\u9a57\u8b49\u898f\u5247<\/h4>\n\n\n\nrequired: true \/\/ \u5fc5\u586b\nremote: 'akacodedog.php' \/\/ \u4f7f\u7528ajax\u6307\u5b9aakacodedog.php\u9a57\u8b49\nemail: true \/\/ \u9a57\u8b49email\u683c\u5f0f\nurl: true \/\/ \u9a57\u8b49\u7db2\u5740\u683c\u5f0f\ndate: true \/\/ \u9a57\u8b49\u65e5\u671f\u683c\u5f0f\ndateISO: true \/\/ \u9a57\u8b49ISO\u65e5\u671f\u683c\u5f0f\nnumber: true \/\/ \u9a57\u8b49\u6578\u5b57\ndigits: true \/\/ \u9650\u5236\u6574\u6578\ncreditcard: '' \/\/ \u9a57\u8b49\u4fe1\u7528\u5361\u865f\nequalTo: '' \/\/ \u9650\u5236\u8f38\u5165\u5167\u5bb9\u8207\u67d0\u5143\u7d20\u76f8\u540c\naccept: '' \/\/ \u9650\u5236\u4e0a\u50b3\u6a94\u6848\u526f\u6a94\u540d\nmaxlength: 3 \/\/ \u9650\u5236\u6700\u5927\u8f38\u5165\u9577\u5ea6\u70ba3\nminlength: 10 \/\/ \u9650\u5236\u6700\u5c0f\u8f38\u5165\u9577\u5ea6\u70ba10\nrangelength: [3, 10] \/\/ \u9650\u5236\u8f38\u5165\u9577\u5ea6\u5fc5\u9808\u662f3~10\nrange: [3, 10] \/\/ \u9650\u5236\u8f38\u5165\u6578\u5b57\u5fc5\u9808\u662f3~10\nmax: 3 \/\/ \u9650\u5236\u8f38\u5165\u6578\u5b57\u4e0d\u53ef\u5927\u65bc3\nmin: 10 \/\/ \u9650\u5236\u8f38\u5165\u6578\u5b57\u4e0d\u53ef\u5c0f\u65bc10<\/pre>\n\n\n\n\u9810\u8a2d\u63d0\u793a<\/h4>\n\n\n\nrequired: This field is required.\nremote: Please fix this field.\nemail: Please enter a valid email address.\nurl: Please enter a valid URL.\ndate: Please enter a valid date.\ndateISO: Please enter a valid date (ISO).\ndateDE: Bitte geben Sie ein gltiges Datum ein.\nnumber: Please enter a valid number.\nnumberDE: Bitte geben Sie eine Nummer ein.\ndigits: Please enter only digits\ncreditcard: Please enter a valid credit card number.\nequalTo: Please enter the same value again.\naccept: Please enter a value with a valid extension.\nmaxlength: Please enter no more than {0} characters.\nminlength: Please enter at least {0} characters.\nrangelength: Please enter a value between {0} and {1} characters long.\nrange: Please enter a value between {0} and {1}.\nmax: Please enter a value less than or equal to {0}.\nmin: Please enter a value greater than or equal to {0}.<\/pre>\n<\/div>\n<\/div>\n\n\n\n\n\n\u261e \u7bc4\u4f8b<\/h3>\n\n\n\n
\u7c21\u6613\u8868\u55ae\u7bc4\u4f8b<\/h4>\n\n\n\n \/\/Javascript   \n(function() {\n      validate.extend(validate.validators.datetime, {\n        parse: function(value, options) {\n          return +moment.utc(value);\n        },\n        format: function(value, options) {\n          var format = options.dateOnly ? \"YYYY-MM-DD\" : \"YYYY-MM-DD hh:mm:ss\";\n          return moment.utc(value).format(format);\n        }\n      });\n      var constraints = {\n        \"email\": {  \n          presence:  {\n            message: \"\u662f\u5fc5\u586b\u7684\u6b04\u4f4d\"\n          }, \/\/ Email \u662f\u5fc5\u586b\u6b04\u4f4d\n          email: true \/\/ \u9700\u8981\u7b26\u5408 email \u683c\u5f0f\n        },\n        \"\u5bc6\u78bc\": {\n          presence: {\n            message: \"\u662f\u5fc5\u586b\u7684\u6b04\u4f4d\"\n          }, \/\/ \u5bc6\u78bc\u662f\u5fc5\u586b\u6b04\u4f4d\n          length: {\n            minimum: 5, \/\/ \u9577\u5ea6\u5927\u65bc \uff15\n            maximum: 12, \/\/ \u9577\u5ea6\u5c0f\u65bc 12\n            message: \"^\u5bc6\u78bc\u9577\u5ea6\u9700\u5927\u65bc 5 \u5c0f\u65bc 12\"\n          },\n        },\n        \"\u78ba\u8a8d\u5bc6\u78bc\": {  \n          presence: {\n            message: \"\u662f\u5fc5\u586b\u7684\u6b04\u4f4d\"\n          },\/\/ \u78ba\u8a8d\u5bc6\u78bc\u662f\u5fc5\u586b\u6b04\u4f4d\n          equality: {\n            attribute: \"password\",\/\/ \u6b64\u6b04\u4f4d\u8981\u548c\u5bc6\u78bc\u6b04\u4f4d\u4e00\u6a23\n            message: \"^\u5bc6\u78bc\u4e0d\u76f8\u540c\"\n          }\n        },\n        \"\u4f7f\u7528\u8005\u540d\u7a31\": {\n          presence: {\n            message: \"\u662f\u5fc5\u586b\u7684\u6b04\u4f4d\"\n          }, \/\/ \u5fc5\u586b\u4f7f\u7528\u8005\u540d\u7a31\n          length: {\n            minimum: 3, \/\/ \u540d\u7a31\u9577\u5ea6\u8981\u8d85\u904e 3 \n          },\n          format: {\n            pattern: \"[a-z0-9]+\", \/\/ \u53ea\u80fd\u586b\u5165\u82f1\u6587\u6216\u6578\u5b57\n            flags: \"i\",\/\/ \u5927\u5c0f\u5beb\u4e0d\u62d8\n            message: \"\u53ea\u80fd\u5305\u542b a-z \u548c 0-9\"\n          }\n        },\n        '\u751f\u65e5': {\n           presence: {\n            message: \"\u662f\u5fc5\u586b\u7684\u6b04\u4f4d\"\n          }, \/\/ \u751f\u65e5\u6b04\u4f4d\u662f\u5fc5\u586b\n           date: {\n            latest: moment().subtract(18, \"years\"), \/\/ \u5e74\u9f61\u6eff 18\n            message: \"^\u8d85\u904e 18 \u6b72\u624d\u53ef\u4ee5\u4f7f\u7528\u9019\u500b\u670d\u52d9\u54e6\uff5e\"\n          }\n        },\n        \"\u6240\u5728\u5730\": {\n          presence: {\n            message: \"\u662f\u5fc5\u586b\u7684\u6b04\u4f4d\"\n          }, \/\/ \u6240\u5728\u5730\u70ba\u5fc5\u586b\n          inclusion: {\n            within: [\"KS\"],  \/\/ \u53ea\u6709\u5728 within \u7684\u624d\u9a57\u8b49\u901a\u904e\n            message: \"^Sorry, \u9019\u500b\u670d\u52d9\u53ea\u63d0\u4f9b\u7d66\u9ad8\u96c4\"\n          }\n        },\n        \"\u96fb\u8a71\": {\n          presence:{\n            message: \"\u662f\u5fc5\u586b\u7684\u6b04\u4f4d\"\n          },\n        },\n      };\n\n      \/\/ Hook up the form so we can prevent it from being posted\n      var form = document.querySelector(\"form#main\");\n      form.addEventListener(\"submit\", function(ev) {\n        ev.preventDefault();\n        handleFormSubmit(form);\n      });\n      \n      \/\/ \u76e3\u807d input \u503c\u6539\u8b8a\u7684\u72c0\u6cc1\n      var inputs = document.querySelectorAll(\"input, textarea, select\")\n      for (var i = 0; i < inputs.length; ++i) {\n        inputs.item(i).addEventListener(\"change\", function(ev) {\n          var errors = validate(form, constraints) || {};\n          showErrorsForInput(this, errors[this.name])\n        });\n      }\n\n      \/\/ \u6c92\u6709\u932f\u8aa4\u5c31\u986f\u793a\u6210\u529f\u50b3\u9001\n      function handleFormSubmit(form, input) {\n        var errors = validate(form, constraints);\/\/ validate the form aainst the constraints\n        showErrors(form, errors || {}); \/\/ then we update the form to reflect the results\n        if (!errors) {\n          showSuccess();\n        }\n      }\n\n      \/\/ Updates the inputs with the validation errors\n      function showErrors(form, errors) {\n        \/\/ We loop through all the inputs and show the errors for that input\n        _.each(form.querySelectorAll(\"input[name], select[name]\"), function(input) {\n          \/\/ Since the errors can be null if no errors were found we need to handle\n          \/\/ that\n          showErrorsForInput(input, errors && errors[input.name]);\n        });\n      }\n\n      \/\/ Shows the errors for a specific input\n      function showErrorsForInput(input, errors) {\n        \/\/ This is the root of the input\n        var formGroup = closestParent(input.parentNode, \"form-group\")\n          \/\/ Find where the error messages will be insert into\n          , messages = formGroup.querySelector(\".messages\");\n        \/\/ First we remove any old messages and resets the classes\n        resetFormGroup(formGroup);\n        \/\/ If we have errors\n        if (errors) {\n          \/\/ we first mark the group has having errors\n          formGroup.classList.add(\"has-error\");\n          \/\/ then we append all the errors\n          _.each(errors, function(error) {\n            addError(messages, error);\n          });\n        } else {\n          \/\/ otherwise we simply mark it as success\n          formGroup.classList.add(\"has-success\");\n        }\n      }\n\n      \/\/ Recusively finds the closest parent that has the specified class\n      function closestParent(child, className) {\n        if (!child || child == document) {\n          return null;\n        }\n        if (child.classList.contains(className)) {\n          return child;\n        } else {\n          return closestParent(child.parentNode, className);\n        }\n      }\n\n      function resetFormGroup(formGroup) {\n        \/\/ Remove the success and error classes\n        formGroup.classList.remove(\"has-error\");\n        formGroup.classList.remove(\"has-success\");\n        \/\/ and remove any old messages\n        _.each(formGroup.querySelectorAll(\".help-block.error\"), function(el) {\n          el.parentNode.removeChild(el);\n        });\n      }\n\n      \/\/ Adds the specified error with the following markup\n      \/\/ <p class=\"help-block error\">[message]<\/p>\n      function addError(messages, error) {\n        var block = document.createElement(\"p\");\n        block.classList.add(\"help-block\");\n        block.classList.add(\"error\");\n        block.innerText = error;\n        console.log(block);\n        messages.appendChild(block);\n      }\n      function showSuccess() {\n        alert(\"Success!\"); \/\/ We made it \\:D\/\n      }\n    })();<\/pre>\n\n\n\n<!--css-->\n<style>\n.container {\n  width: 900px;\n  margin: 0 auto;\n}\n.container h1 {\n  margin: 20px;\n  text-align: center;\n}\n.container form {\n  padding: 20px;\n  background: #EBF0F4;\n  border-radius: 10px;\n}\n.help-block.error {\n  margin-bottom: 5px;\n}\n.messages{\n  margin: 10px 5px;\n  color: #dc3545\n}\n<\/style>\n\n<!--html-->\n<div class=\"container\">\n  <h1>validate.js \u7bc4\u4f8b<\/h1>\n  <form id=\"main\">\n    <div class=\"form-row\">\n      <div class=\"form-group col-md-6\">\n        <label for=\"email\">Email<\/label>\n        <input id=\"email\" class=\"form-control\" type=\"email\" placeholder=\"Email\" name=\"email\">\n        <div class=\"messages\"><\/div>\n      <\/div>\n      <div class=\"form-group col-md-6\">\n        <label for=\"password\">\u5bc6\u78bc<\/label>\n          <input id=\"password\" class=\"form-control\" type=\"password\" placeholder=\"Password\" name=\"\u5bc6\u78bc\">\n        <div class=\"messages\"><\/div>\n      <\/div>\n    <\/div>\n    <div class=\"form-group\">\n      <label for=\"confirm-password\">\u78ba\u8a8d\u5bc6\u78bc<\/label>\n      <input id=\"confirm-password\" class=\"form-control\" type=\"password\" placeholder=\"Confirm password\" name=\"\u78ba\u8a8d\u5bc6\u78bc\">\n      <div class=\"messages\"><\/div>\n    <\/div>\n    <div class=\"form-row\">\n      <div class=\"form-group col-md-6\">\n        <label for=\"username\">\u4f7f\u7528\u8005\u540d\u7a31<\/label>\n        <input id=\"username\" class=\"form-control\" type=\"text\" placeholder=\"Username\" name=\"\u4f7f\u7528\u8005\u540d\u7a31\">\n        <div class=\"messages\"><\/div>\n      <\/div>\n      <div class=\"form-group col-md-6\">\n        <label for=\"birthdate\">\u751f\u65e5<\/label>\n        <input id=\"birthdate\" class=\"form-control\" type=\"date\" placeholder=\"YYYY-MM-DD\" name=\"\u751f\u65e5\">\n        <div class=\"messages\"><\/div>\n      <\/div>\n    <\/div>\n    <div class=\"form-row\">\n      <div class=\"form-group col-md-6\">\n        <label for=\"country\">\u6240\u5728\u5730<\/label>\n          <select id=\"country\" class=\"form-control\" name=\"\u6240\u5728\u5730\">\n            <option value=\"\"><\/option>\n            <option value=\"KS\">\u9ad8\u96c4<\/option>\n            <option value=\"TC\">\u53f0\u5357<\/option>\n            <option value=\"TP\">\u53f0\u5317<\/option>\n          <\/select>\n        <div class=\"messages\"><\/div>\n      <\/div>\n      <div class=\"form-group col-md-6\">\n        <label for=\"phone\">\u96fb\u8a71<\/label>\n        <input id=\"phone\" class=\"form-control\" type=\"text\" placeholder=\"0912-345-678\" name=\"\u96fb\u8a71\">\n        <div class=\"messages\"><\/div>\n      <\/div>\n    <\/div>\n    <button type=\"submit\" class=\"btn btn-primary\">\u8a3b\u518a<\/button>\n  <\/form>\n<\/div>\n<\/pre>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"\u5b98\u7db2\uff1ahttps:\/\/validatejs.org\/#installing \u261e \u5b89\u88dd \u700f\u89bd\u5668 \/ CDN np...<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[14,12,4],"tags":[],"class_list":["post-1608","post","type-post","status-publish","format-standard","hentry","category-js","category-front-end","category-notes"],"_links":{"self":[{"href":"http:\/\/jilin.hydesign.tw\/index.php\/wp-json\/wp\/v2\/posts\/1608","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/jilin.hydesign.tw\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/jilin.hydesign.tw\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/jilin.hydesign.tw\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/jilin.hydesign.tw\/index.php\/wp-json\/wp\/v2\/comments?post=1608"}],"version-history":[{"count":29,"href":"http:\/\/jilin.hydesign.tw\/index.php\/wp-json\/wp\/v2\/posts\/1608\/revisions"}],"predecessor-version":[{"id":7149,"href":"http:\/\/jilin.hydesign.tw\/index.php\/wp-json\/wp\/v2\/posts\/1608\/revisions\/7149"}],"wp:attachment":[{"href":"http:\/\/jilin.hydesign.tw\/index.php\/wp-json\/wp\/v2\/media?parent=1608"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/jilin.hydesign.tw\/index.php\/wp-json\/wp\/v2\/categories?post=1608"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/jilin.hydesign.tw\/index.php\/wp-json\/wp\/v2\/tags?post=1608"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}