webpackJsonp([47],{BdDp:function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[a("h2",{attrs:{id:"Validator"}},[a("a",{staticClass:"anchor",attrs:{href:"#cube-Validator-anchor","aria-hidden":"true"}},[a("svg",{attrs:{"aria-hidden":"true",height:"16",version:"1.1",viewBox:"0 0 16 16",width:"16"}},[a("path",{attrs:{"fill-rule":"evenodd",d:"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"}})])]),s._v(" Validator")]),s._v(" "),s._m(0),s._v(" "),a("p",[s._v("Validator is used to validate form data and corresponding warning message.")]),s._v(" "),a("h3",{attrs:{id:"Example"}},[a("a",{staticClass:"anchor",attrs:{href:"#cube-Example-anchor","aria-hidden":"true"}},[a("svg",{attrs:{"aria-hidden":"true",height:"16",version:"1.1",viewBox:"0 0 16 16",width:"16"}},[a("path",{attrs:{"fill-rule":"evenodd",d:"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"}})])]),s._v(" Example")]),s._v(" "),s._m(1),s._v(" "),a("h3",{attrs:{id:"Props"}},[a("a",{staticClass:"anchor",attrs:{href:"#cube-Props-anchor","aria-hidden":"true"}},[a("svg",{attrs:{"aria-hidden":"true",height:"16",version:"1.1",viewBox:"0 0 16 16",width:"16"}},[a("path",{attrs:{"fill-rule":"evenodd",d:"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"}})])]),s._v(" Props")]),s._v(" "),s._m(2),s._v(" "),a("h3",{attrs:{id:"Slot"}},[a("a",{staticClass:"anchor",attrs:{href:"#cube-Slot-anchor","aria-hidden":"true"}},[a("svg",{attrs:{"aria-hidden":"true",height:"16",version:"1.1",viewBox:"0 0 16 16",width:"16"}},[a("path",{attrs:{"fill-rule":"evenodd",d:"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"}})])]),s._v(" Slot")]),s._v(" "),s._m(3),s._v(" "),a("h3",{attrs:{id:"Events"}},[a("a",{staticClass:"anchor",attrs:{href:"#cube-Events-anchor","aria-hidden":"true"}},[a("svg",{attrs:{"aria-hidden":"true",height:"16",version:"1.1",viewBox:"0 0 16 16",width:"16"}},[a("path",{attrs:{"fill-rule":"evenodd",d:"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"}})])]),s._v(" Events")]),s._v(" "),s._m(4),s._v(" "),a("h3",{attrs:{id:"Instancemethods"}},[a("a",{staticClass:"anchor",attrs:{href:"#cube-Instancemethods-anchor","aria-hidden":"true"}},[a("svg",{attrs:{"aria-hidden":"true",height:"16",version:"1.1",viewBox:"0 0 16 16",width:"16"}},[a("path",{attrs:{"fill-rule":"evenodd",d:"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"}})])]),s._v(" Instance methods")]),s._v(" "),s._m(5),s._v(" "),a("h3",{attrs:{id:"Rule"}},[a("a",{staticClass:"anchor",attrs:{href:"#cube-Rule-anchor","aria-hidden":"true"}},[a("svg",{attrs:{"aria-hidden":"true",height:"16",version:"1.1",viewBox:"0 0 16 16",width:"16"}},[a("path",{attrs:{"fill-rule":"evenodd",d:"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"}})])]),s._v(" Rule")]),s._v(" "),s._m(6),s._v(" "),a("h3",{attrs:{id:"Adddefaultmessage"}},[a("a",{staticClass:"anchor",attrs:{href:"#cube-Adddefaultmessage-anchor","aria-hidden":"true"}},[a("svg",{attrs:{"aria-hidden":"true",height:"16",version:"1.1",viewBox:"0 0 16 16",width:"16"}},[a("path",{attrs:{"fill-rule":"evenodd",d:"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"}})])]),s._v(" Add default message")]),s._v(" "),s._m(7),s._v(" "),s._m(8),s._v(" "),s._m(9),s._v(" "),s._m(10),s._v(" "),s._m(11),s._v(" "),a("p",[s._v("As above, the default message parsed inside the component is similar to the Vue filter mechanism.")]),s._v(" "),s._m(12),s._v(" "),s._m(13),s._v(" "),s._m(14),s._v(" "),s._m(15),s._v(" "),s._m(16),s._v(" "),s._m(17),s._v(" "),a("h3",{attrs:{id:"addType"}},[a("a",{staticClass:"anchor",attrs:{href:"#cube-addType-anchor","aria-hidden":"true"}},[a("svg",{attrs:{"aria-hidden":"true",height:"16",version:"1.1",viewBox:"0 0 16 16",width:"16"}},[a("path",{attrs:{"fill-rule":"evenodd",d:"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"}})])]),s._v(" addType")]),s._v(" "),s._m(18),s._v(" "),s._m(19),s._v(" "),s._m(20),s._v(" "),s._m(21)])},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("blockquote",[a("p",[s._v("New in 1.5.0+")])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("ul",[a("li",[a("p",[s._v("Basic usage")]),s._v(" "),a("p",[s._v("Validator is called as a independent component, which means it has to bind with the form data need validate through the property "),a("code",{pre:!0},[s._v("model")]),s._v(". Then use the property "),a("code",{pre:!0},[s._v("rules")]),s._v(" to define the validating rule, such as type, required, pattern(used to define a validating RegExp), custom(used to define a validating function), you can find the details of rules below. And although we have default message (include English and Chinese) for each build-in rule, you could customize messages by the property "),a("code",{pre:!0},[s._v("messages")]),s._v(".")]),s._v(" "),a("pre",{pre:!0},[a("code",{attrs:{"v-pre":"",class:"language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("cube-input")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"text1"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("placeholder")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"E-mail"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("cube-input")]),s._v(">")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("cube-validator")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"valid"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":model")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"text"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":rules")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"rules"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":messages")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"messages"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("cube-validator")]),s._v(">")]),s._v("\n")])]),s._v(" "),a("pre",{pre:!0},[a("code",{attrs:{"v-pre":"",class:"language-js"}},[a("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n  data() {\n    "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n      "),a("span",{attrs:{class:"hljs-attr"}},[s._v("text")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("''")]),s._v(",\n      "),a("span",{attrs:{class:"hljs-attr"}},[s._v("valid")]),s._v(": "),a("span",{attrs:{class:"hljs-literal"}},[s._v("undefined")]),s._v(",\n      "),a("span",{attrs:{class:"hljs-attr"}},[s._v("rules")]),s._v(": {\n        "),a("span",{attrs:{class:"hljs-attr"}},[s._v("required")]),s._v(": "),a("span",{attrs:{class:"hljs-literal"}},[s._v("true")]),s._v(",\n        "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'email'")]),s._v(",\n        "),a("span",{attrs:{class:"hljs-attr"}},[s._v("pattern")]),s._v(": "),a("span",{attrs:{class:"hljs-regexp"}},[s._v("/didi.com$/")]),s._v(",\n        "),a("span",{attrs:{class:"hljs-attr"}},[s._v("custom")]),s._v(": "),a("span",{attrs:{class:"hljs-function"}},[s._v("("),a("span",{attrs:{class:"hljs-params"}},[s._v("val")]),s._v(") =>")]),s._v(" {\n          "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" val.length >= "),a("span",{attrs:{class:"hljs-number"}},[s._v("12")]),s._v("\n        }\n      },\n      "),a("span",{attrs:{class:"hljs-attr"}},[s._v("messages")]),s._v(": {\n        "),a("span",{attrs:{class:"hljs-attr"}},[s._v("pattern")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'The E-mail suffix need to be didi.com.'")]),s._v(",\n        "),a("span",{attrs:{class:"hljs-attr"}},[s._v("custom")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'The E-mail need contain at least 12 characters.'")]),s._v("\n      },\n    }\n  }\n}\n")])])]),s._v(" "),a("li",[a("p",[s._v("Add warning style to form component")]),s._v(" "),a("p",[s._v("If you want to add warning style to form component, you could put the form component into the Validator component. Because when the validation failed, the Validator component will get a CSS class "),a("code",{pre:!0},[s._v("cube-validator_warn")]),s._v(" so that you could select the descendant form element of class "),a("code",{pre:!0},[s._v("cube-validator_warn")]),s._v(" ro add warning style.")]),s._v(" "),a("pre",{pre:!0},[a("code",{attrs:{"v-pre":"",class:"language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("cube-validator")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":model")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"text"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":rules")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"rules"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"valid"')]),s._v(">")]),s._v("\n  "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("cube-input")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"text"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("cube-input")]),s._v(">")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("cube-validator")]),s._v(">")]),s._v("\n")])]),s._v(" "),a("pre",{pre:!0},[a("code",{attrs:{"v-pre":"",class:"language-js"}},[a("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n  data() {\n    "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n      "),a("span",{attrs:{class:"hljs-attr"}},[s._v("text")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("''")]),s._v(",\n      "),a("span",{attrs:{class:"hljs-attr"}},[s._v("valid")]),s._v(": "),a("span",{attrs:{class:"hljs-literal"}},[s._v("undefined")]),s._v(",\n      "),a("span",{attrs:{class:"hljs-attr"}},[s._v("rules")]),s._v(": {\n        "),a("span",{attrs:{class:"hljs-attr"}},[s._v("required")]),s._v(": "),a("span",{attrs:{class:"hljs-literal"}},[s._v("true")]),s._v(",\n        "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'email'")]),s._v(",\n        "),a("span",{attrs:{class:"hljs-attr"}},[s._v("min")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("6")]),s._v("\n      }\n    }\n  }\n}\n")])]),s._v(" "),a("pre",{pre:!0},[a("code",{attrs:{"v-pre":"",class:"language-css"}},[s._v("// "),a("span",{attrs:{class:"hljs-selector-tag"}},[s._v("add")]),s._v(" "),a("span",{attrs:{class:"hljs-selector-tag"}},[s._v("warning")]),s._v(" "),a("span",{attrs:{class:"hljs-selector-tag"}},[s._v("style")]),s._v(" "),a("span",{attrs:{class:"hljs-selector-tag"}},[s._v("to")]),s._v(" "),a("span",{attrs:{class:"hljs-selector-tag"}},[s._v("input")]),s._v("\n"),a("span",{attrs:{class:"hljs-selector-class"}},[s._v(".cube-validator_warn")]),s._v("\n  "),a("span",{attrs:{class:"hljs-selector-tag"}},[s._v("input")]),s._v("\n    "),a("span",{attrs:{class:"hljs-selector-tag"}},[s._v("border")]),s._v(": "),a("span",{attrs:{class:"hljs-selector-tag"}},[s._v("solid")]),s._v(" 1"),a("span",{attrs:{class:"hljs-selector-tag"}},[s._v("px")]),s._v(" "),a("span",{attrs:{class:"hljs-selector-tag"}},[s._v("yellow")]),s._v("\n")])])]),s._v(" "),a("li",[a("p",[s._v("Customize message slot")]),s._v(" "),a("p",[s._v("Beside default message, you could customize the warning template to contain icons and images by "),a("code",{pre:!0},[s._v("message")]),s._v(" slot. This is a sloped slot which could meet almost all the demands. It contains "),a("code",{pre:!0},[s._v("dirty")]),s._v(" (whether the form data has ever changed), "),a("code",{pre:!0},[s._v("validated")]),s._v(" (whether the validator has ever validated), "),a("code",{pre:!0},[s._v("message")]),s._v(" (message of first failed rule), "),a("code",{pre:!0},[s._v("result")]),s._v(" ( an Object, which contains validating result and message of each rule, such as "),a("code",{pre:!0},[s._v("{ required: { valid: false, invalid: true, message: 'required' } }")]),s._v(").")]),s._v(" "),a("pre",{pre:!0},[a("code",{attrs:{"v-pre":"",class:"language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("cube-validator")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"valid"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":model")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"text"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":rules")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"rules"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":messages")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"messages"')]),s._v(">")]),s._v("\n  "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("cube-input")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"text"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("placeholder")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"component name"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("cube-input")]),s._v(">")]),s._v("\n  "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("slot")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"message"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"custom-msg"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("slot-scope")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"props"')]),s._v(">")]),s._v("\n    "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-if")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"(props.dirty || props.validated) && !valid"')]),s._v(">")]),s._v("\n      "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("i")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"dd-cubeic-important"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("i")]),s._v(">")]),s._v(" {{ props.message }}\n      "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),s._v("\n        "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("span")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-for")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"(item, index) in Object.values(props.result)"')]),s._v("\n          "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":key")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"index"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-if")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"item.inValid"')]),s._v(">")]),s._v("\n          {{ item.message + ' ' }}\n        "),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("span")]),s._v(">")]),s._v("\n      "),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),s._v("\n    "),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),s._v("\n  "),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("cube-validator")]),s._v(">")]),s._v("\n")])]),s._v(" "),a("pre",{pre:!0},[a("code",{attrs:{"v-pre":"",class:"language-js"}},[a("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n  data() {\n    "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n      "),a("span",{attrs:{class:"hljs-attr"}},[s._v("valid")]),s._v(": "),a("span",{attrs:{class:"hljs-literal"}},[s._v("undefined")]),s._v(",\n      "),a("span",{attrs:{class:"hljs-attr"}},[s._v("text")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("''")]),s._v(",\n      "),a("span",{attrs:{class:"hljs-attr"}},[s._v("rules")]),s._v(": {\n        "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'string'")]),s._v(",\n        "),a("span",{attrs:{class:"hljs-attr"}},[s._v("pattern")]),s._v(": "),a("span",{attrs:{class:"hljs-regexp"}},[s._v("/^cube-/")]),s._v(",\n        "),a("span",{attrs:{class:"hljs-attr"}},[s._v("min")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("8")]),s._v(",\n        "),a("span",{attrs:{class:"hljs-attr"}},[s._v("max")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("10")]),s._v("\n      },\n      "),a("span",{attrs:{class:"hljs-attr"}},[s._v("messages")]),s._v(": {\n        "),a("span",{attrs:{class:"hljs-attr"}},[s._v("pattern")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'The component name need start with \"cube-\"'")]),s._v("\n      },\n    }\n  }\n}\n")])]),s._v(" "),a("pre",{pre:!0},[a("code",{attrs:{"v-pre":"",class:"language-css"}},[a("span",{attrs:{class:"hljs-selector-class"}},[s._v(".custom-msg")]),s._v("\n  "),a("span",{attrs:{class:"hljs-selector-tag"}},[s._v("color")]),s._v(": "),a("span",{attrs:{class:"hljs-selector-tag"}},[s._v("orange")]),s._v("\n")])])]),s._v(" "),a("li",[a("p",[s._v("Async validate "),a("sup",[s._v("1.8.0+")])]),s._v(" "),a("p",[s._v("If the rule function returned a function("),a("strong",[s._v("this function receives a "),a("code",{pre:!0},[s._v("resolve")]),s._v(" callback, if this function called with "),a("code",{pre:!0},[s._v("true")]),s._v(" then it will be treated as success, otherwise it will be treated as failure")]),s._v(") or a "),a("code",{pre:!0},[s._v("Promise")]),s._v(" object("),a("strong",[s._v("if "),a("code",{pre:!0},[s._v("resolve")]),s._v(" value is "),a("code",{pre:!0},[s._v("true")]),s._v(" then it will be treated as success, otherwise it will be treated as failure")]),s._v("), then it will be validate asynchronously. And when validating the "),a("code",{pre:!0},[s._v("validating")]),s._v(" event will be emited.")]),s._v(" "),a("pre",{pre:!0},[a("code",{attrs:{"v-pre":"",class:"language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"validator-item"')]),s._v(">")]),s._v("\n  "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("p")]),s._v(">")]),s._v("Async validate: "),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("p")]),s._v(">")]),s._v("\n  "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("cube-validator")]),s._v("\n    "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"valid"')]),s._v("\n    "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":model")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"captcha"')]),s._v("\n    "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":rules")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"rules"')]),s._v("\n    "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":messages")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"messages"')]),s._v("\n    "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":immediate")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"immediate"')]),s._v("\n    "),a("span",{attrs:{class:"hljs-attr"}},[s._v("@validating")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"validatingHandler"')]),s._v("\n    "),a("span",{attrs:{class:"hljs-attr"}},[s._v("@validated")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"validatedHandler"')]),s._v(">")]),s._v("\n    "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("cube-input")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"captcha"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("placeholder")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Please input captcha"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("cube-input")]),s._v(">")]),s._v("\n  "),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("cube-validator")]),s._v(">")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),s._v("\n")])]),s._v(" "),a("pre",{pre:!0},[a("code",{attrs:{"v-pre":"",class:"language-js"}},[a("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n  data() {\n    "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n      "),a("span",{attrs:{class:"hljs-attr"}},[s._v("valid")]),s._v(": "),a("span",{attrs:{class:"hljs-literal"}},[s._v("undefined")]),s._v(",\n      "),a("span",{attrs:{class:"hljs-attr"}},[s._v("captcha")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("''")]),s._v(",\n      "),a("span",{attrs:{class:"hljs-attr"}},[s._v("rules")]),s._v(": {\n        "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'number'")]),s._v(",\n        "),a("span",{attrs:{class:"hljs-attr"}},[s._v("required")]),s._v(": "),a("span",{attrs:{class:"hljs-literal"}},[s._v("true")]),s._v(",\n        "),a("span",{attrs:{class:"hljs-attr"}},[s._v("len")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("6")]),s._v(",\n        "),a("span",{attrs:{class:"hljs-attr"}},[s._v("captchaCheck")]),s._v(": "),a("span",{attrs:{class:"hljs-function"}},[s._v("("),a("span",{attrs:{class:"hljs-params"}},[s._v("val")]),s._v(") =>")]),s._v(" {\n          "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" "),a("span",{attrs:{class:"hljs-function"}},[s._v("("),a("span",{attrs:{class:"hljs-params"}},[s._v("resolve")]),s._v(") =>")]),s._v(" {\n            setTimeout("),a("span",{attrs:{class:"hljs-function"}},[a("span",{attrs:{class:"hljs-params"}},[s._v("()")]),s._v(" =>")]),s._v(" {\n              resolve(val === "),a("span",{attrs:{class:"hljs-string"}},[s._v("'123456'")]),s._v(")\n            }, "),a("span",{attrs:{class:"hljs-number"}},[s._v("1000")]),s._v(")\n          }\n          "),a("span",{attrs:{class:"hljs-comment"}},[s._v("/** or return promise:\n          return new Promise((resolve) => {\n            setTimeout(() => {\n              resolve(val === '123456')\n            }, 1000)\n          })\n          **/")]),s._v("\n        }\n      },\n      "),a("span",{attrs:{class:"hljs-attr"}},[s._v("messages")]),s._v(": {\n        "),a("span",{attrs:{class:"hljs-attr"}},[s._v("captchaCheck")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Please input \"123456\"'")]),s._v("\n      }\n    }\n  },\n  "),a("span",{attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n    validatingHandler() {\n      "),a("span",{attrs:{class:"hljs-built_in"}},[s._v("console")]),s._v(".log("),a("span",{attrs:{class:"hljs-string"}},[s._v("'validating'")]),s._v(")\n    },\n    validatedHandler() {\n      "),a("span",{attrs:{class:"hljs-built_in"}},[s._v("console")]),s._v(".log("),a("span",{attrs:{class:"hljs-string"}},[s._v("'validated'")]),s._v(")\n    }\n  }\n}\n")])]),s._v(" "),a("p",[s._v("The "),a("code",{pre:!0},[s._v("captchaCheck")]),s._v(" is an async rule.")])]),s._v(" "),a("li",[a("p",[s._v("Submit")]),s._v(" "),a("p",[s._v("Although submit is not inside of Validator, it usually be relative with Validator. Therefore, we want to introduce our best practice about submit here. It focus on the handles of multi-validator and warn message no matter whether the form data has ever changed.")]),s._v(" "),a("pre",{pre:!0},[a("code",{attrs:{"v-pre":"",class:"language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("cube-input")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"text0"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("placeholder")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Required"')]),s._v("/>")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("cube-validator")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("ref")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"validator0"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"result[0]"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":model")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"text0"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":rules")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"rules0"')]),s._v("/>")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("cube-input")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"text1"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("placeholder")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"E-mail"')]),s._v("/>")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("cube-validator")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("ref")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"validator1"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"result[1]"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":model")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"text1"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":rules")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"rules1"')]),s._v("/>")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("cube-input")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"text2"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("placeholder")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"TEL"')]),s._v("/>")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("cube-validator")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("ref")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"validator2"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"result[2]"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":model")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"text2"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":rules")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"rules2"')]),s._v("/>")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("cube-button")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"submit"')]),s._v(">")]),s._v("Submit"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("cube-button")]),s._v(">")]),s._v("\n")])]),s._v(" "),a("pre",{pre:!0},[a("code",{attrs:{"v-pre":"",class:"language-js"}},[a("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n  data() {\n    "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n      "),a("span",{attrs:{class:"hljs-attr"}},[s._v("result")]),s._v(": ["),a("span",{attrs:{class:"hljs-literal"}},[s._v("true")]),s._v(", "),a("span",{attrs:{class:"hljs-literal"}},[s._v("true")]),s._v(", "),a("span",{attrs:{class:"hljs-literal"}},[s._v("true")]),s._v("],\n      "),a("span",{attrs:{class:"hljs-attr"}},[s._v("text0")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("''")]),s._v(",\n      "),a("span",{attrs:{class:"hljs-attr"}},[s._v("rules0")]),s._v(": {\n        "),a("span",{attrs:{class:"hljs-attr"}},[s._v("required")]),s._v(": "),a("span",{attrs:{class:"hljs-literal"}},[s._v("true")]),s._v(",\n      },\n      "),a("span",{attrs:{class:"hljs-attr"}},[s._v("text1")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("''")]),s._v(",\n      "),a("span",{attrs:{class:"hljs-attr"}},[s._v("rules1")]),s._v(": {\n        "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'email'")]),s._v(",\n      },\n      "),a("span",{attrs:{class:"hljs-attr"}},[s._v("text2")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("''")]),s._v(",\n      "),a("span",{attrs:{class:"hljs-attr"}},[s._v("rules2")]),s._v(": {\n        "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'tel'")]),s._v(",\n      },\n      "),a("span",{attrs:{class:"hljs-attr"}},[s._v("trigger")]),s._v(": "),a("span",{attrs:{class:"hljs-literal"}},[s._v("false")]),s._v("\n    }\n  },\n  "),a("span",{attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n    submit() {\n      "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$refs.validator0.validate()\n      "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$refs.validator1.validate()\n      "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$refs.validator2.validate()\n      "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("if")]),s._v(" ("),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".result.every("),a("span",{attrs:{class:"hljs-function"}},[a("span",{attrs:{class:"hljs-params"}},[s._v("item")]),s._v(" =>")]),s._v(" item)) {\n        "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$createToast({\n          "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'correct'")]),s._v(",\n          "),a("span",{attrs:{class:"hljs-attr"}},[s._v("txt")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Submited'")]),s._v(",\n          "),a("span",{attrs:{class:"hljs-attr"}},[s._v("time")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("1000")]),s._v("\n        }).show()\n      }\n    }\n  }\n}\n")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[s._v("Attribute")]),s._v(" "),a("th",[s._v("Description")]),s._v(" "),a("th",[s._v("Type")]),s._v(" "),a("th",[s._v("Accepted Values")]),s._v(" "),a("th",[s._v("Default")])])]),s._v(" "),a("tbody",[a("tr",[a("td",[s._v("model")]),s._v(" "),a("td",[s._v("Required, figure the data need to validate")]),s._v(" "),a("td",[s._v("Any")]),s._v(" "),a("td",[s._v("-")]),s._v(" "),a("td",[s._v("-")])]),s._v(" "),a("tr",[a("td",[s._v("v-model")]),s._v(" "),a("td",[s._v("the validation result，whether the data is valid")]),s._v(" "),a("td",[s._v("Boolean")]),s._v(" "),a("td",[s._v("true/false")]),s._v(" "),a("td",[s._v("true")])]),s._v(" "),a("tr",[a("td",[s._v("rules")]),s._v(" "),a("td",[s._v("the rules for validation, you can find the details of rules below")]),s._v(" "),a("td",[s._v("Object")]),s._v(" "),a("td",[s._v("-")]),s._v(" "),a("td",[s._v("{}")])]),s._v(" "),a("tr",[a("td",[s._v("messages")]),s._v(" "),a("td",[s._v("custom messages for the corresponding rule")]),s._v(" "),a("td",[s._v("Object")]),s._v(" "),a("td",[s._v("-")]),s._v(" "),a("td",[s._v("{}")])]),s._v(" "),a("tr",[a("td",[s._v("immediate")]),s._v(" "),a("td",[s._v("Immediate validate after loaded")]),s._v(" "),a("td",[s._v("Boolean")]),s._v(" "),a("td",[s._v("true/false")]),s._v(" "),a("td",[s._v("false")])]),s._v(" "),a("tr",[a("td",[s._v("disabled"),a("sup",[s._v("1.7.0+")])]),s._v(" "),a("td",[s._v("disabled validate or not")]),s._v(" "),a("td",[s._v("Boolean")]),s._v(" "),a("td",[s._v("true/false")]),s._v(" "),a("td",[s._v("false")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[s._v("Name")]),s._v(" "),a("th",[s._v("Description")]),s._v(" "),a("th",[s._v("Scope Parameters")])])]),s._v(" "),a("tbody",[a("tr",[a("td",[s._v("default")]),s._v(" "),a("td",[s._v("the relative form component or element")]),s._v(" "),a("td",[s._v("-")])]),s._v(" "),a("tr",[a("td",[s._v("message")]),s._v(" "),a("td",[s._v("warning message")]),s._v(" "),a("td",[s._v("dirty: if the data have ever changed "),a("br"),s._v(" validating: whether is validating "),a("br"),s._v(" validated: if the validator have ever validated "),a("br"),s._v(" message: the message of the first failed rule "),a("br"),s._v(" result: an object, which contains the resule and message of each rule, such as, { required: { valid: false, invalid: true, message: '必填' } }")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[s._v("Event Name")]),s._v(" "),a("th",[s._v("Description")]),s._v(" "),a("th",[s._v("Parameters")])])]),s._v(" "),a("tbody",[a("tr",[a("td",[s._v("validating")]),s._v(" "),a("td",[s._v("validating (only triggered when async validateing)")]),s._v(" "),a("td",[s._v("-")])]),s._v(" "),a("tr",[a("td",[s._v("validated")]),s._v(" "),a("td",[s._v("validated (only triggered when async validateing)")]),s._v(" "),a("td",[s._v("valid: 校验是否成功")])]),s._v(" "),a("tr",[a("td",[s._v("msg-click")]),s._v(" "),a("td",[s._v("click error message ele")]),s._v(" "),a("td",[s._v("-")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[s._v("Method name")]),s._v(" "),a("th",[s._v("Description")]),s._v(" "),a("th",[s._v("Parameters")]),s._v(" "),a("th",[s._v("Returned value")])])]),s._v(" "),a("tbody",[a("tr",[a("td",[s._v("validate(cb)")]),s._v(" "),a("td",[s._v("Validate")]),s._v(" "),a("td",[s._v("cb: validated callback function, used to async validating cases normally. The arguments is the "),a("code",{pre:!0},[s._v("valid")]),s._v(" value")]),s._v(" "),a("td",[s._v("If supported Promise then the returned value will be Promise instance(Only have resolved state, the resolved value is "),a("code",{pre:!0},[s._v("valid")]),s._v("), otherwise the returned value is "),a("code",{pre:!0},[s._v("undefined")])])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("ul",[a("li",[a("p",[s._v("Build-in rules")]),s._v(" "),a("p",[s._v("There are some build-in rules here, include required、type、min、max、len、notWhitespace、pattern、custom.")]),s._v(" "),a("table",[a("thead",[a("tr",[a("th",[s._v("Attribute")]),s._v(" "),a("th",[s._v("Description")]),s._v(" "),a("th",[s._v("Type")]),s._v(" "),a("th",[s._v("Accepted Values")]),s._v(" "),a("th",[s._v("Demo")])])]),s._v(" "),a("tbody",[a("tr",[a("td",[s._v("required")]),s._v(" "),a("td",[s._v("required")]),s._v(" "),a("td",[s._v("Boolean")]),s._v(" "),a("td",[s._v("true/false")]),s._v(" "),a("td",[s._v("true")])]),s._v(" "),a("tr",[a("td",[s._v("type")]),s._v(" "),a("td",[s._v("type")]),s._v(" "),a("td",[s._v("String")]),s._v(" "),a("td",[s._v("'string', 'number', 'array', 'date', 'email', 'tel', 'url'")]),s._v(" "),a("td",[s._v("'tel'")])]),s._v(" "),a("tr",[a("td",[s._v("min")]),s._v(" "),a("td",[s._v("when the type is number or date, it means the data need not smaller than min. Otherwise, it means the length of the data need not smaller than min")]),s._v(" "),a("td",[s._v("Number")]),s._v(" "),a("td",[s._v("-")]),s._v(" "),a("td",[s._v("6")])]),s._v(" "),a("tr",[a("td",[s._v("max")]),s._v(" "),a("td",[s._v("when the type is number or date, it means the data need not bigger than max. Otherwise, it means the length of the data need not bigger than max")]),s._v(" "),a("td",[s._v("Number")]),s._v(" "),a("td",[s._v("-")]),s._v(" "),a("td",[s._v("8")])]),s._v(" "),a("tr",[a("td",[s._v("len")]),s._v(" "),a("td",[s._v("when the type is number or date, it means the data need equal to min. Otherwise, it means the length of the data need equal to len")]),s._v(" "),a("td",[s._v("Number")]),s._v(" "),a("td",[s._v("-")]),s._v(" "),a("td",[s._v("7")])]),s._v(" "),a("tr",[a("td",[s._v("notWhitespace")]),s._v(" "),a("td",[s._v("don't allowed to be whitespace")]),s._v(" "),a("td",[s._v("Boolean")]),s._v(" "),a("td",[s._v("true/false")]),s._v(" "),a("td",[s._v("true")])]),s._v(" "),a("tr",[a("td",[s._v("pattern")]),s._v(" "),a("td",[s._v("RegExp match")]),s._v(" "),a("td",[s._v("RegExp")]),s._v(" "),a("td",[s._v("-")]),s._v(" "),a("td",[s._v("/1$/")])]),s._v(" "),a("tr",[a("td",[s._v("custom")]),s._v(" "),a("td",[s._v("Costomized validation function. Only valid when the "),a("code",{pre:!0},[s._v("return")]),s._v(" is strict equaled to "),a("code",{pre:!0},[s._v("true")])]),s._v(" "),a("td",[s._v("Function")]),s._v(" "),a("td",[s._v("-")]),s._v(" "),a("td",[s._v("val => val.length === 7")])])])])]),s._v(" "),a("li",[a("p",[s._v("Add rule")]),s._v(" "),a("p",[s._v("Beside the build-in rules, you could use the method "),a("code",{pre:!0},[s._v("addRule")]),s._v(" of Validator to add customized common rule, and "),a("code",{pre:!0},[s._v("addMessage")]),s._v(" method to add corresponding default warning message.")]),s._v(" "),a("pre",{pre:!0},[a("code",{attrs:{"v-pre":"",class:"language-js"}},[a("span",{attrs:{class:"hljs-keyword"}},[s._v("import")]),s._v(" Vue "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("from")]),s._v(" "),a("span",{attrs:{class:"hljs-string"}},[s._v("'vue'")]),s._v("\n"),a("span",{attrs:{class:"hljs-keyword"}},[s._v("import")]),s._v(" { Validator } "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("from")]),s._v(" "),a("span",{attrs:{class:"hljs-string"}},[s._v("'cube-ui'")]),s._v("\n\n"),a("span",{attrs:{class:"hljs-comment"}},[s._v("// need use Validator")]),s._v("\nVue.use(Validator)\n\nValidator.addRule("),a("span",{attrs:{class:"hljs-string"}},[s._v("'odd'")]),s._v(", (val, config, type) => !config || "),a("span",{attrs:{class:"hljs-built_in"}},[s._v("Number")]),s._v("(val) % "),a("span",{attrs:{class:"hljs-number"}},[s._v("2")]),s._v(" === "),a("span",{attrs:{class:"hljs-number"}},[s._v("1")]),s._v(")\nValidator.addMessage("),a("span",{attrs:{class:"hljs-string"}},[s._v("'odd'")]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Please input odd.'")]),s._v(")\n")])]),s._v(" "),a("pre",{pre:!0},[a("code",{attrs:{"v-pre":"",class:"language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("cube-validator")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"valid"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":model")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"text"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":rules")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"rule"')]),s._v(">")]),s._v("\n  "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("cube-input")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"text3"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("placeholder")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"odd"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("cube-input")]),s._v(">")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("cube-validator")]),s._v(">")]),s._v("\n")])]),s._v(" "),a("pre",{pre:!0},[a("code",{attrs:{"v-pre":"",class:"language-js"}},[a("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n  data() {\n    "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n      "),a("span",{attrs:{class:"hljs-attr"}},[s._v("text")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'100'")]),s._v(",\n      "),a("span",{attrs:{class:"hljs-attr"}},[s._v("valid")]),s._v(": "),a("span",{attrs:{class:"hljs-literal"}},[s._v("undefined")]),s._v(",\n      "),a("span",{attrs:{class:"hljs-attr"}},[s._v("rules")]),s._v(": {\n        "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'number'")]),s._v(",\n        "),a("span",{attrs:{class:"hljs-attr"}},[s._v("odd")]),s._v(": "),a("span",{attrs:{class:"hljs-literal"}},[s._v("true")]),s._v("\n      }\n    }\n  }\n}\n")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("At first, let's see the build-in default messages. You can use "),a("code",{pre:!0},[s._v("addMessage")]),s._v(" to modify the special sub-message.")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("ul",[a("li",[s._v("Build-in default messages")])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("pre",{pre:!0},[a("code",{attrs:{"v-pre":"",class:"language-js"}},[a("span",{attrs:{class:"hljs-keyword"}},[s._v("const")]),s._v(" messages = {\n  "),a("span",{attrs:{class:"hljs-attr"}},[s._v("required")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Required.'")]),s._v(",\n  "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v(": {\n    "),a("span",{attrs:{class:"hljs-attr"}},[s._v("string")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Please input characters.'")]),s._v(",\n    "),a("span",{attrs:{class:"hljs-attr"}},[s._v("number")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Please input numbers.'")]),s._v(",\n    "),a("span",{attrs:{class:"hljs-attr"}},[s._v("array")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'The data type should be array.'")]),s._v(",\n    "),a("span",{attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Please select a valid date.'")]),s._v(",\n    "),a("span",{attrs:{class:"hljs-attr"}},[s._v("email")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Please input a valid E-mail.'")]),s._v(",\n    "),a("span",{attrs:{class:"hljs-attr"}},[s._v("tel")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Please input a valid telphone number.'")]),s._v(",\n    "),a("span",{attrs:{class:"hljs-attr"}},[s._v("url")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Please input a valid web site.'")]),s._v("\n  },\n  "),a("span",{attrs:{class:"hljs-attr"}},[s._v("min")]),s._v(": {\n    "),a("span",{attrs:{class:"hljs-attr"}},[s._v("string")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Please input at least {{config}} characters.'")]),s._v(",\n    "),a("span",{attrs:{class:"hljs-attr"}},[s._v("number")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'The number could not smaller than {{config}}.'")]),s._v(",\n    "),a("span",{attrs:{class:"hljs-attr"}},[s._v("array")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Please select at least {{config}} items.'")]),s._v(",\n    "),a("span",{attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Please select a date after {{config | toLocaleDateString(\"yyyy-MM-dd\")}}.'")]),s._v(",\n    "),a("span",{attrs:{class:"hljs-attr"}},[s._v("email")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Please input at least {{config}} characters.'")]),s._v(",\n    "),a("span",{attrs:{class:"hljs-attr"}},[s._v("tel")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Please input at least {{config}} characters.'")]),s._v(",\n    "),a("span",{attrs:{class:"hljs-attr"}},[s._v("url")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Please input at least {{config}} characters.'")]),s._v("\n  },\n  "),a("span",{attrs:{class:"hljs-attr"}},[s._v("max")]),s._v(": {\n    "),a("span",{attrs:{class:"hljs-attr"}},[s._v("string")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Please input no more than {{config}} characters.'")]),s._v(",\n    "),a("span",{attrs:{class:"hljs-attr"}},[s._v("number")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'The number could not bigger than {{config}}'")]),s._v(",\n    "),a("span",{attrs:{class:"hljs-attr"}},[s._v("array")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Please select no more than  {{config}} items'")]),s._v(",\n    "),a("span",{attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Please select a date before {{config | toLocaleDateString(\"yyyy-MM-dd\")}}.'")]),s._v(",\n    "),a("span",{attrs:{class:"hljs-attr"}},[s._v("email")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Please input no more than {{config}} characters.'")]),s._v(",\n    "),a("span",{attrs:{class:"hljs-attr"}},[s._v("tel")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Please input no more than {{config}} characters.'")]),s._v(",\n    "),a("span",{attrs:{class:"hljs-attr"}},[s._v("url")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Please input no more than {{config}} characters.'")]),s._v("\n  },\n  "),a("span",{attrs:{class:"hljs-attr"}},[s._v("len")]),s._v(": {\n    "),a("span",{attrs:{class:"hljs-attr"}},[s._v("string")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Please input {{config}} characters.'")]),s._v(",\n    "),a("span",{attrs:{class:"hljs-attr"}},[s._v("number")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'The length should equal {{config}}'")]),s._v(",\n    "),a("span",{attrs:{class:"hljs-attr"}},[s._v("array")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Please select {{config}} items'")]),s._v(",\n    "),a("span",{attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Please select {{config | toLocaleDateString(\"yyyy-MM-dd\")}}.'")]),s._v(",\n    "),a("span",{attrs:{class:"hljs-attr"}},[s._v("email")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Please input {{config}} characters.'")]),s._v(",\n    "),a("span",{attrs:{class:"hljs-attr"}},[s._v("tel")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Please input {{config}} characters.'")]),s._v(",\n    "),a("span",{attrs:{class:"hljs-attr"}},[s._v("url")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Please input {{config}} characters.'")]),s._v("\n  },\n  "),a("span",{attrs:{class:"hljs-attr"}},[s._v("pattern")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'The input don\"t match pattern.'")]),s._v(",\n  "),a("span",{attrs:{class:"hljs-attr"}},[s._v("custom")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Invalid.'")]),s._v(",\n  "),a("span",{attrs:{class:"hljs-attr"}},[s._v("notWhitespace")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Whitespace is invalid.'")]),s._v("\n}\n")])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("ul",[a("li",[s._v("Modify the build-in message")])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("pre",{pre:!0},[a("code",{attrs:{"v-pre":"",class:"language-js"}},[a("span",{attrs:{class:"hljs-keyword"}},[s._v("import")]),s._v(" Vue "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("from")]),s._v(" "),a("span",{attrs:{class:"hljs-string"}},[s._v("'vue'")]),s._v("\n"),a("span",{attrs:{class:"hljs-keyword"}},[s._v("import")]),s._v(" { Validator } "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("from")]),s._v(" "),a("span",{attrs:{class:"hljs-string"}},[s._v("'cube-ui'")]),s._v("\n\n"),a("span",{attrs:{class:"hljs-comment"}},[s._v("// need use Validator")]),s._v("\nVue.use(Validator)\n\nValidator.addMessage("),a("span",{attrs:{class:"hljs-string"}},[s._v("'required'")]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Please input this.'")]),s._v(")\n\n"),a("span",{attrs:{class:"hljs-comment"}},[s._v("// Override the message for min.date")]),s._v("\nValidator.addMessage("),a("span",{attrs:{class:"hljs-string"}},[s._v("'min'")]),s._v(", {\n  "),a("span",{attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v('\'Please select a date after {{config | toLocaleDateString("yyyy-MM-dd") | tips("Please re-enter")}}.\'')]),s._v("\n})\n")])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("ul",[a("li",[s._v("config")])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("For example, the rule you configured is: {type: 'date', min: '2018-10-10'}, then the value of the "),a("code",{pre:!0},[s._v("config")]),s._v(" field in above message template is '2018-10-10', because the checksum is a "),a("code",{pre:!0},[s._v("date")]),s._v(" type, the value of "),a("code",{pre:!0},[s._v("min")]),s._v(" can be a "),a("code",{pre:!0},[s._v("timestamp")]),s._v(" or a date-like string "),a("code",{pre:!0},[s._v("yyyy-MM-dd mm:ss")]),s._v(" or "),a("code",{pre:!0},[s._v("yyyy/MM/dd mm:ss")]),s._v(".")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("ul",[a("li",[s._v("toLocaleDateString")])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("The built-in helper function, the first parameter is the config value you configured, the second parameter is the date format you want to initialize, as above is "),a("code",{pre:!0},[s._v("'yyyy year MM month dd day'")]),s._v(", accepting something like "),a("code",{pre:!0},[s._v("yyyy-MM-dd mm:ss")]),s._v(" format, you can also register your own helper function as follows.")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("pre",{pre:!0},[a("code",{attrs:{"v-pre":"",class:"language-js"}},[s._v("Validator.addHelper("),a("span",{attrs:{class:"hljs-string"}},[s._v("'fnName'")]),s._v(", (result, arg1) => {\n  "),a("span",{attrs:{class:"hljs-comment"}},[s._v("// result -> The value returned by the previous helper function or the config value, as in the above example is '2018-10-10'")]),s._v("\n  "),a("span",{attrs:{class:"hljs-comment"}},[s._v("// arg1 -> The string you passed in the message template, as in the above example, 'Please re-enter'")]),s._v("\n  "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("let")]),s._v(" ret\n\n  "),a("span",{attrs:{class:"hljs-comment"}},[s._v("// do your own job")]),s._v("\n  ret = result + arg1\n\n  "),a("span",{attrs:{class:"hljs-comment"}},[s._v("// you must return the processed message")]),s._v("\n  "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" ret\n})\n")])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("The tool functions registered through "),a("code",{pre:!0},[s._v("Validator.addHelper")]),s._v(" are actually mounted under the "),a("code",{pre:!0},[s._v("Locale.helpers")]),s._v(" namespace. You can also import the "),a("code",{pre:!0},[s._v("Locale")]),s._v(" module and register your own tool functions with "),a("code",{pre:!0},[s._v("Locale.addHelper")]),s._v(", which point to the same address.")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("ul",[a("li",[s._v("Add new type")])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("pre",{pre:!0},[a("code",{attrs:{"v-pre":"",class:"language-js"}},[a("span",{attrs:{class:"hljs-keyword"}},[s._v("import")]),s._v(" { Validator } "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("from")]),s._v(" "),a("span",{attrs:{class:"hljs-string"}},[s._v("'cube-ui'")]),s._v("\n\nValidator.addType("),a("span",{attrs:{class:"hljs-string"}},[s._v("'yourType'")]),s._v(", (val) => {\n  "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("typeof")]),s._v(" val === "),a("span",{attrs:{class:"hljs-string"}},[s._v("'string'")]),s._v(" && "),a("span",{attrs:{class:"hljs-regexp"}},[s._v("/^[a-z0-9_-]+/i")]),s._v(".test(val)\n})\n")])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("ul",[a("li",[s._v("Modify the build-in type")])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("pre",{pre:!0},[a("code",{attrs:{"v-pre":"",class:"language-js"}},[a("span",{attrs:{class:"hljs-keyword"}},[s._v("import")]),s._v(" { Validator } "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("from")]),s._v(" "),a("span",{attrs:{class:"hljs-string"}},[s._v("'cube-ui'")]),s._v("\n\nValidator.addType("),a("span",{attrs:{class:"hljs-string"}},[s._v("'email'")]),s._v(", (val) => {\n  "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("typeof")]),s._v(" val === "),a("span",{attrs:{class:"hljs-string"}},[s._v("'string'")]),s._v(" && "),a("span",{attrs:{class:"hljs-regexp"}},[s._v("/^[a-z0-9_-]+@[a-z0-9_-]+(\\.[a-z0-9_-]+)$/i")]),s._v(".test(val)\n})\n")])])}]}},UO5F:function(s,t,a){var e=a("VU/8")(null,a("BdDp"),null,null,null);s.exports=e.exports},hl6N:function(s,t,a){s.exports=a("UO5F")}});