[英]Form validation not working in jQuery
這是 jQuery 表單驗證(html、css 和 jQuery),但代碼不能用於所有 if 語句和我無法修復的錯誤消息。
$("#validationForm").submit(function(event) { var errorMessage = ""; event.preventDefault(); function isValidEmailAddress(emailAddress) { var pattern = new RegExp(/^((([az]|\\d| [!#\\$%&'\\*\\+\\-\\/=\\?\\^_`{\\|}~]|[\ -\\豈-\﷏\ﷰ-\])+(\\.([az]|\\ d|[!#\\$%&'\\*\\+\\-\\/=\\?\\^_`{\\|}~]|[\ -\\豈-\﷏\ﷰ-\]) +)*)|((\\x22)((((\\x20|\\x09)*(\\x0d\\x0a))?(\\x20|\\x09)+)?(([\\x01-\\x08\\x0b\\x0c\\x0e- \\x1f\\x7f]|\\x21|[\\x23-\\x5b]|[\\x5d-\\x7e]|[\ -\\豈-\﷏\ﷰ- \])|(\\\\([\\x01-\\x09\\x0b\\x0c\\x0d-\\x7f]|[\ -\\豈-\﷏\ﷰ- \]))))*(((\\x20|\\x09)*(\\x0d\\x0a))?(\\x20|\\x09)+)?(\\x22)))@((([az]|\\d| [\ -\\豈-\﷏\ﷰ-\])|(([az]|\\d|[\ -\\豈- \﷏\ﷰ-\])([az]|\\d|-|\\.|_|~|[\ -\\豈-\﷏\ﷰ- \])*([az]|\\d|[\ -\\豈-\﷏\ﷰ-\])))\\.)+(([az]| [\ -\\豈-\﷏\ﷰ-\])|(([az]|[\ -\\豈-\﷏ \ﷰ-\])([az]|\\d|-|\\.|_|~|[\ -\\豈-\﷏\ﷰ- \])*([az]|[\ -\\豈-\﷏\ﷰ-\])))\\.?$/i); return pattern.test(emailAddress); }; if (!isValidEmailAddress($("#email").val())) { errorMessage = "<br />Please enter a valid email address"; } if (!$.isNumeric($("#phone").val())) { errorMessage = errorMessage + "<br />Please enter a valid phone number"; } if ($("#pass1").val() != $("#pass2").val()) { errorMessage = errorMessage + "<br />Please enter matching passwords"; } if (errorMessage == "") { alert("Success!"); } else { $("#error").html(errorMessage); } });
#wrapper { width: 600px; margin: 0 auto; font-family: helvetica; font-size: 1.2em; } input { width: 300px; height: 30px; padding: 5px; border-radius: 5px; font-size: 1.2em; border: 1px solid grey; margin-bottom: 10px; } label { width: 200px; float: left; padding-top: 7px; } #submitButton { height: 50px; margin-left: 200px; width: 100px; } #error { color: red; margin: 20px; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <body> <div id="wrapper"> <div id="error"></div> <form id="validationForm"> <label for="email">Email</label> <input name="email" id="email" /> <label for="phone">Telephone</label> <input name="phone" id="phone" /> <label for="pass">Password</label> <input name="pass" type="password" id="pass1" /> <label for="pass">Confirm Password</label> <input name="pass" type="password" id="pass2" /> <input id="submitButton" type="submit" value="Submit" /> </form> </div> </body>
如果是 HTML5,並且您希望最終用戶的瀏覽器支持 HTML5 引擎,則可以為input
元素使用適當的類型屬性:
$("#validationForm").on('submit', function(event) { var errorMessage = ""; event.preventDefault(); if (!$.isNumeric($("#phone").val())) { errorMessage = errorMessage + "<br />Please enter a valid phone number"; } if ($("#pass1").val() !== $("#pass2").val()) { errorMessage = errorMessage + "<br />Please enter matching passwords"; } if (errorMessage == "") alert("Success!"); else $("#error").html(errorMessage); });
#wrapper { width: 600px; margin: 0 auto; font-family: helvetica; font-size: 1.2em; } input { width: 300px; height: 30px; padding: 5px; border-radius: 5px; font-size: 1.2em; border: 1px solid grey; margin-bottom: 10px; } label { width: 200px; float: left; padding-top: 7px; } #submitButton { height: 50px; margin-left: 200px; width: 100px; } #error { color: red; margin: 20px; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <body> <div id="wrapper"> <div id="error"></div> <form id="validationForm"> <label for="email">Email</label> <input name="email" id="email" type='email' required /> <label for="phone">Telephone</label> <input name="phone" id="phone" type='tel' required /> <label for="pass">Password</label> <input name="pass" type="password" id="pass1" required /> <label for="pass">Confirm Password</label> <input name="pass" type="password" id="pass2" /> <input id="submitButton" type="submit" value="Submit" /> </form> </div> </body>
請注意,我相應地使用了type='email'
和type='tel'
。 此外,我已將字段默認為required
。 這樣,瀏覽器本身將要求用戶不要將字段留空。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.