求助！老师布置了一份提交表单的作业，我写完之后测试发现并不像预期的那样，但我不知道哪里错了，刚学javascript有好多地方不是很懂，求大佬帮帮忙！

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表单验证</title>
</head>
<body>
<style type="text/css">
span{color: red;
font-size: 0.75rem;
}
</style>
<script type="text/javascript">
window.onload=function(){
var usernameError=document.getElementById("usernameError").innerText
var passwordError=document.getElementById("passwordError").innerText
var password2Error=document.getElementById("password2Error").innerText
var emailError=document.getElementById("emailError").innerText

var usernameElt=document.getElementById("username")//获取用户名框元素
var username=usernameElt.value//获取用户名
username=username.trim()//去除前后空白
var regExp=/^[A-Za-z0-9]+$/
usernameElt.onblur=function(){
if(username){
//用户名不为空
if(username.length<=6||username.length>14){//验证用户名长度合法性
usernameError="用户名长度不合法"//用户名长度不合法
}
else if(regExp.test(username){
//用户名格式合法 
else{
usernameError="用户名格式错误"
}
}
}else{
usernameError="用户名不能为空"
}
}
usernameElt.onfocus=function(){
if(username===""){
username=""//如果用户名都是空白符则清空
}
usernameError=""//清除错误提示
}
var passwordElt=document.getElementById("password")//获取密码框元素
var password=passwordElt.value//获取密码
passwordElt.onblur=function(){//验证密码
if(password==""){
passwordError="密码不能为空"
}else if(password==username){
passwordError="密码不能与用户名重复"
}

}
passwordElt.onfocus=function(){
passwordError=""//清除错误提示

}
var password2Elt=document.getElementById("password2")//获取确认密码框
var password2=password2Elt.value//获取确认密码
password2Elt.onblur=function(){
              if(password==password2){
  //密码一致
  
  } else{
  password2Error="密码不一致"
  }
}
password2Elt.onfocus=function(){
password2Error=""//清除错误提示
}
var emailElt=document.getElementById("email")//获取邮箱框
var email=emailElt.value//获取邮箱
var regExp2=/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$///邮箱正则表达式
emailElt.onblur=function(){
   if(email===""){
   emailError.innerText="邮箱不能为空"
   }else if(regExp2.test(email)){
   //邮箱地址合法
   }else{
   emailError="邮箱地址不合法"
   }

}
document.getElementById("email").onfocus=function(){
emailError=""//清除错误提示

}
var register=document.getElementById("register")
register.onclick=function(){
usernameElt.focus()
usernameElt.blur()

passwordElt.focus()
passwordElt.blur()

password2Elt.focus()
password2Elt.blur()

emailElt.focus()
emailElt.blur()

//触发每项文本框事件
}
if((usernameError==""&&passwordError==""&&password2Error=="")&&emailError=""){
document.getElementById("Form").submit()
//提交表单

                  }else{
alert("表单内容有误！")
}

var reset=document.getElementById("reset")
reset.onclick=function(){
username=""
password=""
password2=""
email=""

}

}

</script>
<!--表单提交一般用post，这里为了检测所以用get-->
<form action="new_file.html" id="Form" method="get">
用户名<input type="text" id="username" /><span id="usernameError"></span><br />
密码<input type="password" id="password" /><span id="passwordError"></span> <br />
确认密码<input type="password" id="password2" /><span id="password2Error"></span><br />
邮箱<input type="text" id="email" /><span id="emailError"></span><br />
<input type="button" value="注册" id="register" />
<input type="button" value="重置" id="reset" />
</form>


</body>

</html>

解决方案 »

  1.   

    都是一些语法错误，比如：else if (regExp.test(username){
        //用户名格式合法 
        else {
            usernameError = "用户名格式错误"
        }
    }else是不能嵌套在else if 里的，应该和else if 并列
      

  2.   


    我又修改了几处代码，麻烦再帮我看看哪有问题
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>表单验证</title>
    </head>
    <body>
    <style type="text/css">
    span{color: red;
    font-size: 0.75rem;
    }
    </style>
    <script type="text/javascript">
    window.onload=function(){
    var usernameError=document.getElementById("usernameError").innerText
    var passwordError=document.getElementById("passwordError").innerText
    var password2Error=document.getElementById("password2Error").innerText
    var emailError=document.getElementById("emailError").innerText

    var usernameElt=document.getElementById("username")//获取用户名框元素
    var username=usernameElt.value//获取用户名
    username=username.trim()//去除前后空白
    var regExp=/^[A-Za-z0-9]+$/
    var ok=regeExp.test(username)
    usernameElt.onblur=function(){
    if(username===""){
    usernameError="用户名不能为空"
    }else if(username.length<6||username.length>14){
    usernameError="用户名长度不合法"
    }else if(!ok){
    usernameError="用户名格式不合法"
    }

    }
    usernameElt.onfocus=function(){
    if(username===""){
    username=""//如果用户名都是空白符则清空
    }
    usernameError=""//清除错误提示
    }

    var passwordElt=document.getElementById("password")//获取密码框元素
    var password=passwordElt.value//获取密码
    passwordElt.onblur=function(){//验证密码
    if(password==""){
    passwordError="密码不能为空"
    }else if(password==username){
    passwordError="密码不能与用户名重复"
    }

    }
    passwordElt.onfocus=function(){
    passwordError=""//清除错误提示

    }
    var password2Elt=document.getElementById("password2")//获取确认密码框
    var password2=password2Elt.value//获取确认密码
    password2Elt.onblur=function(){
                  if(password==password2){
      //密码一致
      
      } else{
      password2Error="密码不一致"
      }
    }
    password2Elt.onfocus=function(){
    password2Error=""//清除错误提示
    }
    var emailElt=document.getElementById("email")//获取邮箱框
    var email=emailElt.value//获取邮箱
    var regExp2=/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$///邮箱正则表达式
    emailElt.onblur=function(){
       if(email===""){
       emailError="邮箱不能为空"
       }else if(regExp2.test(email)){
       //邮箱地址合法
       }else{
       emailError="邮箱地址不合法"
       }

    }
    document.getElementById("email").onfocus=function(){
    emailError=""//清除错误提示

    }
    var register=document.getElementById("register")
    register.onclick=function(){
    usernameElt.focus()
    usernameElt.blur()

    passwordElt.focus()
    passwordElt.blur()

    password2Elt.focus()
    password2Elt.blur()

    emailElt.focus()
    emailElt.blur()

    //触发每项文本框事件

    if(usernameError!=""){
    alert("表单内容有误，无法提交")
    }else if(passwordError!=""){
    alert("表单内容有误，无法提交")
    }else if(password2Error!=""){
    alert("表单内容有误，无法提交")
    }else if(emailError!=""){
    alert("表单内容有误，无法提交")
    }else{
    alert("正在提交")
    }

    }
    var reset=document.getElementById("reset")
    reset.onclick=function(){
    username=""
    password=""
    password2=""
    email=""

    }

    }


    </script>
    <!--表单提交一般用post，这里为了检测所以用get-->
    <form action="new_file.html" id="Form" method="get">
    用户名<input type="text" id="username" /><span id="usernameError"></span><br />
    密码<input type="password" id="password" /><span id="passwordError"></span> <br />
    确认密码<input type="password" id="password2" /><span id="password2Error"></span><br />
    邮箱<input type="text" id="email" /><span id="emailError"></span><br />
    <input type="button" value="注册" id="register" />
    <input type="button" value="重置" id="reset" />
    </form>


    </body>

    </html>
      

  3.   


    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <title>表单验证</title>
    </head>
    <body>
    <style type="text/css">
    span{color: red;
    font-size: 0.75rem;
    }
    </style>
    <script type="text/javascript">
    window.onload=function(){
    var usernameError=document.getElementById("usernameError");
    var passwordError=document.getElementById("passwordError");
    var password2Error=document.getElementById("password2Error");
    var emailError=document.getElementById("emailError");

    var usernameElt=document.getElementById("username")//获取用户名框元素
    var regExp=/^[A-Za-z0-9]+$/
    usernameElt.onblur=function(){
    var username=usernameElt.value//获取用户名
    username=username.trim()//去除前后空白
    var ok=regExp.test(username)
    if(username===""){
    usernameError.innerText="用户名不能为空"
    }else if(username.length<6||username.length>14){
    usernameError.innerText="用户名长度不合法"
    }else if(!ok){
    usernameError.innerText="用户名格式不合法"
    }
    }
    usernameElt.onfocus=function(){
    usernameError.innerText=""//清除错误提示
    }

    var passwordElt=document.getElementById("password")//获取密码框元素
    passwordElt.onblur=function(){//验证密码
    var password=passwordElt.value//获取密码
    var username=usernameElt.value//获取用户名
    username=username.trim()//去除前后空白
    if(password==""){
    passwordError.innerText="密码不能为空"
    }else if(password==username){
    passwordError.innerText="密码不能与用户名重复"
    }

    }
    passwordElt.onfocus=function(){
    passwordError.innerText=""//清除错误提示

    }
    var password2Elt=document.getElementById("password2")//获取确认密码框
    password2Elt.onblur=function(){
    var password=passwordElt.value//获取密码
    var password2=password2Elt.value//获取确认密码
    if(password!=password2){
    password2Error.innerText="密码不一致"
    }
    }
    password2Elt.onfocus=function(){
    password2Error.innerText=""//清除错误提示
    }
    var emailElt=document.getElementById("email")//获取邮箱框
    var regExp2=/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$///邮箱正则表达式
    emailElt.onblur=function(){
    var email=emailElt.value//获取邮箱
       if(email===""){
       emailError.innerText="邮箱不能为空"
       }else if(!regExp2.test(email)){
       emailError.innerText="邮箱地址不合法"
       }

    }
    emailElt.onfocus=function(){
    emailError.innerText=""//清除错误提示
    }
    var register=document.getElementById("register")
    register.onclick=function(){
    usernameElt.focus()
    usernameElt.blur()

    passwordElt.focus()
    passwordElt.blur()

    password2Elt.focus()
    password2Elt.blur()

    emailElt.focus()
    emailElt.blur()

    //触发每项文本框事件

    if(usernameError.innerText!=""){
    alert("表单内容有误，无法提交")
    }else if(passwordError.innerText!=""){
    alert("表单内容有误，无法提交")
    }else if(password2Error.innerText!=""){
    alert("表单内容有误，无法提交")
    }else if(emailError.innerText!=""){
    alert("表单内容有误，无法提交")
    }else{
    alert("正在提交")
    }
    }
    }


    </script>
    <!--表单提交一般用post，这里为了检测所以用get-->
    <form action="new_file.html" id="Form" method="get">
    用户名<input type="text" id="username" /><span id="usernameError"></span><br />
    密码<input type="password" id="password" /><span id="passwordError"></span> <br />
    确认密码<input type="password" id="password2" /><span id="password2Error"></span><br />
    邮箱<input type="text" id="email" /><span id="emailError"></span><br />
    <input type="button" value="注册" id="register" />
    <input type="reset" value="重置" id="reset" />
    </form>


    </body>

    </html>