Question

我为登录表单做了一个简单的JavaScript验证。我不想将错误消息视为警告，尽管我设法做到了这一点，但提交验证时却无效。

＆＃13;

function f1() {
    if (document.getElementById("cpassword").value != document.getElementById("password").value) {
        document.getElementById("dis").innerHTML ="*Password not match";
    } else {
        document.getElementById("dis").innerHTML ="*Correct password";
    }
}

function f2() {
    var x = document.forms["form"]["email"].value;
    var atpos = x.indexOf("@");	
    var dotpos = x.lastIndexOf(".");	
    if (atpos<1 || dotpos<atpos+2 || dotpos+2>=x.length)
	
	 {
	 
        document.getElementById("email1").innerHTML = "* Enter a valid e-mail address";
           
      }
	  
	  else
	  
	  {
	  
	   document.getElementById("email1").innerHTML = "";
	   
	  }
	  
    }

function f3()
{
var x =document.getElementById("password").value;
if (x.length <= 5)
{
document.getElementById("pass").innerHTML = "* minimum 6 characters";
}
else
{
document.getElementById("pass").innerHTML = "";
}
}

function f4()
{
var x =document.getElementById("uname").value;

if(x == "")
{
document.getElementById("name").innerHTML = "* fill name";
}
else
{
document.getElementById("name").innerHTML = "";

}
}

</script>

＆＃13;

<body>
<table border="0px">


<form action="" method="post" id="form" name="form"  >
<tr>
<td>username</td>
<td><input type="text" name="uname"  id="uname" value="" onblur="f4();"   /></td>
<td><div style="color:#FF0000" id="name" > </div></td>
</tr>
</br>
</br>
<tr>
<td>password</td>
<td><input type="password" name="password"  id="password" value="" onblur="f3();"  /></td>
<td><div style="color:#FF0000" id="pass" > </div></td>

</tr>
</br>
</br>
<tr>
<td>confirm password</td>
<td><input type="password" name="cpassword"  id="cpassword" value="" onblur="f1();"  /></td>
<td><div style="color:#FF0000" id="dis" > </div></td>
<td><div style="color:#FF0000" id="dis1" > </div></td>
</tr>
</br>
</br>
<tr>
<td> email</td>
<td><input type="text" name="email" id="email" value="" onblur="f2();"   />    </td>
<td><div style="color:#FF0000" id="email1" > </div></td>

</tr>
<tr>
<td><input type="submit" value="submit" name="submit" onsubmit="f1();" onsubmit="f2();" onsubmit="f3();" /></td>
<!--<td><input type="button" value="submit" name="submit" onclick="f2();" onclick="f1();" onclick="f3();" onclick="f4();"/></td>-->
</tr>
</form>

</table>

</body>

＆＃13;

这些是我的代码帮助，请我不知道js

Answer 1

您正在对输入元素使用onsubmit调用，这就是它无法正常工作的原因。在表单元素上使用onsubmit，如下所示：

<form action="" method="post" id="form" name="form" onsubmit="f1();f2();f3();">

＆安培;从onsubmit按钮中删除<input type="submit"..>。而且，你不能在单个元素中多次使用一个属性。

工作一：

    function f1() {
        if (document.getElementById("cpassword").value != document.getElementById("password").value) {
            document.getElementById("dis").innerHTML ="*Password not match";
        } else {
            document.getElementById("dis").innerHTML ="*Correct password";
        }
    }

    function f2() {
        var x = document.forms["form"]["email"].value;
        var atpos = x.indexOf("@");	
        var dotpos = x.lastIndexOf(".");	
        if (atpos<1 || dotpos<atpos+2 || dotpos+2>=x.length)
    	
    	 {
    	 
            document.getElementById("email1").innerHTML = "* Enter a valid e-mail address";
               
          }
    	  
    	  else
    	  
    	  {
    	  
    	   document.getElementById("email1").innerHTML = "";
    	   
    	  }
    	  
        }

    function f3()
    {
    var x =document.getElementById("password").value;
    if (x.length <= 5)
    {
    document.getElementById("pass").innerHTML = "* minimum 6 characters";
    }
    else
    {
    document.getElementById("pass").innerHTML = "";
    }
    }

    function f4()
    {
    var x =document.getElementById("uname").value;

    if(x == "")
    {
    document.getElementById("name").innerHTML = "* fill name";
    }
    else
    {
    document.getElementById("name").innerHTML = "";

    }
    }

    <body>
    <table border="0px">


    <form method="post" id="form" name="form"  onsubmit="f1();f2();f3();">
    <tr>
    <td>username</td>
    <td><input type="text" name="uname"  id="uname" value="" onblur="f4();"   /></td>
    <td><div style="color:#FF0000" id="name" > </div></td>
    </tr>
    <tr>
    <td>password</td>
    <td><input type="password" name="password"  id="password" value="" onblur="f3();"  /></td>
    <td><div style="color:#FF0000" id="pass" > </div></td>
    </tr>
    <tr>
    <td>confirm password</td>
    <td><input type="password" name="cpassword"  id="cpassword" value="" onblur="f1();"  /></td>
    <td><div style="color:#FF0000" id="dis" > </div></td>
    <td><div style="color:#FF0000" id="dis1" > </div></td>
    </tr>
    <tr>
    <td> email</td>
    <td><input type="text" name="email" id="email" value="" onblur="f2();"   />    </td>
    <td><div style="color:#FF0000" id="email1" > </div></td>

    </tr>
    <tr>
    <td><input type="submit" value="submit" name="submit"/></td>
    </tr>

希望，这有效。

Answer 2

创建一个函数来调用所有函数：

function validate() {
    f1();
    f2();
    f3();
}

同时更改HTML行

<form method="post" id="form" name="form"  onsubmit="validate();">

从输入标记

中删除onsubmit（）

<td><input type="submit" value="submit" name="submit" /></td>

Answer 3

当您将包装设置为＆＃34; onblur＆＃34; ，您定义的函数仅在该块内定义，并且不能由外部事件处理程序访问。

最简单的解决方法是改变：

功能f4（...）到：

window.f4 = function（...）

希望能帮到你

提交期间的Javascript验证错误

3 个答案: