Question

控制台出错，请给我帮助。

这是一个带有JavaScript验证的注册表。在此所有输入都是必填项，输入的电子邮件地址应该是正确的格式。另外，在密码和确认密码中输入的值应该相同。并且在使用javascript验证后也是如此，在出现错误的文本框中显示正确的错误消息。它也没有显示错误消息。

先谢谢。

html文件

  <html>
    <head>
    <title>Registration Form..</title>
    <link rel="stylesheet" href="style.css"/>
    <script type="text/javascript" src="register.js"></script>
    </head>
    <body>
        <div class="outerContainer">
            <div class="header">
                <h3>Registration Form</h3>
            </div>
            <div class="innerContainer">
                <h5>Registration Form</h5>
                    <form name="registerform">
                        <ul>
                            <li>
                            <label>First Name:</label>
                                <input type="text" id="first" onKeyup="validate()"> <div id="errFirst"></div>
                            </li>
                            <li>
                            <label>Last Name:</label>
                                <input type="text" id="last" onkeyup="validate()"> <div id="errLast"></div>
                            </li>
                            <li>
                            <label>e-mail id:</label>
                                <input type="text" id="email" onkeyup="validate()"> <div id="errEmail"></div>
                            </li>
                            <li>
                            <label>User Id:</label>
                                <input type="text" id="uid" onkeyup="validate()"><div id="errUid"></div> 
                            </li>
                            <li>
                            <label>Password:</label>
                                <input type="password" id="pwd" onkeyup="validate()"> <div id="errPwd"></div>
                            </li>
                            <li>
                            <label>Confirm Password:</label>
                                <input type="password" id="confirm" onkeyup="validate()"> <div id="errConfirm"></div>
                            </li>
                            <li>
                                <input type="button" value="register" id="create" onclick="validate(); finalValidate();"><div id="errFinal"></div>
                            </li>
                        </ul>
                    </form>

            </div>
            <div class="footer">
                <h5>Copy rights @2017</h5>
            </div>
        </div>
    </body>
</html>

// css文件。

li{
    list-style:none;
    padding: 5px;
    margin: 10px;
}
.outerContainer {
    border: 1px solid;
    width: 500px;
    height: 550px;
    margin: 10px auto;
    background:#fffccc;
    background:img;
}
.footer, .header {
    text-align: center;
    border: 1px solid;
    margin: 5px;
    padding: 5px;
    background:#0000ff;         
}
.footer {
    font-size: 11px;
    clear:both;
    font-style:Mistral;             
}       
.innerContainer{
    border: 1px solid;
    text-align: center;
    margin: 5px;
    height:400;
    overflow: scroll;       
    padding: 5px;
    background-image:url("https://image.freepik.com/free-vector/blue-abstract-background-with-lights_1048-3309.jpg");                   
}
form{
    background:#ffccaa;
    display-block:center;
}
h5{
    text-align:center;
    color:#ff23ff;              
}
label{
    color: #464646;
    text-shadow: 0 1px 0 #fff;
    font-size: 14px;
    font-weight: bold;
}
span{
    color:#ff0000;
}

// javascript file ..

 var divs=new Array();
divs[0]="errFirst";
divs[1]="errLast";
divs[2]="errEmail";
divs[3]="errUid";
divs[4]="errPwd";
divs[5]="errConfirm";

function validate(){
    var inputs=new Array();
    inputs[0]=document.getElementById('first').value;
    inputs[1]=document.getElementById('last').value;
    inputs[2]=document.getElementById('email').value;
    inputs[3]=document.getElementById('uid').value;
    inputs[4]=document.getElementById('pwd').value;
    inputs[5]=document.getElementById('confirm').value;
    var errors= new Array();
    errors[0]="<span>Please enter your First name!</span>";
    errors[1]="<span>Please enter your Last name!</span>";
    errors[2]="<span>Please enter your e-mail-id!</span>";
    errors[3]="<span>Please enter your User Id!</span>";
    errors[4]="<span>Please enter your Password!</span>";
    errors[5]="<span>Please enter your Confirm Password!</span>";
    for(i in inputs){

        var errMsg=errors[i];
        var divMsg=divs[i];
        if(inputs[i]=="")

            document.getElementById(divMsg).innerHTML=errMsg;

        else if(i==2){
            var atpos=inputs[i].indexOf("@");
            var dotpos=inputs[i].lastIndexOf(".");
            if(atpos<1 || dotpos<atpos+2 || dotpos+2>= inputs[i].length)
                document.getElementById('errEmail').innerHTML="<span>Enter Valid e-mail adderss!!</span>";
            else
                document.getElementById(divMsg).innerHTML="OK!";
        }else if(i==5){
            var ff=document.getElementById('pwd').value;
            var ss=document.getElementById('confirm').value;
            if(ss!=ff)
                document.getElementById("errConfirm").innerHTML="<span>Your password doesnot match..!!</span>";
            else
                document.getElementById(divMsg).innerHTML="OK!";
        }else
            document.getElementById(divMsg).innerHTML="OK!";
    }

}

    function finalValidate()

    {

         var count = 0;

        for(i=0;i<6;i++)

        {

          var divMsg = divs[i];

          if(document.getElementById(divMsg).innerHTML == "OK!")

               count = count + 1;

        }

       if(count == 6)

         document.getElementById("errFinal").innerHTML = "All the data you entered is correct!!!";
        else
            document.getElementById("errFinal").innerHTML="Please enter all the required fields.!!";

    }

Answer 1

代码中的一些拼写错误，因为你在控制台中遇到错误，

在HTML文件中，

<div id="errLirst"></div>

将ID值更改为 errLast ，就像您在JS文件中所提到的那样

 document.getElementById("divMsg").innerHTML="OK!";

删除 divMsg ID的引号，因为divMsg是变量

在JS文件中，

vat dotpos=inputs[i].lastIndexOf(".");

变量dotpos的声明类型是 var 而不是var。

使用javascript进行注册表单验证

1 个答案: