jQuery表單提交驗證可以有效地防止用戶提交無效或不完整的表單數據,增加網站的安全性和用戶體驗。使用jQuery庫中的verify插件可以快速實現表單提交驗證功能。
//引入jquery庫和verify插件 <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdn.bootcss.com/jquery-validate/1.19.0/jquery.validate.min.js"></script> //編寫驗證規則和錯誤提示信息 $().ready(function() { $("#myForm").validate({ rules: { name: "required", email: { required: true, email: true }, password: { required: true, minlength: 6 }, confirm_password: { required: true, minlength: 6, equalTo: "#password" } }, messages: { name: "請輸入你的姓名", email: { required: "請輸入郵箱地址", email: "請輸入正確的郵箱地址" }, password: { required: "請輸入密碼", minlength: "密碼長度不能小于6位" }, confirm_password: { required: "請再次輸入密碼", minlength: "密碼長度不能小于6位", equalTo: "兩次密碼輸入不一致" } } }); });
在HTML表單中添加相應的驗證規則和提示信息即可實現表單提交驗證。例如:
<form id="myForm"> <label>姓名</label> <input type="text" name="name"> <label>郵箱</label> <input type="email" name="email"> <label>密碼</label> <input type="password" name="password"> <label>確認密碼</label> <input type="password" name="confirm_password"> <button type="submit">提交</button> </form>
以上代碼將會實現姓名、郵箱、密碼和確認密碼的驗證和提示信息。在提交之前,如果有錯誤的輸入,會自動顯示相應的錯誤信息,如果驗證通過,則表單會提交到相應的處理頁面。通過驗證規則和提示信息的自定義設置,可以實現各種表單驗證功能。