[译]HTML5data属性规则使⽤jQueryValidate插件
原⽂地址:
是⼀个⾮常⾮常好⽤的插件. 和 ⼀样好⽤! 他有个⾮常好⽤的 JavaScript API , 对于写验证规则或者信息验证来说. 具体内容可以查看 , 然⽽⽂档中没有完全介绍的特性就是: 使⽤ html5 数据属性
我想我刚开始知道这个特性是因为 MVC 使⽤了jQuery Validate 的 ⽆感验证 验证规则. 意思是不⽤在你的标签中输⼊⾏内 javascript, 替代⽅法就是 使⽤ html data 属性. 显然你可以在 . 之后使⽤任何的数据验证规则.
基本⽰例
如果你对这个没有概念, 在 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="code.jquery/jquery-2.1.0.js"></script>
<script type="text/javascript" src="ajax.aspnetcdn/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 上的⼀个更完整的⽰例, ⽰例项包含不同的验证规则和验证信息 .
完整代码:
<!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 dumm        </div>
<div>
<input type="submit" value="Validate!" />
</div>
</form>
<script type="text/javascript" src="//code.jquery/jquery-2.1.0.js"></script>
<script type="text/javascript" src="//ajax.aspnetcdn/ajax/jquery.validate/1.11.1/jquery.validate.min.js"></script>
<script type="text/javascript">
$('#validate-me-plz').validate();
</script>
</html>
复制代码
怎样⼯作/起作⽤的
如果你对怎么起作⽤的⽐较关注查看 他简单的使⽤了 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 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.
验证规则
如果你想知道哪些验证器可⽤, 需要访问 or .
以下是从 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=""
jquery框架定义
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=""

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。