我的 jquery 表单验证出现问题。
这里有四个字段:用户名、电子邮件、密码、确认密码。但前两个字段将被验证，第三个字段将不会被验证。我不知道是什么原因。？ 代码如下所示...
$(document).ready(function() {
$('#signup').click(function(){
if(validateSignUpForm()) alert('valid form');
else alert('validation error');
});
});
function IsEmail() {
var emails=document.forms["signUpForm"]["email"].value;
var regex = /^([a-zA-Z0-9_.+-])+\@(([a-zA-Z0-9-])+\.)+([a-zA-Z0-9]{2,4})+$/;
var valid= regex.test(emails);
if(!valid){
alert("Email not valid..");
return false;
} else {
return true;
}
}
function validateSignUpForm() {
var isValid = true;
var errorMessage = '';
var username = $('#username').val();
var email = $('#email1').val();
var pass1 = $('#password1').val();
var pass2 = $('#confirmpass1').val();
if(!username) {
isValid = false;
errorMessage += ' \n * Please enter a user name.';
}
if(!email) {
isValid = false;
errorMessage += ' \n * Please enter your email.';
}
else {
return IsEmail();
}
if(!pass1){
isValid = false;
errorMessage += ' \n * Please enter your password..';
}
if(!isValid) {
alert('You have some validation errors. Please fix the following errors to continue.'+errorMessage);
}
return isValid;
}
</script>
</head>
<body>
<div id="wrapper">
<div id="titlebar">
<img src="img/title.PNG" width="300px" height="25px"/>
<form method="post" name="signUpForm" id="signUp" >
</div>
<div id="username_cont">
<!-- <img src="img/username.PNG" width="250px" height="30px"/>-->
<input type="text" class="inputpassword" placeholder="username" name="username" id="username"/>
</div>
<div id="email">
<input type="email" class="inputpassword" placeholder="email" name="email" id="email1"/>
</div>
<div id="password">
<input type="password" class="inputpassword" placeholder="password" name="password" id="password1"/>
</div>
<div id="confirmpwd">
<input type="password" class="inputpassword" placeholder="confirm password" name="confirmpassword" id="confirmpass1" onkeyup="return checkPass(); return false;"/>
</div>
<div id="signupConfirm">
<button type="button" name="submit" id="signup">
<img src="img/signUPlogin.PNG" width="230px" height="30px">
</button>
</div>
</form>
</div>
</body>
最佳答案
此代码块:
if (!email) {
isValid = false;
errorMessage += ' \n * Please enter your email.';
}
else {
return IsEmail();
}
如果电子邮件无效，您设置 isValid至false并更新验证消息，但如果它有效，您只需返回，之后的代码将不会被执行。只需将其更改为:
if (!iIsEmail()) {
isValid = false;
errorMessage += ' \n * Please enter your email.';
}
此外你的IsEMail()函数将从 <div> 读取值，不是来自 <input> 。将其更改为:
function IsEmail(emails) {
// Remove this line:
// var emails=document.forms["signUpForm"]["email"].value;
...
}
它将像这样使用:
if (!iIsEmail(email)) {
isValid = false;
errorMessage += ' \n * Please enter your email.';
}
此外请注意，您不会检查密码和确认密码是否相同。将所有验证代码放在一起将是(类似于):
function IsEmail(email) {
var regex = /^([a-zA-Z0-9_.+-])+\@(([a-zA-Z0-9-])+\.)+([a-zA-Z0-9]{2,4})+$/;
return regex.test(email);
}
function validateSignUpForm() {
var isValid = true;
var errorMessage = '';
var username = $('#username').val();
var email = $('#email1').val();
var pass1 = $('#password1').val();
var pass2 = $('#confirmpass1').val();
if (!username) {
isValid = false;
errorMessage += ' \n * Please enter a user name.';
}
if (IsEmail(email)) {
isValid = false;
errorMessage += ' \n * Please enter your email.';
}
if (!pass1) {
isValid = false;
errorMessage += ' \n * Please enter your password..';
}
if (!pass2) {
isValid = false;
errorMessage += ' \n * Please confirm your password..';
}
if (pass1 != pass2) {
isValid = false;
errorMessage += ' \n * Password and confirmation must match.';
}
if (!isValid) {
alert('You have some validation errors. Please fix the following errors to continue.'+errorMessage);
}
return isValid;
}
关于javascript - 我的 jquery 表单验证中出现问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26377558/