Question

我的jquery表格验证问题。

这里有四个字段USERNAME，EMAIL，PASSWORD，CONFIRM PASSWORD。但前两个字段将被验证第三个字段将无法验证。我不知道是什么原因。？代码如下所示......

$(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>

Answer 1

此代码块：

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;
}

我的jquery表单验证中的问题

1 个答案: