[譯] HTML5 data 屬性規則使用 jQuery Validate 外掛
原文地址:Using the jQuery Validate Plugin with HTML5 Data Attribute Rules
The jQuery Validation Plugin 是一個非常非常好用的外掛. 和ASP.NET MVC uses the plugin for client side validation 一樣好用! 他有個非常好用的JavaScript API , 對於寫驗證規則或者資訊驗證來說. 具體內容可以檢視documentation , 然而文件中沒有完全介紹的特性就是: 使用 html5 資料屬性
我想我剛開始知道這個特性是因為ASP.NET MVC 使用了jQuery Validate 的無感驗證
驗證規則. 意思是不用在你的標籤中輸入行內 javascript, 替代方法就是 使用 html data 屬性. 顯然你可以在1.11.0
. 之後使用任何的資料驗證規則.
基本示例
如果你對這個沒有概念, 在JS Fiddle 上有個簡單的示例訪問 JS Fiddle.
這裡是程式碼:
<!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" 複製程式碼
如下示例:
data-rule-required="true" data-rule-email="true" data-rule-minlength="6"
提示資訊格式
預設的jQuery Validation 會新增自己的驗證規則, 但是你也可以自定義自己的驗證規則. 指定驗證資訊使用如下的規則
data-msg-[rule name separate by dashes]="The message you want." 複製程式碼
如下示例:
data-msg-required="Madam/sir, this field is required." 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
他簡單的使用了jQuerydata()
方法來檢測每個驗證元素, 自動將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 jQuerywithout
their dashes. Instead of the dashes youCamel 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 thedata-rule-required
attribute.
驗證規則
如果你想知道哪些驗證器可用, 需要訪問look at the code for the validators in core orbrowse 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"