提交期间的Javascript验证错误答案

【问题标题】：Javascript validation error during submit提交期间的Javascript验证错误
【发布时间】：2017-04-27 00:07:52
【问题描述】：

我为登录表单做了一个简单的 JavaScript 验证。我不希望将错误消息作为警报，尽管我设法做到了，但在提交验证时不起作用。

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>

<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>

这些是我的代码帮助，请我不了解 js

【问题讨论】：

“不工作”是什么意思？
提交时不起作用，只有 onblur 起作用
onsubmit 适用于 form 不适用于 input
那我应该用什么
stackoverflow.com/questions/11806253/… 或 stackoverflow.com/questions/16250915/…

标签： javascript

【解决方案1】：

您在输入元素上使用onsubmit 调用，这就是它不起作用的原因。在表单元素上使用onsubmit，如下所示：

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

并从您的<input type="submit"..> 按钮中删除onsubmit。此外，您不能在单个元素中多次使用一个属性。

工作一：

    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>

希望，这行得通。

【讨论】：

【解决方案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>

【讨论】：

【解决方案3】：

当您将包装设置为 "onblur" 时，您定义的函数仅在该块内定义，外部事件处理程序无法访问。

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

函数 f4(...) 致：

window.f4 = 函数(...)

希望对你有帮助

【讨论】：