使用Jquery.validate做表單驗證
阿新 • • 發佈：2018-12-22
HTML示例程式碼
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>測試jQuery的validate外掛的表單</title> <!-- 1，匯入三個js檔案 --> <script type="text/javascript" src="lib/jquery.js"></script> <script type="text/javascript" src="lib/jquery.metadata.js"></script> <script type="text/javascript" src="jquery.validate.js"></script> <!-- 2，指定哪個表單在提交前要先進行驗證 --> <script type="text/javascript"> jQuery.extend(jQuery.validator.messages, { required: "請填寫本欄位", remote: "驗證失敗", email: "請輸入正確的電子郵件", url: "請輸入正確的網址", date: "請輸入正確的日期", dateISO: "請輸入正確的日期 (ISO).", number: "請輸入正確的數字", digits: "請輸入正確的整數", creditcard: "請輸入正確的信用卡號", equalTo: "請再次輸入相同的值", accept: "請輸入指定的字尾名的字串", maxlength: jQuery.validator.format("允許的最大長度為 {0} 個字元"), minlength: jQuery.validator.format("允許的最小長度為 {0} 個字元"), rangelength: jQuery.validator.format("允許的長度為{0}和{1}之間"), range: jQuery.validator.format("請輸入介於 {0} 和 {1} 之間的值"), max: jQuery.validator.format("請輸入一個最大為 {0} 的值"), min: jQuery.validator.format("請輸入一個最小為 {0} 的值") }); $(function(){ $("#myForm").validate(); }); </script> <style type="text/css"> label.error{ color: red; margin-left: 15px; } </style> </head> <body> <!-- 3，指定欄位的驗證規則 --> <form action="" id="myForm"> 名稱（必填，至少3個字元） <input type="text" name="loginName" class="required {minlength:3, messages:{required:'請輸入使用者名稱！！！'}}"><br> 密碼（必填） <input type="password" name="password" class="required"><br> 再次輸入（要和密碼一致） <input type="password" name="password2" class="{equalTo:'[name=password]'}"><br> E-mail（必填，格式要正確） <input type="text" name="email" class="required email"><br> E-mail(json) <input type="text" name="email2" class="{required:true,email:true}"><br> <input type="submit" value="提交"> </form> <hr> <a href="?">返回</a> </body> </html> <!-- <label class="error">abc</label> <font class="error">abc</font> 欄位的name值不要相同，否則指定的驗證不起作用。 -->
效果