javascript - 在javascript中验证后无法提交表单

Question

救命，我正在尝试验证我的表单。它可以验证所有字段，但验证后不提交。我尝试运行 http://jsfiddle.net/CrLsR/297/ 中的代码但在验证表单后，它无法继续到 test.html 页面。我是 javascript 新手，所以我不知道问题是什么。任何帮助将非常感激。谢谢..

这是代码:

//HTML 表单

<form name="form" id="form" onsubmit="return (validateForm(this));" action="test.htm" method="post">

<label for="firstname" id="errfName">First Name</label>
<li><input name="firstname" type="text" onkeyup="return(validatefName(this));"> <span id="warnfName"></span></li>

<label for="username" id="errUser">Username</label>
<li><input name="username" type="text" onkeyup="return(validateUsername(this));"> <span id="warnUser"></span></li>

<label for="password" id="errPass">Password</label></li>
<li><input name="password" id="password" type="password" onkeyup="return(validatePassword(this));"> <span id="warnPass"></span></li>

<label for="password2" id="errPass2">Confirm Password</label></li>
<li><input name="password2" id="password2" type="password" onkeyup="return(validatePassword2(this));"> <span id="warnPass2"></span></li>

<label for="email" id="errEmail">Email Address</label>
<li><input name="email" type="text" onkeyup="return(validateEmail(this));"> <span id="warnEmail"></span></li>

<li>&nbsp;</td>
<li><input name="Submit" value="Send" type="submit" ></li>

//JavaScript 代码

var borderErr = "1px solid rgb(100,0,50)";
var borderOk = "1px solid rgb(0,150,50)";
var warn = "<b class='warn'>!</b>";

// for First Name validation
var matchfName = /^[a-zA-Z]$/;
var errorfNameEmpty = "<b class='err'>First name is required";

// for Username validation
var matchUsername = /^[A-Za-z][A-Za-z0-9]*(?:_[A-Za-z0-9]+)*$/;
var matchUsername2 = /^[a-z0-9_-]{5,15}$/;
var errorUsernameEmpty = "<b class='err'>Username is required\n</b>";
var errorUsernameInvalid = "<b class='err'>The username is not valid. Must contains 5 to 15 alpha numeric characters\n</b>";

// for Password validation
var matchPass = /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[^a-zA-Z0-9])(?!.*\s).{7,15}$/;
var errPassEmpty = "<b class='err'>Password is required</b>";
var errPassInvalid = "<b class='err'>Password must contains with a combination of <br/>7 to 15 alpha numeric and special characters.";

// for Confirm Password validation
var errPassEmpty2 = "<b class='err'>Confirm password is required</b>";
var errPassInvalid2 = "<b class='err'>Confirm password must the same as password value.";

// for Email validation
var matchEmail = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
var errEmailEmpty = "<b class='err'>Email address is required</b>";
var errEmailInvalid = "<b class='err'>Invalid email address. Please enter a valid email.";

 function validateForm(regForm) {
    var warning = "";
warning += validatefName(regForm.firstname);
warning += validateUsername(regForm.username);
warning += validatePassword(regForm.password);
warning += validatePassword2(regForm.password2);
warning += validateEmail(regForm.email);
if (warning != "") {
return false;   
}
return true;
}
// validate first name

function validatefName(fld) {
if(fld.value == "") {
    fld.style.border=borderErr;
    document.getElementById("errfName").innerHTML=errorfNameEmpty;
    document.getElementById("warnfName").innerHTML=warn;
        return false;
}
else {
    fld.style.border=borderOk;
    document.getElementById("errfName").innerHTML="First Name";
    document.getElementById("warnfName").innerHTML="";
        return true;
}   
}

//validate username

function validateUsername(fld) {
if (fld.value == "") {
    fld.style.border=borderErr;
    document.getElementById("errUser").innerHTML=errorUsernameEmpty;
    document.getElementById("warnUser").innerHTML=warn;
        return false;
    }  
else if ((!matchUsername.test(fld.value)) || (!matchUsername2.test(fld.value))) {
    fld.style.border=borderErr;
    document.getElementById("errUser").innerHTML=errorUsernameInvalid;
    document.getElementById("warnUser").innerHTML=warn;
        return false;
     } 
else {
    document.getElementById("errUser").innerHTML="Username";
    document.getElementById("warnUser").innerHTML="";
    fld.style.border=borderOk;
        return true;
     } 
}

 // validate password

function validatePassword(fld) {
if (fld.value == "") {
    fld.style.border=borderErr;
    document.getElementById("errPass").innerHTML=errPassEmpty;
    document.getElementById("warnPass").innerHTML=warn;
        return false;
}
else if (!matchPass.test(fld.value)) {
    document.getElementById("errPass").innerHTML=errPassInvalid;
    document.getElementById("warnPass").innerHTML=warn; 
    fld.style.border=borderErr;
        return false;
 }
else {
    fld.style.border=borderOk;
    document.getElementById("errPass").innerHTML="Password";
    document.getElementById("warnPass").innerHTML="";
        return true;
    }
} 
 // validate confirm password

function validatePassword2(fld) {
var passVal = document.getElementById("password").value;
if (fld.value == "") {
    fld.style.border=borderErr;
    document.getElementById("errPass2").innerHTML=errPassEmpty2;
    document.getElementById("warnPass2").innerHTML=warn;
        return false;
}
else if (passVal != fld.value) {
    document.getElementById("errPass2").innerHTML=errPassInvalid2;
    document.getElementById("warnPass2").innerHTML=warn; 
    fld.style.border=borderErr;
        return false;
}
else {
    fld.style.border=borderOk;
    document.getElementById("errPass2").innerHTML="Confirm Password";
    document.getElementById("warnPass2").innerHTML="";
        return true;
    }
}  

 // validate email address

function validateEmail(fld) {
    if (fld.value == "") {
    fld.style.border=borderErr;
    document.getElementById("errEmail").innerHTML=errEmailEmpty;
    document.getElementById("warnEmail").innerHTML=warn; 
        return false;
    } 
else if (!matchEmail.test(fld.value)) { 
    fld.style.border=borderErr;
    document.getElementById("errEmail").innerHTML=errEmailInvalid;
    document.getElementById("warnEmail").innerHTML=warn; 
        return false;
    } 
else {
    fld.style.border=borderOk;
    document.getElementById("errEmail").innerHTML="Email Address";
    document.getElementById("warnEmail").innerHTML=""; 
        return true;
    }
 }

Answer 1

当您的内部验证方法返回 true 或 false 时，您需要将您的父验证方法修改为此或类似的方法。

function validateForm(regForm) {
    var formValid = true;
    formValid &= validatefName(regForm.firstname);
    formValid &= validateUsername(regForm.username);
    formValid &= validatePassword(regForm.password);
    formValid &= validatePassword2(regForm.password2);
    formValid &= validateEmail(regForm.email);
    if (!formValid) {
        return false;   
    }
    return true;
}