jQuery validate表單驗證demo
阿新 • • 發佈：2018-11-11
Query Validate 外掛為表單提供了強大的驗證功能,讓客戶端表單驗證變得更簡單,同時提供了大量的定製選項,滿足應用程式各種需求。
官方文件 http://jqueryvalidation.org/documentation/
也可以看看這裡的，講的也很詳細 http://www.runoob.com/jquery/jquery-plugin-validate.html
測試demo
提示：要想改變提示資訊的位置及樣式，可以用瀏覽器檢視修飾它的樣式，自定義覆蓋它。如提示資訊預設字型是黑色的，重寫類error，把字型改成紅色了。
程式碼：
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>jquery validate -demo</title> <style type="text/css"> .error{ color: red; } .content{ width:500px; margin-left:100px; border: solid 1px blue; text-align: left; padding-left: 50px; } </style> </head> <body> <div class="content"> <h2>jquery validate -demo</h2> <form id="submitForm"> 聯絡人：<input type="text" id="contactPerson" name="contactPerson" /><br/><br/> 電話： <input type="text" id="mobile" name="mobile" /><br/><br/> 地址： <input type="text" id="address" name="address" /><br/><br/> 郵箱： <input type="text" id="email" name="email" /><br/><br/> <input type="submit" id="submit" value="提交"/> </form> </div> <!--jq--> <script type="text/javascript" src="js/jquery.min.js" ></script> <!--validate校驗庫--> <script type="text/javascript" src="js/validate/jquery.validate.min.js" ></script> <!--國際化庫，中文提示--> <script type="text/javascript" src="js/validate/messages_zh.min.js" ></script> <!-- --> <script type="text/javascript" > $(function() { $("#submitForm").validate({ rules: { contactPerson: "required", mobile: "required", address: "required", email: "required", email:{ isEmail:true }, mobile: { isMobile:true }, messages : { mobile : { isMobile : "請正確填寫您的手機號碼" }, email : { isEmail : "請正確填寫您的郵箱地址" } } }, submitHandler: function(form) { //通過之後回撥 var p = $('#submitForm').serializeObject(); $.ajax({ type: "POST", url: "/jsonapi/base/data.json", dataType: 'json', error: function(request) { alert('新增失敗'); }, success: function(result) { console.log(result) if(result.code == 0){ alert('儲存成功'); } else { alert(result.message); } } }); }, invalidHandler: function(form, validator) { //不通過回撥 return false; } }); // 手機號碼驗證 jQuery.validator.addMethod("isMobile", function(value, element) { var length = value.length; var mobile = /^(13[0-9]{9})|(18[0-9]{9})|(14[0-9]{9})|(17[0-9]{9})|(15[0-9]{9})$/; return this.optional(element) || (length == 11 && mobile.test(value)); }, "請正確填寫您的手機號碼"); //郵箱驗證 jQuery.validator.addMethod("isEmail", function(value, element) { var tel = /^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/; return this.optional(element) || (tel.test(value)); }, "請正確填寫您的郵箱"); }); </script> </body> </html>