[译] HTML5 data 属性规则使用 jQuery Validate 插件

时间 2019-11-15

标签 html5 html data 属性规则使用 jquery validate 插件栏目 HTML5 繁體版

原文原文链接

原文地址: Using the jQuery Validate Plugin with HTML5 Data Attribute Rulesjavascript

The jQuery Validation Plugin 是一个很是很是好用的插件. 和 ASP.NET MVC uses the plugin for client side validation同样好用! 他有个很是好用的 JavaScript API , 对于写验证规则或者信息验证来讲. 具体内容能够查看 documentation , 然而文档中没有彻底介绍的特性就是: 使用 html5 数据属性html

我想我刚开始知道这个特性是由于 ASP.NET MVC 使用了jQuery Validate 的 无感验证 验证规则. 意思是不用在你的标签中输入行内 javascript, 替代方法就是使用 html data 属性. 显然你能够在 1.11.0. 以后使用任何的数据验证规则.html5

基本示例

若是你对这个没有概念, 在 JS Fiddle 上有个简单的示例访问 JS Fiddle.java

这里是代码:jquery

<!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() 方法. 这个验证方法会验证数据属性而且运营验证规则. 像以前提到的, 有一系列的验证规则可供验证git

规则格式

添加以下的验证规则到input 元素中github

data-rule-[rule name separate by dashes]="true" 
复制代码

以下示例:ajax

Required - data-rule-required="true"
Email - data-rule-email="true"
Minimum Length = data-rule-minlength="6"

提示信息格式

默认的 jQuery Validation 会添加本身的验证规则, 可是你也能够自定义本身的验证规则. 指定验证信息使用以下的规则sass

data-msg-[rule name separate by dashes]="The message you want."
复制代码

以下示例:bash

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.

完整代码:

<!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 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=""

1. Jquery插件validate使用一则
2. jQuery Validate插件使用
3. jquery validate使用和扩展规则
4. jQuery的validate插件
5. HTML5中的data-*属性和jQuery中的.data()方法使用
6. jQuery插件-validate
7. jQuery插件之validate
8. jQuery的Validate插件
9. JQuery validate验证规则
10. jquery validate 自定义规则
更多相关文章...
• jQuery Mobile Data 属性 - jQuery Mobile 教程
• RDF 规则 - RDF 教程
• IntelliJ IDEA安装代码格式化插件
• Composer 安装与使用