提交时 JavaScript 验证不起作用

Javascript Validation Not Working When Submitting

本文关键字：不起作用 验证 JavaScript 提交      更新时间：2023-09-26

我一直在开发我的第一个网站，但我在使用javascript验证脚本时遇到了问题。我的代码：

<html>
    <head>
      <title>Territory</title>
    </head>
    <body>
      <script type="text/javascript"> //Main Javascript function giving me issues
    function validate(form)
    {
      fail = validateTerrNum(document.checkOut.numberOut.value);
      fail += validateFirstName(document.checkOut.fName.value);
      fail += validateLastName(document.checkOut.lName.value);
      if (fail == "") 
    return true;
      else 
      {
        alert(fail);
        return false;
      }
    }
        </script>
        <script type="text/javascript>
        function validateTerrNumber(field)
        {
     if (field == "") return "No territory number was entered. 'n";
     else if (field.length > 3)
    return "Territory numbers must be less than four characters. 'n";
    else if (/[^0-9]/.test(field))
        return "Only 0-9 allowed in territory number. 'n";
    return "";
        }
        //Note: Does not sanitize string
        function validateFirstName(field)
        {
     if (field == "") return "No first name was entered. 'n";
     return "";
        }
        //Again, note that this function does not sanitize string
        function validateLastName(field)
        {
     if (field == "") return "Not last name was entered. 'n";
     return "";
        }
        </script>
        <table border="0" cellpadding="2" cellspacing="5">
     <th colspan="2" align="center">Check Out</th>
      <form name="checkOut" method="post" onSubmit="validate(this)"> 
    <tr><td>Territory Number</td><td><input type="text" name="numberOut"     tabindex="1" maxlength="3" size="3" /></td>
                    </tr><tr><td>First Name of Holder</td><td><input type="text" name="fName" tabindex="2" maxlength="15"/></td>
                    </tr><tr><td>Last Name of Holder</td><td><input type="text" name="lName" tabindex="3" maxlength="15" /></td>
                    </tr><tr><td><input type ="checkbox" name="specialC" tabindex="4" value="Yes"/> Special Campaign</td>
                    </tr><tr><td></td><td><input type="submit" value="Check Out" /></td>
                </form>
            </table>
</body>
</html>

它显然格式不正确 - 复制和粘贴的结果。更具体地说，这个问题与javascript验证有关。当我点击"签出"时，当我输入错误值时，验证不会阻止它。脚本非常简单，但由于某种原因，我无法弄清楚它是怎么回事（我对javascript相当陌生）。

我知道问题不在于我的浏览器，因为我在整个浏览器中运行了许多 javascript。我唯一能想到的是表单没有方法。这将是另一个验证，但用php编写 - javascript实际上只是客户端的预验证。

任何帮助将不胜感激。

-马拉格马

要在验证失败后停止提交，您需要：

onSubmit="return validate(this)"

而不是您当前的代码：

onSubmit="validate(this)"

您的validate()函数已经返回true或false，但这些值不是从事件处理程序本身返回的。如果您将引号之间的代码视为onSubmit=""函数的主体，这是有道理的。

而且，asTeemu 指出，您的 validate() 函数尝试调用一个名为 validateTerrNum 的函数，而实际上您已将该函数声明为 validateTerrNumber 。

纠正这些问题后，您可以在此处看到它的工作：http://jsfiddle.net/nnnnnn/Wvcy3/

你在validate()中有这一行：

fail = validateTerrNum(document.checkOut.numberOut.value);

还有这个功能：

function validateTerrNumber(field){...

此外，document.checkOut undefined而不是form元素（取决于浏览器???），最好改用document.getElementById('numberOut').value（fName和lName相同）。当然，您需要在HTML中添加这些id。

相关文章：