首頁 > 開發者 > JavaScript
jquery validate demo 基礎，jqueryvalidate
jQuery Validate 外掛程式為表單提供了強大的驗證功能，讓用戶端表單驗證變得更簡單，同時提供了大量的定製選項，滿足應用程式各種需求。該外掛程式捆綁了一套有用的驗證方法，包括 URL 和電子郵件驗證，同時提供了一個用來編寫使用者自訂方法的 API。所有的捆綁方法預設使用英語作為錯誤資訊，且已翻譯成其他 37 種語言。
下面通過一段代碼demo給大家講解jquery validate ，具體代碼如下所示：
<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <script type="text/javascript" src="js/jquery-1.11.1.js"></script> <script type="text/javascript" src="js/jquery.validate-1.14.0.js"></script> <script type="text/javascript"> $().ready(function() { var validate= $("#signupForm").validate({ rules: { firstname: "required", email: { required: true, email: true }, password: { required: true, minlength: 5 }, confirm_password: { required: true, minlength: 5, equalTo: "#password" } }, messages: { firstname: "請輸入姓名", email: { required: "請輸入Email地址", email: "請輸入正確的email地址" }, password: { required: "請輸入密碼", minlength: "密碼不能小於{0}個字 符" }, confirm_password: { required: "確認密碼", minlength: "確認密碼不能小於5個字元", equalTo: "兩次輸入密碼不一致不一致" } }, //把錯誤資訊放到一處處理與 errorPlacement 函數連用 groups:{ login:"firstname email password confirm_password" }, errorPlacement:function(error,element){ error.insertBefore("#error_info"); }, //提交表單後焦點在第一個錯誤表單內 focusInvalid:true, //指定錯誤提示的css類名 errorClass:"error_info", //指定驗證通過的css類名 validClass:"success_info", //驗證通過提交表單 submitHandler:function(form){ console.info("提交表單"+$(form).serialize()); }, invalidHandler:function(event,validator){ console.info("表單錯誤"+validate.numberOfInvalids()); }, // 取消某個元素的校正 ignore:"#firstname", onfocusout:function(){ return false; } }); $("#check").click(function(){ var flag1=$("#signupForm").valid();//檢查表單是否有效 var flag2=$("#firstname").rules();//查詢元素的校正規則 var flag3=$("#firstname").rules("add",{minlength:2,maxlength:10});//添加元素的校正規則 var flag4=$("#firstname").rules("remove","minlength");//刪除元素的校正規則 var flag5=validate.form();//驗證表單是否有效 var flag6=validate.element("#firstname");//驗證表單某個元素是否有效 validate.resetForm();//恢複表單原來的狀態 var flag7=validate.numberOfInvalids();//獲得錯誤元素個數 console.info(flag7); }); //針對某個元素顯示特定的提示資訊 validate.showErrors({ firstname:"ERROR" }); }); </script></head><body> <form id="signupForm" method="get" action=""> <p id="error_info"> <label for="firstname">Firstname</label> <input id="firstname" name="firstname" /> </p> <p> <label for="email">E-Mail</label> <input id="email" name="email" /> </p> <p> <label for="password">Password</label> <input id="password" name="password" type="password" /> </p> <p> <label for="confirm_password">確認密碼</label> <input id="confirm_password" name="confirm_password" type="password" /> </p> <p> <input class="submit" type="submit" value="Submit"/> </p> <p> <input class="c" type="button" value="檢查表單是否有效" id="check"/> </p></form></body></html>
以上就是本文的全部內容，代碼簡單明了，非常具有參考借鑒價值，希望大家喜歡。
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
