首頁 > 開發者 > JavaScript
jquery 表單驗證之通過 class驗證表單不為空白，jqueryclass
在開發系統時，往往都有某些表單資料為必填項，若用jQuery通過ID去驗證，不僅會影響效率，還會有所遺漏，不易於後期維護。
本章將介紹如何利用jQuery，通過為表單配置class進行統一驗證。（ID一個頁面只可以使用一次；class可以多次引用）
1：為input添加class，名字可以隨意設定，但每個input需要保持一致，本章案例calss設定為noNull。（若input已有class屬性，可直接加到其後）
2：為input添加一個屬性，用來後期通過jquery擷取該欄位，用作提示。本章案例提示屬性為notNull。
3：通過jQuery遍曆頁面中所有calss為noNull的表單，驗證其是否為空白，若為空白，通過擷取notNull的欄位，進行為空白提示。
具體如何設定，請參照下面的案例。本章針對input,radio,select,checkbox等類型都進行了闡述。
<!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 ="">請選擇</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驗證外掛程式
jquery.validate.js是jquery旗下的一個驗證外掛程式，藉助jquery的優勢，我們可以迅速驗證一些常見的輸入,並且可以自己擴充自己的驗證方法。
舉個例子，有這麼一個表單：
<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>
在這個表單中，有名、姓、使用者名稱、密碼、確認密碼和email。他們都為非空，並且電子郵件需要是格式正確的地址、確認密碼和密碼一致。使用jQuery驗證最簡單的方式是引入jquery.js和jquery validation.js兩個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內建的預設驗證
required: "必選欄位",
remote: "請修正該欄位",
email: "請輸入正確格式的電子郵件",
url: "請輸入合法的網址",
date: "請輸入合法的日期",
dateISO: "請輸入合法的日期 (ISO).",
number: "請輸入合法的數字",
digits: "只能輸入整數",
creditcard: "請輸入合法的信用卡號",
equalTo: "請再次輸入相同的值",
accept: "請輸入擁有合法尾碼名的字串",
maxlength: jQuery.format("請輸入一個長度最多是 {0} 的字串"),
minlength: jQuery.format("請輸入一個長度最少是 {0} 的字串"),
rangelength: jQuery.format("請輸入一個長度介於 {0} 和 {1} 之間的字串"),
range: jQuery.format("請輸入一個介於 {0} 和 {1} 之間的值"),
max: jQuery.format("請輸入一個最大為 {0} 的值"),
min: jQuery.format("請輸入一個最小為 {0} 的值")
然後，在document的read事件中，加入如下方法：
<script> $(document).ready(function(){ $("#signupForm").validate(); } </script>
這樣，當form被提交的時候，就會根據input指定的class來進行驗證了。如果失敗，form的提交就會被阻止。並且，將提示資訊顯示在input的後面。
不過，這樣感覺不好，因為驗證規則侵入了我們的html代碼。還有一個方式，便是使用“rules”。我們將input的那些驗證用class刪除掉。然後修改document的ready事件響應代碼：
$(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}}});})
這樣以來，也能達到相同的效果。
那麼，接下的問題，就是顯示的錯誤提示是預設的。我們需要使用自訂的提示：
$(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:"必填項",lastname:"必填項",username:"必填項",password:"必填項",confirm_password:{required:"必填項",equalTo:"密碼不一致"},email:{required:"必填項",email:"格式有誤"}}});})
如果你還想在錯誤資訊上顯示特別的樣式(比如字型為紅色)即可通過添加：
<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>
繼續添加對輸入密碼長度的驗證規則：
$(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:"必填項",lastname:"必填項",username:"必填項",password:{required:"必填項",minlength:jQuery.format("密碼長度不少於{0}位"),maxlength:jQuery.format("密碼長度不超過{0}位")},confirm_password:{required:"必填項",equalTo:"密碼不一致"},email:{required:"必填項",email:"格式有誤"}}});})
使用remote
可以通過event指定觸發效驗方式（可選值有keyup(每次按鍵時)，blur(當控制項失去焦點時)，不指定時就只在按提交按鈕時觸發）
$(document).ready(function(){$("#signupForm").validate({event:"keyup" || "blur"})})
如果通過指定debug為true則表單不會提交只能用來驗證(預設為提交)，可用來調試
$(document).ready(function(){$("#signupForm").validate({debug:true})})
如果在提交前還需要進行一些自訂處理使用submitHandler參數
$(document).ready(function(){$("#signupForm").validate({SubmitHandler:function(){alert("success");}})})
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
