The jQuery Validation Plugin http://jqueryvalidation.org/ 是一个非常非常好用的插件. 和 ASP.NET MVC uses the plugin for client side validation 一样好用! 他有个非常好用的 JavaScript API , 对于写验证规则或者信息验证来说. 具体内容可以查看 http://jqueryvalidation.org/documentation/ , 然而文档中没有完全介绍的特性就是: 使用 html5 数据属性
我想我刚开始知道这个特性是因为 http://ASP.NET MVC 使用了 jQuery Validate 的 无感验证 验证规则. 意思是不用在你的标签中输入行内 JavaScript, 替代方法就是 使用 HTML data 属性. 显然你可以在 1.11.0. 之后使用任何的数据验证规则.
基本示例
如果你对这个没有概念, 在 JS Fiddle 上有个简单的示例 访问 JS Fiddle http://jsfiddle.net/jbubriski/SLXhR/ .
这里是代码:
- <!DOCTYPE HTML>
- <HTML>
- <form id="validate-me-plz">
- <div>
- Required:
- <input type="text" name="firstName" data-rule-required="true" />
- </div>
- <div>
- <input type="submit" value="Submit" />
- </div>
- </form>
- <script type="text/javascript" src="http://code.jquery.com/jquery-2.1.0.js">
- </script>
- <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js">
- </script>
- <script type="text/javascript">
- $('#validate-me-plz').validate();
- </script>
- </HTML>
你可以看到, 在输入框的时候, 我们有个 data-rule-required 属性设置为 true, 我们仅仅在最后调用 .validate() 方法. 这个验证方法会验证数据属性并且运营验证规则. 像之前提到的, 有一系列的验证规则可供验证
规则格式
添加如下的验证规则到 input 元素中
data-rule-[rule name separate by dashes]="true"
如下示例:
- Required -
- data-rule-required="true"
- Email -
- data-rule-email="true"
- Minimum Length =
- data-rule-minlength="6"
提示信息格式
默认的 jQuery Validation 会添加自己的验证规则, 但是你也可以自定义自己的验证规则. 指定验证信息使用如下的规则
data-msg-[rule name separate by dashes]="The message you want."
如下示例:
- Required -
- data-msg-required="Madam/sir, this field is required."
- Email -
- data-msg-email="Let us spam you, enter a valid email address."
完整示例:
这是在 JS Fiddle 上的一个更完整的示例, 示例项包含不同的验证规则和验证信息 JS Fiddle http://jsfiddle.net/jbubriski/YQgEq/2/ .
完整代码:
- <!DOCTYPE HTML>
- <HTML>
- <form id="validate-me-plz">
- <div>
- Required:
- <input type="text" name="required" data-rule-required="true" />
- </div>
- <div>
- Required w/custom message:
- <input type="text" name="required-sassy" data-rule-required="true" data-msg-required="Please enter SOMETHING."
- />
- </div>
- <div>
- Email:
- <input type="text" name="email" data-rule-email="true" />
- </div>
- <div>
- Email w/custom message:
- <input type="text" name="anotherEmail" data-rule-email="true" data-msg-email="Please enter a valid email address you dummy."
- />
- </div>
- <div>
- <input type="submit" value="Validate!" />
- </div>
- </form>
- <script type="text/javascript" src="//code.jquery.com/jquery-2.1.0.js">
- </script>
- <script type="text/javascript" src="//ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js">
- </script>
- <script type="text/javascript">
- $('#validate-me-plz').validate();
- </script>
- </HTML>
怎样工作 / 起作用的
如果你对怎么起作用的比较关注查看 look at core.JS around line 928 他简单的使用了 jQuery data() 方法来检测每个验证元素, 自动将 data 属性中的验证属性转换为规则.
value = $element.data("rule" + method[ 0 ].toUpperCase() + method.substring( 1 ).toLowerCase());
(ps) 以下是作者对破折号的想法: But where are the dashes? I didn't realize it, but data attributes can (should?) be referenced via jQuery without their dashes. Instead of the dashes you Camel Case http://en.wikipedia.org/wiki/CamelCase the data attribute name, without the"data-"prefix. The above code results in something like this for the required rule: value = $element.data("ruleRequired"); which maps to the data-rule-required attribute.
验证规则
如果你想知道哪些验证器可用, 需要访问 look at the code for the validators in core or browse the additional validators.
以下是从 GitHub 上搞到解析出来的代码, 我做了如下标注
框架新增
data-rule-mobile 验证手机号
data-rule-qq 验证 QQ 号码
data-rule-chId 身份证号
data-rule-decimal 输入小数
data-rule-noSpace 不允许存在空格
data-rule-phoneZh 固话
data-rule-phoneAmobile 固话 / 手机号
- (Tested, core)
- data-rule-required="true"
- data-rule-email="true"
- (Untested, core, but should work)
- data-rule-url="true"
- data-rule-date="true"
- data-rule-dateISO="true"
- data-rule-number="true"
- data-rule-digits="true"
- data-rule-creditcard="true"
- data-rule-minlength="6"
- data-rule-maxlength="24"
- data-rule-rangelength="5,10"
- data-rule-min="5"
- data-rule-max="10"
- data-rule-range="5,10"
- data-rule-equalto="#password"
- data-rule-remote="custom-validatation-endpoint.aspx"
- (Untested, additional, but should work)
- data-rule-accept=""data-rule-bankaccountNL="true"data-rule-bankorgiroaccountNL="true"data-rule-bic=""
- data-rule-cifES=""data-rule-creditcardtypes=""
- data-rule-currency=""data-rule-dateITA=""
- data-rule-dateNL=""data-rule-extension=""
- data-rule-giroaccountNL=""data-rule-iban=""
- data-rule-integer="true"
- data-rule-ipv4="true"
- data-rule-ipv6="true"
- data-rule-mobileNL=""data-rule-mobileUK=""
- data-rule-lettersonly="true"
- data-rule-nieES=""data-rule-nifES=""
- data-rule-nowhitespace="true"
- data-rule-pattern=""data-rule-phoneNL="true"data-rule-phoneUK="true"data-rule-phoneUS="true"data-rule-phonesUK="true"data-rule-postalcodeNL="true"data-rule-postcodeUK="true"data-rule-require_from_group=""
- data-rule-skip_or_fill_minimum=""data-rule-strippedminlength=""
- data-rule-time=""data-rule-time12h=""
- data-rule-url2=""data-rule-vinUS=""
- data-rule-zipcodeUS="true"
- data-rule-ziprange=""
来源: https://juejin.im/post/5c511afc6fb9a049ef26fded