Question

所以我有这个注册表单，我用javascript检查一下。当输入正确时，我让它变色。如果所有的netrys都正确，我会让提交按钮变得可见。但问题是，当我在我的上一个文本框中时，你必须单击另一个文本框才能让代码运行，所以我在其中添加了一个额外的复选框，以便用户必须检查它，它将验证它是否正常，显示提交按钮。但是，如果我添加此复选框，整个脚本就不再适用了。

<script>
        function start(){
            var element=document.getElementById("name");
            element.style.background="yellow";
            element=document.getElementById("pass1");
            element.style.background="yellow";
            element=document.getElementById("pass2");
            element.style.background="yellow";
            element=document.getElementById("email");
            element.style.background="yellow";
            document.getElementById('button').style.visibility='hidden';
        }
        function check(obj,form){
            var check=0;
            var data1=form.pass1.value;
            var data2=form.pass2.value;
            var element=document.getElementById("pass1");
            var element2=document.getElementById("pass2");
            if(data1==data2 && data1!=null && data2!=null && data1!='' && data2!=''){
                element.style.background="green";
                element2.style.background="green";
                check++;
            }
            element=document.getElementById("name");
            data1=form.name.value;
            if(data1==null || data1==''){
                element.style.background="yellow";
            }
            else{
                element.style.background="green";
                check++;
            }
            element=document.getElementById("email");
            data1=form.email.value;
            var atpos=data1.indexOf("@");
            var dotpos=data1.lastIndexOf(".");
            if(atpos<1 || dotpos<atpos+2 || dotpos+2>=data1.length){
                element.style.background="yellow";
            }else{
                element.style.background="green";
                check++;
            }
            if(check==3){
                document.getElementById('button').style.visibility='visible';
            }else{
                document.getElementById('check').checked=false;
            }
            obj.style.background="yellow";
        }
    </script>
</head>
<body onload="start();">
    <div id="register">
    <form name="login" action="logon.php" method="post">
        Username:<input id="name" onfocus="check(this,this.form)" name="username" type="text" size="14"/><br>
        Password:<input id="pass1" onfocus="check(this,this.form)" name="password1" type="password" size="14"/><br>
        Repeat Password:<input id="pass2" onfocus="check(this,this.form)" name="password2" type="password" size="14"/><br>
        Email:<input id="email" onfocus="check(this,this.form)" name="email" type="text" size="14"/><br>
        Validate<input id="check" onfocus="check(this,this.form)" type="checkbox"/><br>
        <input type="submit" id="button" name="submit" value="Register"/>
    </form>
    </div>

Answer 1

将复选框的ID更改为其他内容。然后它将工作Ex： -

<input id="checkbox" onfocus="check(this,this.form)" type="checkbox"/>

更加用户友好的形式

1 个答案: