Question

我写了一个简单的脚本来验证登录表单，如下所示：

<script type="text/javascript">
    function validateLoginForm(){
    var idV = document.forms["LoginForm"]["id"].value;
    var pwdV = document.forms["LoginForm"]["pwd"].value;

    if (idV == null || idV == "" || idV.length < 5) {
          alert("user ID must be filled and of more than 4 characters!!");
          id.focus();
          return false;
    }

    if (pwdV == null || pwdV == "" || pwdV.length < 5) {
        alert("Password must be filled and of more than 4 characters!!");
        pwd.focus();
        return false;
    }

    return true;
}
</script>

并将其命名为：

<form name="LoginForm" method="POST" onsubmit="return validateLoginForm()" action="Login" >
.
.
.
.
</form>

问题是javaScript在正确设置时发出警报但最终Login servlet也自动调用，这是错误的。为什么会发生这种情况？任何解决方案？

Answer 1

重定向到登录是因为你有js错误。

您不定义变量id和psw。

因此，当您尝试id.focus()或psw.focus()时，您有js错误并默认返回

所以添加以下代码：

var id = document.forms["LoginForm"]["id"];
var pwd = document.forms["LoginForm"]["pwd"];
var idV = document.forms["LoginForm"]["id"].value;
var pwdV = document.forms["LoginForm"]["pwd"].value;

Answer 2

试试这个，

<script type="text/javascript">
    function validateLoginForm(){
    var idV = document.forms["LoginForm"]["id"].value;
    var pwdV = document.forms["LoginForm"]["pwd"].value;
    var err = '';
    if (idV == null || idV == "" || idV.length < 5) {
          err = "user ID must be filled and of more than 4 characters!! \n";
          document.getElementById("id").focus()
    }

    if (pwdV == null || pwdV == "" || pwdV.length < 5) {
        err  = "Password must be filled and of more than 4 characters!! \n";
         document.getElementById("pwd").focus()
    }
    if(err == '')
        return true;
    else
      {
        alert(err);
        return false;
      }
}
</script>

Answer 3

如果没有你输入表单的全部内容我无法确定，但我会在这里做出很好的猜测。我要说你的用户ID和密码字段的标签只有名称属性吗？

在HTML中处理表单时，必须使用'name ='将参数名称传递给接收脚本。这就是为您的脚本提供URL中的id = blah＆amp; pwd = blah位或作为后期数据有效负载。

然而....

当您在脚本中使用DOM（文档对象模型）访问值时，您需要使用'id ='属性标识元素。

对于您需要在js中使用脚本方法访问的文档中任何位置的任何元素都是如此。

如果你也注意到了，你得到警报，但是由于没有返回false，你的焦点调用也永远不会被调用，这将导致你的脚本中止，因为找不到名为'id'的元素

在输入标记中的name =“id”和name =“pwd”属性旁边添加id =“id”和id =“pwd”，您会发现所有属性都可以按预期工作。 EG：

    <input type="text" name="id" id="id" ... />

最后一点，我鼓励你使用像jQuery这样的东西重新编写这个函数，你会发现模型更加直观，对平台友好。

Answer 4

我在这里创建了一个最小的测试用例：http://www.pauldwaite.co.uk/test-pages/7723381/

<script>
function pretendValidation(){
    alert("Validatation failed!");
    return false;
}
</script>

<form action="http://www.google.co.uk/" method="POST" onsubmit="return pretendValidation();">
    <input type="submit" value="Submit">
</form>

当我点击“提交”时，警报就会发生，表单也不会提交。所以从理论上讲，你的代码应该可行。

作为@Shawty mentioned，您的表单HTML可能有问题。如果您也发布了所有HTML，我们可以检查一下。

Answer 5

最佳实践：如果您想保证不提交表单，即使您的Javascript抛出异常，也应该将代码包装在try / catch块中：

<script type="text/javascript">


function validateLoginForm(){
  try{
    var idV = document.forms["LoginForm"]["id"].value;
    var pwdV = document.forms["LoginForm"]["pwd"].value;

    if (idV == null || idV == "" || idV.length < 5) {
      alert("user ID must be filled and of more than 4 characters!!");
      id.focus();
      return false;
    }

    if (pwdV == null || pwdV == "" || pwdV.length < 5) {
      alert("Password must be filled and of more than 4 characters!!");
      pwd.focus();
      return false;
    }
 }catch(e){
   console.log(e);
   return false;
 }

return true;
}
</script>

Answer 6

嗯，奇怪的是，即使我从false返回function并返回该功能，我的表单仍然会提交给onsubmit表格。 ..我甚至尝试过：

onsubmit="return false;"

不知道发生了什么......无论如何将事件触发器移动到submit按钮的onclick事件修复了问题。

更新：结束发现我正在编辑的代码有另一个JS处理程序附加到onsubmit事件，这就是为什么它忽略了我的return false;

当我从onsubmit返回false时，为什么我的HTML表单仍然会提交？

6 个答案: