[譯] 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.