jQuery Validate插件捆綁了一套有用的驗(yàn)證方法，包括 URL 和電子郵件驗(yàn)證，同時(shí)提供了一個(gè)用來(lái)編寫(xiě)用戶自定義方法的 API。所有的捆綁方法默認(rèn)使用英語(yǔ)作為錯(cuò)誤信息，且已翻譯成其他 37 種語(yǔ)言。
第一節(jié)：jQuery Validation讓驗(yàn)證變得如此容易
一、官網(wǎng)下載jquery，和jquery validation plugin
二、引入文件
<script src="js/jquery-1.8.0.min.js" type="text/javascript"></script> <script src="js/jquery.validate.js" type="text/javascript"></script>
三、接下來(lái),聲明下面的HTML片段
<form action="" id="jvForm"> 姓名:<input type="text" name="username" id="username" class="required" /></br> 密碼:<input type="password" name="password" id="password" class="required"/></br> <input type="submit" value="提交" /> </form>
通過(guò)以上代碼，大家會(huì)發(fā)現(xiàn)我們對(duì)于每一個(gè)input都加上了class="required"
他的作用就是在這個(gè)inpute標(biāo)簽為空時(shí)會(huì)提示用戶出錯(cuò)。
四、最后我們要為我們的框架找到一個(gè)切入點(diǎn)
<script type="text/javascript"> $(function() { $("#jvForm").validate(); }) </script> 運(yùn)行效果如下
當(dāng)然提示信息默認(rèn)是英文的，可根據(jù)需要在jquery.validate.js里修改。
第二節(jié)：jQuery Validation讓驗(yàn)證變得如此容易
上一個(gè)例子我們是統(tǒng)一引用jquery.validate.js這樣所有必填字段的提示信息都將是This field is required.
現(xiàn)在要改成動(dòng)態(tài)提示，比如姓名如果為空則提示姓名不能為空，密碼如果為空則提示密碼不能為空。
這次我們將校驗(yàn)規(guī)則寫(xiě)在代碼里
首先還是先引入文件
<script src="js/jquery-1.8.0.min.js" type="text/javascript"></script> <script src="js/jquery.validate.js" type="text/javascript"></script>
接下來(lái),聲明下面的HTML片段
<form action="" id="jvForm"> 姓名:<input type="text" name="username" id="username" /></br> 密碼:<input type="password" name="password" id="password" /></br> <input type="submit" value="提交" /> </form>
和之前的相比沒(méi)有了class="required"
最后 校驗(yàn)規(guī)則如下：
$(function() { $("#jvForm").validate({ rules: { username: { required: true }, password: { required: true } }, messages: { username: { required: "姓名不能為空!" }, password: { required: "密碼不能為空!" } } }); }) 運(yùn)行效果如下
第三節(jié)：jQuery Validation讓驗(yàn)證變得如此容易
以下代碼進(jìn)行對(duì)jQuery Validation的簡(jiǎn)單演示包括必填項(xiàng)、字符長(zhǎng)度，格式驗(yàn)證
一、引入文件
<script src="js/jquery-1.8.0.min.js" type="text/javascript"></script> <script src="js/jquery.validate.js" type="text/javascript"></script>
二、聲明HTML片段
<form action="" id="jvForm"> 用 戶 名:<input type="text" name="username"/></br> 密 碼:<input type="password" name="password" id="password"/></br> 確認(rèn)密碼:<input type="password" name="confirm_password"/></br> 出 生 地:<select name="address"><option value="">--</option><option value="1">北京</option> <option value="1">上海</option><option value="1">深圳</option></select></br> 手 機(jī):<input type="text" name="mobile" /></br> 郵 箱:<input type="text" name="email" /></br> <input type="submit" value="提交" /> </form>
三、錯(cuò)誤提示樣式
<style type="text/css"> label.error{font-size:12px;font-weight: normal;color:#ff0511;margin-left:10px;} </style> 四、驗(yàn)證代碼
<script type = "text/javascript"> $(function() { $("#jvForm").validate({ rules: { username: { //用戶名必填 至少3位 required: true, minlength: 3 }, password: { //密碼必填 至少6位 required: true, minlength: 6 }, confirm_password: { //密碼確認(rèn) required: true, equalTo: "#password" }, address: { //出生地必填 required: true }, mobile: { //手機(jī)必填 驗(yàn)證格式 required: true, mobile: true }, email: { //email必填 驗(yàn)證格式 required: true, email: true }, }, messages: { username: { required: "用戶名不能為空!", minlength: "用戶名至少三位!" }, password: { required: "密碼不能為空!", minlength: "密碼至少六位!" }, confirm_password: { required: "密碼確認(rèn)不能為空!", equalTo: "兩次輸入密碼不一致 !" }, address: { required: "請(qǐng)選擇出生地!", }, mobile: { required: "手機(jī)不能為空!", mobile: "手機(jī)格式不正確", }, email: { required: "郵箱不能為空!", email: "郵箱格式不正確", }, } }); }) </script> 因?yàn)閖query.validate.js中沒(méi)有mobile驗(yàn)證，所以需要自己增加一個(gè)
首先找到messages 在里面添加mobile 如下：
messages: { required: "This field is required.", remote: "Please fix this field.", email: "Please enter a valid email address.", url: "Please enter a valid URL.", date: "Please enter a valid date.", dateISO: "Please enter a valid date (ISO).", number: "Please enter a valid number.", mobile: "請(qǐng)?zhí)顚?xiě)正確的手機(jī)號(hào)碼.", digits: "Please enter only digits.", creditcard: "Please enter a valid credit card number.", equalTo: "Please enter the same value again.", maxlength: $.validator.format("Please enter no more than {0} characters."), minlength: $.validator.format("Please enter at least {0} characters."), rangelength: $.validator.format("Please enter a value between {0} and {1} characters long."), range: $.validator.format("Please enter a value between {0} and {1}."), max: $.validator.format("Please enter a value less than or equal to {0}."), min: $.validator.format("Please enter a value greater than or equal to {0}.") } 然后在methods中添加mobile的正則校驗(yàn)
mobile: function( value, element ) { return this.optional(element) || /^1[3|4|5|8][0-9]/d{8}$/.test(value); } 運(yùn)行效果
以上就是為大家展示的jQuery Validate 插件為表單提供了強(qiáng)大的驗(yàn)證功能，希望大家喜歡。
新聞熱點(diǎn)
疑難解答
圖片精選
網(wǎng)友關(guān)注
