电子邮件制作问题的Javascript验证

时间:2014-08-27 08:23:31

标签: javascript php forms validation

在我的项目中,我正在进行JS验证以进行注册。但在电子邮件验证后验证失败。到电子邮件验证,它工作正常。但在此之后,它没有显示任何验证代码的警报。

function signup() {

    var signupFullName        = $("#signup-full-name");
    var signupName            = $("#signup-login-name");
    var signupEmailAddress    = $("#signup-email-address");
    var signupPhoneNumber     = $("#signup-phone-number");
    var signupPassword        = $("#signup-password");
    var signupConfirmPassword = $("#signup-confirm-password");
    var signupAcceptTerms     = $("#signup-accept-terms");

    if (signupFullName[0].value == "" || signupFullName[0].value == null) {

        //alert("Please enter a valid full name.");
        alert("Please enter your full name");
        signupFullName[0].focus();

        return false;

    } else if (signupName[0].value == "" || signupName[0].value == null) {

        //alert("Please enter a valid login name.");
        alert("Please enter your login name.");
        signupName[0].focus();

        return false;

    } else if (signupEmailAddress[0].value == "" || signupEmailAddress[0].value == null) {

        //alert("Please enter a valid email address.");   
        alert("Please enter your email address.");   
        signupEmailAddress[0].focus();

        return false;

    } 
    else if(signupEmailAddress[0].value != "")  // problem in this section
    {
        email=signupEmailAddress[0].value;

       if (!(/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/).test(email))  
       {
           alert("Please enter a valid email address.");   
            signupEmailAddress[0].focus();
            return false;
       }
    }
    else if (signupPhoneNumber[0].value == "" || signupPhoneNumber[0].value == null) {

       // alert("Please enter a valid phone number.");\
        alert("Please enter your phone number.");
        signupPhoneNumber[0].focus();

        return false;

    } else if (signupPassword[0].value == "" || signupPassword[0].value == null) {

        //alert("Please enter a valid password.");
        alert("Please enter your password.");
        signupPassword[0].focus();

        return false;

    } else if (signupConfirmPassword[0].value == "" || signupConfirmPassword[0].value == null) {

        alert("Please confirm the password.");
        signupConfirmPassword[0].focus();

        return false;

    } else if (signupPassword[0].value != signupConfirmPassword[0].value) {

        //alert("Please confirm the password.");
        alert("Password mismatch");
        signupConfirmPassword[0].focus();

        return false;

    } else if ($("#signup-accept-terms")[0].checked == false) {

        alert("Please accept the terms and conditions.");
        return false;

    } else {        
        alert("Done");
        return false;

    }

}

HTML表单代码:

<form name="signup-form" id="signup-form" method="post" action="<?php echo $site_path; ?>/register" class="form-1"  onsubmit="signup();return false;">
                    <p class="field">
                        <a href="<?php echo $root_path; ?>">
                            <img src="<?php echo $theme_path;?>/images/logo.png"/>
                        </a>
                        <h4 style="margin-top:10px;color:#208CCD;">Signup</h4>
                        <br/>
                    </p>
                    <p class="field">
                        <input type="text" name="signup-full-name" id="signup-full-name" placeholder="Full name">
                        <i class="icon-user icon-large"></i>
                    </p>
                    <p class="field">
                        <input type="text" name="signup-login-name" id="signup-login-name" placeholder="User name">
                        <i class="icon-signin icon-large"></i>
                    </p>
                    <p class="field">
                        <input type="text" name="signup-email-address" id="signup-email-address" placeholder="Email address">
                        <i class="icon-inbox icon-large"></i>
                    </p>
                    <p class="field">
                        <input type="text" name="signup-phone-number" id="signup-phone-number" placeholder="Phone number">
                        <i class="icon-phone icon-large"></i>
                    </p>
                    <p class="field">
                        <input type="password" name="signup-password" id="signup-password" placeholder="Password">
                        <i class="icon-lock icon-large"></i>
                    </p>
                    <p class="field" style="margin-top:10px;">
                        <input type="password" name="signup-confirm-password" id="signup-confirm-password" placeholder="Confirm password">
                        <i class="icon-lock icon-large"></i>
                    </p>
                    <p class="field">
                        <input type="checkbox" name="signup-accept-terms" id="signup-accept-terms" style="margin-top:10px;color:#B3B3B3">
                            I accept the <a href="#">Terms and Conditions</a> and the <a href="#">Privacy Policies</a>
                        </input>
                    </p>
                    <p class="submit">
                        <button type="submit" name="submit"><i class="icon-arrow-right icon-large"></i></button>
                    </p>
                </form> 

任何人都可以帮我解决这个问题吗?提前谢谢。

4 个答案:

答案 0 :(得分:1)

我认为这是因为你使用if / else来检查字段的有效性。

因此代码一次选择一个错误 - 如果有的话。虽然您应该在要验证的所有字段中使用类似for循环的内容 我的意思是它选择了这个

} else if(signupEmailAddress[0].value != "") {

但不再属于内部检查

 if (!(/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/).test(email)) 

因为电子邮件现在还可以

答案 1 :(得分:1)

你的问题是这句话:

else if(signupEmailAddress[0].value != "")

由于电子邮件字段包含文本,因此此规则将被评估为true,因此其他其他if块将无法执行。

我会考虑将其他内容更改为个人if语句,以便他们不会互相阻止。

答案 2 :(得分:0)

如果是条件,您必须删除返回false 语句。在验证函数内部,如果任何验证失败,最后您必须返回false。这是一个例子:

var result = true;
if(condition 1){ // if condition 1 fails, make result = false;

}

if(condition 1){ // if condition 2 fails, make result = false;

}

if(condition 1){ // if condition 3 fails, make result = false;

}

return result;  // After all validations, result result

就是这样。

答案 3 :(得分:0)

使用此代码替换您的更正位置....

else if(signupEmailAddress[0].value != "" && !(/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/).test(signupEmailAddress[0].value))  // problem in this section
    {
          alert("Please enter a valid email address.");   
          signupEmailAddress[0].focus();
          return false;
    }