jQuery Valdation學習

2024-04-27 15:15:48

字體：大中小

來源：轉載

供稿：網友

<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title>jQuery Validation 插件</title> <link rel="stylesheet" href="style.CSS"/></head><body><form id="demoForm"> <fieldset> <legend>用戶登錄</legend> <p id="info"></p> <p id="info2" style="display: none">輸入錯誤</p> <p> <label for="username">用戶名</label> <input type="text" id="username" name="username"/> </p> <p> <label for="passWord">密碼</label> <input type="password" id="password" name="password"/> </p> <p> <label for="confirm-password">確認密碼</label> <input type="password" id="confirm-password" name="confirm-password"/> </p> <p> <button id="check">檢查表單</button> </p> <p> <input type="submit" value="登錄"/> </p> </fieldset></form><script src="vendor/jquery-1.10.0.js"></script><script src="vendor/jquery.validate-1.13.1.js"></script><script> var validator; $(document).ready(function () { $.validator.setDefaults({ debug: true }); validator = $("#demoForm").validate({ rules: { username: { //required: true, postcode : "中國" }, password: { required: true, minlength: 2, maxlength: 16 }, "confirm-password": { equalTo: "#password" } }, messages: { username: { required: "必須填寫用戶名", minlength: "用戶名最小為2位", maxlength: "用戶名最大為10位", rangelength: "用戶名應該在2-10位", remote: "用戶名不存在" }, password: { required: "必須填寫密碼", minlength: "密碼最小為2位", maxlength: "密碼最大為16位" }, "confirm-password": { equalTo: "兩次輸入的密碼不一致" } }, submitHandler: function (form) { console.log($(form).serialize()); } }); $.validator.addMethod("postcode", function(value, element, params){ var postcode = /^[0-9]{6}$/; return this.optional(element) || (postcode.test(value)); }, $.validator.format("請填寫正確的{0}郵編！")); $("#check").click(function () { alert($("#demoForm").valid() ? "填寫正確！" : "填寫錯誤！"); }); });</script></body></html>

上一篇：常見兼容性問題總結

下一篇：使用nvm管理node