JQuery的Validation插件可以到http://plugins.jquery.com/上去下載。今天來分享一下,關(guān)于這個插件的使用。
簡易使用
這第一種方式可謂是傻瓜式的使用,我們只需要按照validation定義好的規(guī)則就可以了。
•首先引入JQuery庫和Validation插件:
<script type="text/javascript" src="http://www.gimoo.net/t/1901/jquery-2.2.4.min.js"></script>
<script type="text/javascript" src="http://www.gimoo.net/t/1901/jquery.validate.min.js"></script>
•然后是打開驗證開關(guān):
$(function(){ $("#form_id").validate(); }); // 或者 $(document).ready(function(){ $("#form_id").validate(); });
•validation的build_in驗證規(guī)則有:
◦class = “required”: 表明表單中該字段為必選的
◦class = "required email" 表明在表單中該字段為必須存在的,而且是符合email的規(guī)范格式
◦class = "url"表明在表單中該字段需要滿足url的匹配模式
◦minlength = "6" 表明在表單中該字段的長度最小為6位
•案例展示:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Validation for form demo</title> <script type="text/javascript" src="http://www.gimoo.net/t/1901/jquery-2.2.4.min.js"></script> <script type="text/javascript" src="http://www.gimoo.net/t/1901/jquery.validate.min.js"></script> <style> em { font-weight: bold; vertical-align: top; color: red; float: right; } label { width:10em; padding: 7px; } .container { width: 370px; height: auto; background-color: silver; } </style> </head> <body> <div align="center" class="container"> <form id="vform" method="post" action="#"> <fieldset> <legend>使用JQuery插件validation來實現(xiàn)表單驗證</legend> <p> <label for="username">姓名:</label> <input id="username" name="username" class="required" minlength="2"> <em>*</em> </p> <p> <label for="email">郵件:</label> <input id="email" name="email" class="required email" > <em>*</em> </p> <p> <label for="url">網(wǎng)址:</label> <input id="url" name="url" class="url" ></p> <p> <label for="comment">評論:</label> <textarea id="comment" name="comment" class="required"></textarea> <em>*</em> </p> <p><input type="submit" name="submit"></p> </fieldset> </form> </div> <script> // $(function(){ // $("#vform").validation(); // }); $(document).ready(function(){ $("#vform").validate(); }); </script> </body> </html>
驗證規(guī)則全寫到Class中
和簡易使用不同的是,這種方式使用pure的class來進(jìn)行控制。但是我們需要引入一個新的插件jquery.metadate.js。實現(xiàn)的功能就是幫助用戶將所有的與驗證數(shù)據(jù)相關(guān)的信息寫到class屬性中,方便管理。
我們可以通過以下幾步來實現(xiàn)這一需求。
•引入一個新的插件jquery.metadata.js
<script src="http://www.gimoo.net/t/1901/jquery.metadata.js"></script>
•改變調(diào)用驗證表單的開關(guān):
$(function(){ $("#form_id").validate();//去掉這行代碼,修改成下面的 $("#form_id").validate({meta:"validate"}); });
•將驗證信息寫到class屬性中。詳見下面的代碼。
<div align="center" class="container"> <form id="vform" method="post" action="#"> <fieldset> <legend>使用JQuery插件validation來實現(xiàn)表單驗證</legend> <p> <label for="username">姓名:</label> <input id="username" name="username" class="{validate: { required : true, minlength : 2 }}" > <em>*</em> </p> <p> <label for="email">郵件:</label> <input id="email" name="email" class="{validate: { required :true,email :true}}" > <em>*</em> </p> <p> <label for="url">網(wǎng)址:</label> <input id="url" name="url" class="{validate: {url :true}}" ></p> <p> <label for="comment">評論:</label> <textarea id="comment" name="comment" class="{validate: {required :true}}"></textarea> <em>*</em> </p> <p><input type="submit" name="submit"></p> </fieldset> </form> </div>
注意: Validate寫在class屬性的時候,記得要將驗證規(guī)則使用空格分隔開來。 否則代碼不會正常的運行!
還有就是$("#vform").validate({meta:"validate"});中validate這個單詞不能隨意的更改,否則也是不會生效的。
通過name屬性構(gòu)建驗證規(guī)則
下面介紹一種與HTML元素的屬性無直接關(guān)聯(lián),而是通過name屬性來關(guān)聯(lián)字段和驗證規(guī)則的驗證寫法。
優(yōu)點: 可以實現(xiàn)行為與結(jié)構(gòu)的分離,便與調(diào)試和維護(hù)代碼;
•表單代碼,去除所有的class驗證。當(dāng)然這并不是說我們不可以給字段添加樣式咯。
<div align="center" class="container"> <form id="vform" method="post" action="#"> <fieldset> <legend>使用JQuery插件validation來實現(xiàn)表單驗證</legend> <p> <label for="username">姓名:</label> <input id="username" name="username" > <em>*</em> </p> <p> <label for="email">郵件:</label> <input id="email" name="email" > <em>*</em> </p> <p> <label for="url">網(wǎng)址:</label> <input id="url" name="url" ></p> <p> <label for="comment">評論:</label> <textarea id="comment" name="comment" ></textarea> <em>*</em> </p> <p><input type="submit" name="submit"></p> </fieldset> </form> </div>
•JQuery代碼如下:
<script> // $(function(){ // $("#vform").validation(); // }); $(function(){ $("#vform").validate({ rules:{ username: { required: true, minlength: 6 }, email: { required: true, email: true }, url: "url", comment: "required" } }); }); </script>
•注意:使用空格分隔驗證字段
以上就是關(guān)于JQuery插件Validation的基礎(chǔ)使用了。
國際化之中文化
•首先引入一個中文的信息驗證庫,這個我們可以在下載好的validation的lib包下找到。
<script src="http://www.gimoo.net/t/1901/messages_zh.js"></script>
•第二步就是在驗證規(guī)則處添加message字段,然后輸入自定義的中文信息。如下:
<script> // $(function(){ // $("#vform").validation(); // }); $(function(){ $("#vform").validate({ rules:{ username: { required: true, minlength: 6, messages: { required: '請輸入姓名', minlength: '請至少輸入6個字符' } }, email: { required: true, email: true, messages: { required: '請輸入郵箱', email: '請檢查您的郵箱格式!' } }, url: { url: true, messages: { url: '請檢查網(wǎng)址的格式!' } }, comment: { required: true, messages: { required: '請輸入評論!', } } } }); }); </script>
不知道怎么回事,我這段代碼沒有顯示中文提示,大家發(fā)現(xiàn)了錯誤在哪里了嗎?
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持綠夏網(wǎng)。