Question

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

这是代码：

// HTML FORM

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

Answer 2

尝试更改此行

var warning = "";
warning += validatefName(regForm.firstname);
warning += validateUsername(regForm.username);
warning += validatePassword(regForm.password);
warning += validatePassword2(regForm.password2);
warning += validateEmail(regForm.email);
if (warning != "") {

到这一行

if(validatefName(regForm.firstname) == true && validateUsername(regForm.username) == true && validatePassword(regForm.password) == true && validatePassword2(regForm.password2) == true && validateEmail(regForm.email) == true) {

并查看现在是否正确

Answer 3

根据您的小提琴，我在条件中发现了一些错误

if (title=="" || title==null) { } else {
            alert("Please enter only alphanumeric values for your advertisement title");

}

应该是

if (title.length != 0) { } else {
            alert("Please enter only alphanumeric values for your advertisement title");
            return false;
  }

第二种方法是检查字段是否没有值的更有效方法。

我还在你的其他条件中添加了return false，最后一次返回应该是true。这是你的validateForm函数。我更新了您的fiddle here

  function validateForm() {
        // Validate Email
        var email = $("#fremail").val();


        if ((/(.+)@(.+){2,}\.(.+){2,}/.test(email)) || email.length != 0) {

        } else {
            alert("Please enter a valid email");
            return false;
        }


        // Validate Title
        var title = $("#frtitle").val();

        if (title.length != 0) {} else {
            alert("Please enter only alphanumeric values for your advertisement title");
            return false;
        }


        // Validate URL
        var url = $("#frurl").val();
        if (validateURL(url)) {} else {
            alert("Please enter a valid URL, remember including http://");
            return false;
        }



        return true;
    }

Answer 4

在函数 validateForm（）

中设置 Flag = 1

增量标记，如果有验证错误

结束，返回true ，如果标记== 1 ，则表示没有错误

function validateForm()
{
    var flag = 1;

    // Validate URL
    var url = $("#frurl").val();
    if (validateURL(url)) { } else {
        alert("Please enter a valid URL, remember including http://");
        flag++;
    }

    // Validate Title
    var title = $("#frtitle").val();
    if (title=="" || title==null) { } else {
        alert("Please enter only alphanumeric values for your advertisement title");
        flag++;
    }

    // Validate Email
    var email = $("#fremail").val();
    if ((/(.+)@(.+){2,}\.(.+){2,}/.test(email)) || email=="" || email==null) { } else {
        alert("Please enter a valid email");
        flag++;
    }

    if (flag == 1)
    return true;
    else     
    return false;
}

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

4 个答案: