表单验证在 jQuery 中不起作用
[英]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>
1 个解决方案
解决方案1
0 2015-09-27 09:58:06
如果是 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 。 这样，浏览器本身将要求用户不要将字段留空。
用Jquery进行表单验证不起作用
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.