jQuery Validate表單驗(yàn)證插件 添加class屬性形式的校驗(yàn)
本文實(shí)例介紹了jQuery Validate 表單驗(yàn)證插件,添加class屬性形式的校驗(yàn),分享給大家供大家參考,具體內(nèi)容如下
效果如下:
一、jQuery表單驗(yàn)證插件,添加class屬性形式的校驗(yàn)
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>jQuery表單驗(yàn)證插件----添加class屬性形式的校驗(yàn)</title> <script src="../../scripts/jquery-1.3.1.js" type="text/javascript"></script> <script src="lib/jquery.validate.js" type="text/javascript"></script> <style type="text/css"> * { font-family: Verdana; font-size: 96%; } label { width: 10em; float: left; } label.error { float: none; color: red; padding-left: .5em; vertical-align: top; } p { clear: both; } .submit { margin-left: 12em; } em { font-weight: bold; padding-right: 1em; vertical-align: top; } </style> <script type="text/javascript"> $(document).ready(function(){ $("#commentForm").validate(); }); </script> </head> <body> <form class="cmxform" id="commentForm" method="get" action=""> <fieldset> <legend>jQuery表單驗(yàn)證插件----添加class屬性形式的校驗(yàn)</legend> <p> <label for="cusername">姓名</label> <em>*</em><input id="cusername" name="username" size="25" class="required" minlength="2" /> </p> <p> <label for="cemail">電子郵件</label> <em>*</em><input id="cemail" name="email" size="25" class="required email" /> </p> <p> <label for="curl">網(wǎng)址</label> <em> </em><input id="curl" name="url" size="25" class="url" value="" /> </p> <p> <label for="ccomment">你的評(píng)論</label> <em>*</em><textarea id="ccomment" name="comment" cols="22" class="required"></textarea> </p> <p> <input class="submit" type="submit" value="提交"/> </p> </fieldset> </form> </body> </html>
二、默認(rèn)規(guī)則
默認(rèn)校驗(yàn)規(guī)則:
- (1)required:true 必輸字段
- (2)remote:"check.php" 使用ajax方法調(diào)用check.php驗(yàn)證輸入值
- (3)email:true 必須輸入正確格式的電子郵件
- (4)url:true 必須輸入正確格式的網(wǎng)址
- (5)date:true 必須輸入正確格式的日期 日期校驗(yàn)ie6出錯(cuò),慎用
- (6)dateISO:true 必須輸入正確格式的日期(ISO),例如:2009-06-23,1998/01/22 只驗(yàn)證格式,不驗(yàn)證有效性
- (7)number:true 必須輸入合法的數(shù)字(負(fù)數(shù),小數(shù))
- (8)digits:true 必須輸入整數(shù)
- (9)creditcard: 必須輸入合法的信用卡號(hào)
- (10)equalTo:"#field" 輸入值必須和#field相同
- (11)accept: 輸入擁有合法后綴名的字符串(上傳文件的后綴)
- (12)maxlength:5 輸入長度最多是5的字符串(漢字算一個(gè)字符)
- (13)minlength:10 輸入長度最小是10的字符串(漢字算一個(gè)字符)
- (14)rangelength:[5,10] 輸入長度必須介于 5 和 10 之間的字符串")(漢字算一個(gè)字符)
- (15)range:[5,10] 輸入值必須介于 5 和 10 之間
- (16)max:5 輸入值不能大于5
- (17)min:10 輸入值不能小于10
默認(rèn)提示:
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).", dateDE: "Bitte geben Sie ein g眉ltiges Datum ein.", number: "Please enter a valid number.", numberDE: "Bitte geben Sie eine Nummer ein.", digits: "Please enter only digits", creditcard: "Please enter a valid credit card number.", equalTo: "Please enter the same value again.", accept: "Please enter a value with a valid extension.", 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}.") },
本文已被整理到了《jquery表單驗(yàn)證大全》 ,歡迎大家學(xué)習(xí)閱讀。
以上就是本文的全部內(nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助。
- jQuery驗(yàn)證插件 Validate詳解
- jQuery驗(yàn)證插件validate使用方法詳解
- jQuery 表單驗(yàn)證插件formValidation實(shí)現(xiàn)個(gè)性化錯(cuò)誤提示
- jQuery驗(yàn)證插件validation使用指南
- jquery表單驗(yàn)證插件(jquery.validate.js)的3種使用方式
- jQuery 驗(yàn)證插件 Web前端設(shè)計(jì)模式(asp.net)
- jQuery formValidator表單驗(yàn)證插件開源了 含API幫助、源碼、示例
- jquery表單驗(yàn)證插件formValidator使用方法
- jQuery表單驗(yàn)證插件formValidator(改進(jìn)版)
- jquery實(shí)現(xiàn)簡易驗(yàn)證插件封裝
相關(guān)文章
jquery實(shí)現(xiàn)點(diǎn)擊瀏覽器返回上一頁按鈕并能直接刷新
這篇文章主要介紹了jquery實(shí)現(xiàn)點(diǎn)擊瀏覽器返回上一頁按鈕并能直接刷新,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-12-12jQuery iScroll.js 移動(dòng)端滾動(dòng)條美化插件
這篇文章主要介紹了jQuery iScroll.js 移動(dòng)端滾動(dòng)條美化插件的相關(guān)資料,需要的朋友可以參考下2016-02-02jQuery實(shí)現(xiàn)通過方向鍵控制div塊上下左右移動(dòng)的方法【測試可用】
這篇文章主要介紹了jQuery實(shí)現(xiàn)通過方向鍵控制div塊上下左右移動(dòng)的方法,涉及jQuery結(jié)合鍵盤事件響應(yīng)動(dòng)態(tài)修改頁面元素屬性相關(guān)操作技巧,需要的朋友可以參考下2018-04-04Jquery Ajax 學(xué)習(xí)實(shí)例2 向頁面發(fā)出請(qǐng)求 返回JSon格式數(shù)據(jù)
處理業(yè)務(wù)數(shù)據(jù),產(chǎn)生JSon數(shù)據(jù),供JqueryRequest.aspx調(diào)用2010-03-03