表单验证问题

时间:2014-06-25 22:16:28

标签: javascript forms validation

    <div id="form">
    <form method="post" action="register1.aspx" onsubmit="return validateForm();"name="register1"      >

    <h1>
        Register to exess the site</h1>

    <input type="text" name="firstname" class=" br"/>
    <em>First name</em><br />
    <span id="firstnmsg"></span><br />
    <input type="text" name="lastname" class=" br" /><em>Last name</em><br />
    <span id="lastnmsg"></span><br />
    <input type="text" name="username" class=" br" /><em>username</em><br>
    <span id="usermsg"></span><br />
    <input type="password" name="password" class=" br" /><em>password</em><br />
    <input type="password"name="password1" class=" br" /><em>Confirm password</em>
    <span id="pass1msg"></span><br />
    <input type="text" name="email" class=" br"/><em>Email!</em><br />
    <span id="emailmsg"></span><br />
    <select name="sex">
        <option>Please select a Gender</option>
        <option>Male</option>
        <option>Female</option>
        <em>Gender</em>
    </select><br />
    <input type="submit" name="submit" value="Register " onclick="return validateForm();"  />
    <input type="reset" name="reset" value="Reset"  onclick="return resetMsg();"/>
    </form>
   <span> <%=Session["regstatus"] %></span>
</div>


     <div id="log_in">
     <h1><em>log in</em></h1>
     <form action="WebForm2.aspx"method="post" name="log_in" onsubmit="return     validateloginform"><br />
      <span id="usernamemsg"><%=Session["usernamemsg"] %> </span><input type="text" name="username_1" class="br" /><em>Username</em><br />
       <span id="passwordmsg"><%=Session ["passwordmsg"] %></span><input type="password" name="password_1" class="br" /><em>Password</em><br />
     <input type="submit" name="submit2"  onclick=" validateloginform"/>
     </form>
     </div>
     <script type="text/javascript">

     function isEmpty(str) {

return (str.length == 0);
}
function isNumeric(str) {

var c = true;
for (var i = 0; i < str.length; i++) {
    c = !(isNaN(str[i]));
}
return c;
}
function isValid(str) {

var badChar = "\\;:!@#$%^&*()-_=+`~<>?[]{}|/,.";
for (var l = 0; l < str.length; l++) {
    for (var c = 0; c < badChar.length; c++) {
        if (str[l] == badChar[c]) {
            return true;
        }
        if (str[l] == " " || str[l] == "\"" || str[l] == "\'") {
            return true;
        }
    }
    }
 return false;
 }
 function isShort(str) {
  return (str.length < 3);
}
    //Reset Error Messages Function -->
function resetMsg() {

document.getElementById("firstnmsg").innerHTML = "";
document.getElementById("lastnmsg").innerHTML = "";
document.getElementById("usermsg").innerHTML = "";
document.getElementById("passwordmsg").innerHTML = "";
document.getElementById("pssword1msg").innerHTML = "";
document.getElementById("emailmsg").innerHTML = "";
document.getElementById("BdateMsg").innerHTML = "";
document.getElementById("UnameMsg").innerHTML = "";
document.getElementById("PwdMsg").innerHTML = "";
document.getElementById("LoginError").innerHTML = "";
return true;
}
 //Main Sign Up Form Validation Function -->
function validateForm() {
resetMsg();
var val = true;
//First Name Validation ---------------------------------------->
if (isEmpty(register1.firstname.value)) {
    document.getElementById("firstnmsg").innerHTML = " Empty";
    val = false;
}
else {
    if (isNumeric(register1.firstname.value) || isValid(signup.firstname.value)) {
        document.getElementById("firstnmsg").innerHTML = " Letters Only";
        val = false;
    }
    else {
        if (isShort(register1.firstname.value)) {
            document.getElementById("firstnmsg").innerHTML = " Too Short";
            val = false;
        }
    }
}
//Last Name Validation ------------------>
if (isEmpty(register1.lastname.value)) {
    document.getElementById("lastnmsg").innerHTML = " Empty";
    val = false;
}
else {
    if (isNumeric(register1.lastname.value) || isValid(signup.lastname.value)) {
        document.getElementById("lastnmsg").innerHTML = " Letters Only";
        val = false;
    }
    else {
        if (isShort(register1.lastname.value)) {
            document.getElementById("lastnmsg").innerHTML = " Too Short";
            val = false;
        }
    }
}
//Username Validation --------------------------------------------->
if (isEmpty(register1.username.value)) {
    document.getElementById("usermsg").innerHTML = " Empty";
    val = false;
}
else {
    if (!isNumeric(register1.username.value)) {
        document.getElementById("usermsg").innerHTML = " Use Numbers";
    }
    else {
        if (isShort(register1.username.value)) {
            document.getElementById("usermsg").innerHTML = " Too Short";
            val = false;
        }
    }
}
//Password Validation ----------------------------------------------->
if (isEmpty(register1.password1.value)) {
    document.getElementById("Password1Msg").innerHTML = " Empty";
    val = false;
}
else {
    if (isValid(register1.password.value)) {
        document.getElementById("Password1Msg").innerHTML = " Invalid";
    }
    else {
        if (register1.password.value == register1.password1.value) {
            if (signup.password1.value.length < 6 && signup.password1.value != "") {
                document.getElementById("pass1msg").innerHTML = " Too Short";
                val = false;
            }
        }
        else {
            document.getElementById("pass1msg").innerHTML = " Don't Match";
            val = false;
        }
    }
}
//Email Validation -------------------------------------->
var EmailField = document.forms["register1"]["email"].value;
var atpos = EmailField.indexOf("@");
var dotpos = EmailField.lastIndexOf(".");
if (atpos < 1 || dotpos < atpos + 2 || dotpos + 2 >= EmailField.length) {
    document.getElementById("emailmsg").innerHTML = " Invalid Email";
    val = false;
}
if (EmailField == null || EmailField == "") {
    document.getElementById("emailmsg").innerHTML = " Empty";
    val = false;
}

  //Main Login Validation Function -->
function validateLoginForm() {
resetMsg();
var val = true;
//Username Validation
if (isEmpty(log_in.username.value)) {
    document.getElementById("usernamemsg").innerHTML = " Empty";
    val = false;
}
//Password Validation
if (isEmpty(log_in.password.value)) {
    document.getElementById("passwordmsg").innerHTML = " Empty";
    val = false;
}
return val;
}
     </script>

验证不起作用,我不知道为什么。这是一个学校项目。 我的主要问题是当我提交表单时脚本没有运行,当表单上有一些错误时(用户提交的内容)它仍然会进入下一页并且没有显示innerHtml按钮。

1 个答案:

答案 0 :(得分:0)

在这里,我完成了你的代码,重新编写了很多代码,写了一些关于如何改进代码的评论。

表单提交停止的原因是返回false。您正在返回一个名为val的变量,如果有一个错误,该变量设置为false,从而返回false并阻止表单提交。

我建议将JS放入文本编辑器并阅读所有内容。你应该学到很多东西。

这是:http://jsfiddle.net/2x5LU/

我刚做名字因为我现在必须工作,但你应该可以解决这个问题。

function validateForm(){
    resetMsg();
    var val = true;

    if(isEmpty(firstName.value)){
        firstNameMsg = 'Empty';
        val = false;
    }else if(isNumeric(firstName.value)){
        firstNameMsg = 'Letters Only';
        val = false;
    }else if(isShort(firstName.value)){
        firstNameMsg = 'Too Short';
        val = false;
    }

    return val;
}