jquery 表單驗(yàn)證之通過(guò) class驗(yàn)證表單不為空
在開(kāi)發(fā)系統(tǒng)時(shí)，往往都有某些表單數(shù)據(jù)為必填項(xiàng)，若用jQuery通過(guò)ID去驗(yàn)證，不僅會(huì)影響效率，還會(huì)有所遺漏，不易于后期維護(hù)。
本章將介紹如何利用jQuery，通過(guò)為表單配置class進(jìn)行統(tǒng)一驗(yàn)證。（ID一個(gè)頁(yè)面只可以使用一次；class可以多次引用）
1：為input添加class，名字可以隨意設(shè)置，但每個(gè)input需要保持一致，本章案例calss設(shè)置為noNull。（若input已有class屬性，可直接加到其后）
2：為input添加一個(gè)屬性，用來(lái)后期通過(guò)jquery獲取該字段，用作提示語(yǔ)。本章案例提示屬性為notNull。
3：通過(guò)jQuery遍歷頁(yè)面中所有calss為noNull的表單，驗(yàn)證其是否為空，若為空，通過(guò)獲取notNull的字段，進(jìn)行為空提示。
具體如何設(shè)置，請(qǐng)參照下面的案例。本章針對(duì)input,radio,select,checkbox等類(lèi)型都進(jìn)行了闡述。
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
</head>
<body>
<form>
<!-- input -->
<div>
姓名: <input type="text" name="name" notNull="姓名" class="form-control noNull">
</div>
<br>
<!-- radio -->
<div>
性別:
男<input type="radio" name="sex" value="0" class="noNull" notNull="性別">
女<input type="radio" name="sex" value="1" >
</div>
<br>
<!-- select -->
<div>
年齡：
<select name="age" class="noNull" notNull="年齡">
<option value ="">請(qǐng)選擇</option>
<option value ="1">1</option>
<option value ="2">2</option>
</select>
</div>
<br>
<!-- checkbox -->
<div>
興趣：
打球<input type="checkbox" name="hobby" value="1" class="noNull" notNull="興趣">
唱歌<input type="checkbox" name="hobby" value="2">
跳舞<input type="checkbox" name="hobby" value="3">
</div>
<br>
<button type="button" class="btn-c" onclick="bubmi()">保存</button>
</form>
<script src="jquery-1.9.1.min.js"></script>
<script type="text/javascript">
function bubmi(){
$(".noNull").each(function(){
var name = $(this).attr("name");
if($(this).val()==""){
alert($(this).attr('notNull')+"不能為空");return false;
}
if($(this).attr("type")=="radio"){
if ($("input[name='"+name+"']:checked").size() < 1){
alert($(this).attr('notNull')+"不能為空!");
return false;
}
}
if($(this).attr("type")=="checkbox"){
if ($('input[name="'+name+'"]:checked').size() < 1){
alert($(this).attr('notNull')+"不能為空!");
return false;
}
}
})
}
</script>
</body>
</html>
下面給大家介紹jquery.validate.js驗(yàn)證插件
jquery.validate.js是jquery旗下的一個(gè)驗(yàn)證插件，借助jquery的優(yōu)勢(shì)，我們可以迅速驗(yàn)證一些常見(jiàn)的輸入,并且可以自己擴(kuò)充自己的驗(yàn)證方法。
舉個(gè)例子，有這么一個(gè)表單：
<form id="signupForm" method="get" action=""> <fieldset> <legend>Validating a complete form</legend> <p> <label for="firstname">Firstname</label> <input id="firstname" name="firstname" class="required"/> </p> <p> <label for="lastname">Lastname</label> <input id="lastname" name="lastname" /> </p> <p> <label for="username">Username</label> <input id="username" name="username" /> </p> <p> <label for="password">Password</label> <input id="password" name="password" type="password" /> </p> <p> <label for="confirm_password">Confirm password</label> <input id="confirm_password" name="confirm_password" type="password" /> </p> <p> <label for="email">Email</label> <input id="email" name="email" /> </p> <p> <input class="submit" type="submit" value="Submit"/> </p> </fieldset> </form>
在這個(gè)表單中，有名、姓、用戶(hù)名、密碼、確認(rèn)密碼和email。他們都為非空，并且電子郵件需要是格式正確的地址、確認(rèn)密碼和密碼一致。使用jQuery驗(yàn)證最簡(jiǎn)單的方式是引入jquery.js和jquery validation.js兩個(gè)js文件。然后分別在input中加入class即：
<input id="firstname" name="firstname" class="required"/> <input id="lastname" name="lastname" class="required"/> <input id="username" name="username" class="required"/> <input id="password" name="password" type="password" class="required"/> <input id="confirm_password" name="confirm_password" type="password" class="required" equalTo="#password"/> <input id="email" name="email" class="required email"/>
以下列出validate自帶的默認(rèn)驗(yàn)證
required: "必選字段",
remote: "請(qǐng)修正該字段",
email: "請(qǐng)輸入正確格式的電子郵件",
url: "請(qǐng)輸入合法的網(wǎng)址",
date: "請(qǐng)輸入合法的日期",
dateISO: "請(qǐng)輸入合法的日期 (ISO).",
number: "請(qǐng)輸入合法的數(shù)字",
digits: "只能輸入整數(shù)",
creditcard: "請(qǐng)輸入合法的信用卡號(hào)",
equalTo: "請(qǐng)?jiān)俅屋斎胂嗤闹?,
accept: "請(qǐng)輸入擁有合法后綴名的字符串",
maxlength: jQuery.format("請(qǐng)輸入一個(gè)長(zhǎng)度最多是 {0} 的字符串"),
minlength: jQuery.format("請(qǐng)輸入一個(gè)長(zhǎng)度最少是 {0} 的字符串"),
rangelength: jQuery.format("請(qǐng)輸入一個(gè)長(zhǎng)度介于 {0} 和 {1} 之間的字符串"),
range: jQuery.format("請(qǐng)輸入一個(gè)介于 {0} 和 {1} 之間的值"),
max: jQuery.format("請(qǐng)輸入一個(gè)最大為 {0} 的值"),
min: jQuery.format("請(qǐng)輸入一個(gè)最小為 {0} 的值")
然后，在document的read事件中，加入如下方法：
<script>
$(document).ready(function(){
$("#signupForm").validate();
}
</script>
這樣，當(dāng)form被提交的時(shí)候，就會(huì)根據(jù)input指定的class來(lái)進(jìn)行驗(yàn)證了。如果失敗，form的提交就會(huì)被阻止。并且，將提示信息顯示在input的后面。
不過(guò)，這樣感覺(jué)不好，因?yàn)轵?yàn)證規(guī)則侵入了我們的html代碼。還有一個(gè)方式，便是使用“rules”。我們將input的那些驗(yàn)證用class刪除掉。然后修改document的ready事件響應(yīng)代碼：
$(document).ready(function(){
$("#signupForm").validate({
rules:{
firstname:"required",
lastname:"required",
username:"required",
password:"required",
confirm_password:{
required:true,
equalTo:"#password"
},
email:{
required:true,
email:true
}
}
});
})
這樣以來(lái)，也能達(dá)到相同的效果。
那么，接下的問(wèn)題，就是顯示的錯(cuò)誤提示是默認(rèn)的。我們需要使用自定義的提示：
$(document).ready(function(){
$("#signupForm").validate({
rules:{
firstname:"required",
lastname:"required",
username:"required",
password:"required",
confirm_password:{
required:true,
equalTo:"#password"
},
email:{
required:true,
email:true
}
},
messages:{
firstname:"必填項(xiàng)",
lastname:"必填項(xiàng)",
username:"必填項(xiàng)",
password:"必填項(xiàng)",
confirm_password:{
required:"必填項(xiàng)",
equalTo:"密碼不一致"
},
email:{
required:"必填項(xiàng)",
email:"格式有誤"
}
}
});
})
如果你還想在錯(cuò)誤信息上顯示特別的樣式(比如字體為紅色)即可通過(guò)添加：
<style type="text/css">
#signupForm label.error {
padding-left: 16px;
margin-left: 2px;
color:red;
background: url(img/unchecked.gif) no-repeat 0px 0px;
}
</style>
繼續(xù)添加對(duì)輸入密碼長(zhǎng)度的驗(yàn)證規(guī)則：
$(document).ready(function(){
$("#signupForm").validate({
rules:{
firstname:"required",
lastname:"required",
username:"required",
password:{
required:true,
minlength:4,
maxlength:15
},
confirm_password:{
required:true,
equalTo:"#password"
},
email:{
required:true,
email:true
}
},
messages:{
firstname:"必填項(xiàng)",
lastname:"必填項(xiàng)",
username:"必填項(xiàng)",
password:{
required:"必填項(xiàng)",
minlength:jQuery.format("密碼長(zhǎng)度不少于{0}位"),
maxlength:jQuery.format("密碼長(zhǎng)度不超過(guò){0}位")
},
confirm_password:{
required:"必填項(xiàng)",
equalTo:"密碼不一致"
},
email:{
required:"必填項(xiàng)",
email:"格式有誤"
}
}
});
})
使用remote
可以通過(guò)event指定觸發(fā)效驗(yàn)方式（可選值有keyup(每次按鍵時(shí))，blur(當(dāng)控件失去焦點(diǎn)時(shí))，不指定時(shí)就只在按提交按鈕時(shí)觸發(fā)）
$(document).ready(function(){
$("#signupForm").validate({
event:"keyup" || "blur"
})
})
如果通過(guò)指定debug為true則表單不會(huì)提交只能用來(lái)驗(yàn)證(默認(rèn)為提交)，可用來(lái)調(diào)試
$(document).ready(function(){
$("#signupForm").validate({
debug:true
})
})
如果在提交前還需要進(jìn)行一些自定義處理使用submitHandler參數(shù)
$(document).ready(function(){
$("#signupForm").validate({
SubmitHandler:function(){
alert("success");
}
})
})
相關(guān)文章
簡(jiǎn)單實(shí)現(xiàn)jQuery上傳圖片顯示預(yù)覽功能
這篇文章主要教大家如何簡(jiǎn)單實(shí)現(xiàn)jQuery上傳圖片顯示預(yù)覽功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-08-08
jquery實(shí)現(xiàn)不包含當(dāng)前項(xiàng)的選擇器實(shí)例
這篇文章主要介紹了jquery實(shí)現(xiàn)不包含當(dāng)前項(xiàng)的選擇器,實(shí)例分析了jquery選擇器的使用技巧,需要的朋友可以參考下2015-06-06
jQuery實(shí)現(xiàn)的產(chǎn)品自動(dòng)360度旋轉(zhuǎn)展示特效源碼分享
這篇文章主要展示了jQuery實(shí)現(xiàn)的產(chǎn)品自動(dòng)360度旋轉(zhuǎn)展示特效，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2015-08-08
有時(shí)候需要合并表格中相同文本的相鄰單元格，需要的朋友可以參考下。2011-04-04
解決 PHP 拼數(shù)據(jù)這方面的問(wèn)題而有了 Smarty 這些模版，JavaScript 也可以利用模版來(lái)解決這些問(wèn)題，比如基于 jQuery 的 jquery.tmpl2014-08-08
jquery中實(shí)現(xiàn)ajax價(jià)值的方法有很多種，下面小編給大家介紹了jQuery Ajax頁(yè)面局部加載方法匯總，非常實(shí)用具有參考借鑒價(jià)值，感謝的朋友一起看下吧2016-06-06
通過(guò)length屬性判斷jquery對(duì)象是否存在
判斷jquery對(duì)象是否存在的方法有很多，在本文將為大家詳細(xì)介紹下，通過(guò)length屬性是如何判斷的2013-10-10
jQuery 是一個(gè)非常優(yōu)秀的 JavaScript 框架，在現(xiàn)在的 Web 開(kāi)發(fā)項(xiàng)目中扮演著重要角色。jQuery 使用簡(jiǎn)單靈活，同時(shí)還有許多成熟的插件可供選擇，它可以幫助你在項(xiàng)目中加入一些非常好的效果，讓網(wǎng)站有更好的可用性和用戶(hù)體驗(yàn)2011-10-10
本文依賴(lài)于jQuery,其中第一種，第二種方式是使用jQuery實(shí)現(xiàn)的，第三種方式是基于JS和DOM實(shí)現(xiàn)的，感興趣的朋友可以了解下2013-12-12
jQuery獲取多種input值的簡(jiǎn)單實(shí)現(xiàn)方法
下面小編就為大家?guī)?lái)一篇jQuery獲取多種input值的簡(jiǎn)單實(shí)現(xiàn)方法。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-06-06