javascript警报拒绝在表单验证中工作？

Question

我一直在尝试一切以使这些警报正确弹出。 我开始使用嵌套函数，然后将它们扔掉并将其全部放在一个函数中，现在当我在填写任何一个文本框后按Enter时，它什么都不做，只是将字符串放在url中，而不是像警告一样是以前。 我不确定它是我的函数调用还是其他调用，因为我仔细检查了所有内容，所有这些似乎都对我有用。 这是不执行任何操作的完整代码：

<html xmlns="http://www.w3.org/1999/xhtml">

<HEAD>
<TITLE>Smart Form </TITLE>
<SCRIPT LANGUAGE="JavaScript">

    <!-- VARIABLE DECLARATION -->

    f1.city.focus();

    function check_form()
    {   
        at_sign = email.search(/@/);

        if(document.f1.city.value.length < 1)
        {
            alert('Please enter a city');
            f1.city.focus();
        }
        else if(document.f1.state.value.length != 2 || !(state.charCodeAt('0')>=65 && state.charCodeAt('0')<=91))
        {
            alert('Please enter a state in abreviated form');
            f1.state.focus();
        }
        else if(document.f1.zip.value.length != 5 || document.f1.zip.value.isNaN()==true)
        {
            alert('Please enter a 5 digit zip code');
            f1.zip.focus();
        }
        else if((at_sign<1) || (email.length<3))
        {
            alert('Please enter a valid email address');
            f1.email.focus();
        }
        else
        {
            document.write("Form completed");   
        }

    }

</SCRIPT>
</HEAD> 

<BODY >

    <form name = "f1" action="smartform.html">
        <b>City</b>
        <input type = "text" name = "city" size = "18" value="" onSubmit = "javascript:check_form()">
        <b>State</b>
        <input type = "text" name = "state" size = "4" value="" onSubmit = "javascript:check_form()">
        <b>Zip Code</b>
        <input type = "text" name = "zip" size = "5" value="" onSubmit = "javascript:check_form()">
        <b>Email</b>
        <input type = "text" name = "email" size = "18" value="" onSubmit = "javascript:check_form()">

        <input type = "submit" name = "button" value = "Done" onclick = "javascript:check_form()">
    </form>


</BODY>
</HTML>

编辑：似乎什么都没有，每个人都说..这是我的新代码：

<html xmlns="http://www.w3.org/1999/xhtml">

<HEAD>
<TITLE>Smart Form </TITLE>
<SCRIPT LANGUAGE="JavaScript">

    f1.city.focus();

    function check_form(f1)
    {   
        var at_sign = f1.email.search(/@/);

        if(f1.city.value.length < 1)
        {
            alert('Please enter a city');
            f1.city.focus();
            return false;
        }
        else if(f1.state.value.length != 2 || !(f1.state.charCodeAt('0')>=65 && state.charCodeAt('0')<=91))
        {
            alert('Please enter a state in abreviated form');
            f1.state.focus();
            return false;
        }
        else if((f1.zip.value.length != 5) || (f1.zip.value.isNaN()==true))
        {
            alert('Please enter a 5 digit zip code');
            f1.zip.focus();
            return false;
        }
        else if((at_sign<1) || (f1.email.length<3))
        {
            alert('Please enter a valid email address');
            f1.email.focus();
            return false;
        }
        else
        {
            //document.write("Form completed"); 
        }

        return false;

    }

</SCRIPT>
</HEAD> 

<BODY >

    <form name = "f1" onSubmit="return check_form(this)">
        <b>City</b>
        <input type = "text" name = "city" size = "18" value="">
        <b>State</b>
        <input type = "text" name = "state" size = "4" value="">
        <b>Zip Code</b>
        <input type = "text" name = "zip" size = "5" value="">
        <b>Email</b>
        <input type = "text" name = "email" size = "18" value="">

        <input type = "submit" name = "button" value = "Done" onclick = "return check_form(this)">
    </form>


    <b>hi</b>

</BODY>
</HTML>

仍然没有警报...我把它打起来并得到..但没有警报...

好吧，我知道我可能应该使用getElementByID，但是我的新重点是准确找出为什么我的代码无法正常工作。 由于我的讲课大纲示例未使用此方法，因此我想弄清楚以下代码为什么不像以前那样激活警报。 我将其简化为：

<!DOCTYPE html>
<html>
<HEAD>
<TITLE>Smart Form </TITLE>
<SCRIPT LANGUAGE="JavaScript">



function check_form()
{   
    document.write("Form started");

    var at_sign = document.f1.email.search(/@/);

    if(document.f1.city.value.length < 1)
    {
        alert('Please enter a city');
        document.f1.city.focus();
        //return false;
    }
    else if(document.f1.state.value.length != 2 || !(document.f1.state.charCodeAt('0')>=65 && document.f1.state.charCodeAt('0')<=91))
    {
        alert('Please enter a state in abreviated form');
        document.f1.state.focus();
        //return false;
    }
    else if(document.f1.zip.value.length != 5 || isNaN(document.f1.zip.value)==true)
    {
        alert('Please enter a 5 digit zip code');
        document.f1.zip.focus();
        //return false;
    }
    else if((at_sign<1) || (document.f1.email.value.length<3))
    {
        alert('Please enter a valid email address');
        document.f1.email.focus();
        //return false;
    }
    else
    {
        document.write("Form completed");   
    }   
}

</SCRIPT>
</HEAD> 

<BODY onLoad= "javascript:document.f1.city.focus();">

<form name = "f1" action="smartform1.html" onSubmit="javascript:check_form();">
    <b>City</b>
    <input type = "text" name = "city" size = "18">
    <b>State</b>
    <input type = "text" name = "state" size = "4">
    <b>Zip Code</b>
    <input type = "text" name = "zip" size = "5">
    <b>Email</b>
    <input type = "text" name = "email" size = "18">

    <input type = "submit" name = "button" value = "Done" onclick = "javascript:check_form();">
</form>




</BODY>
</HTML>

我没有在控制台中看到任何错误，现在当我输入内容时，我得到了“ form start”测试行的出现，并伴随着一些神秘的错误，然后所有错误消失并显示了表单。 但是我的问题是，为什么在达到此结果的过程中没有发生警报？ 即使页面被覆盖，它仍然应该弹出。 另外，有没有一种方法可以在代码被覆盖之前通过代码/和/或调试将其暂停？ 所以我的基本问题是：为什么不弹出警报，以及如何使警报弹出，并且焦点保持在if / else语句中函数未使用的正确字段中？

更新2：我做了一个快速的错误的屏幕截图，事实证明f1.email等是未定义的，的确导致事情不起作用。 所以我仍然想知道如何使用代码或在调试器中将其暂停，帖子和链接似乎并没有100％清晰可见。 一旦我处于协奏曲并处于调试模式，我到底从那里去让程序在出错时暂停？

还：如果我在标头的脚本顶部声明了getElementByID变量，然后在函数中使用它们，那么在没有所有其他事件处理方法的情况下是否可以使用？ 我正在尝试输入。

Answer 1

您应该将提交侦听器放在表单上，并传递对表单的引用，并返回函数返回的任何值，例如

<form onsubmit="return check_form(this);" ...>

您应该使用控件的名称将控件作为表单的属性来引用，不要将名称用作全局变量。 并声明所有变量。

因此该函数如下所示：

function check_form(form) {

  var at_sign = email.search(/@/);

  if (form.city.value.length < 1) {
        alert('Please enter a city');
        f1.city.focus();

        // cancel submit by returning false
        return false;

    } else if (form.state.value.length != 2 || !(form.state.charCodeAt(0) >=65 && state.charCodeAt(0)<=91)) {
        alert('Please enter a state in abreviated form');
        f1.state.focus();
        return false;
    }

    ...
}

您可能应该使用正则表达式或查找而不是charCodeAt来验证状态值。

页面加载完成后（例如，提交表单时）使用document.write将在写入新内容之前擦除页面的全部内容。

编辑

这是您的新代码有什么问题：

<SCRIPT LANGUAGE="JavaScript">

摆脱语言属性。 这不是有害的（嗯，在非常具体的情况下可能是有害的）。

f1.city.focus();

f1尚未定义或初始化（请参见上面有关元素名称和全局变量的注释）

function check_form(f1)
{
    var at_sign = f1.email.search(/@/);

f1.email是输入元素，它没有搜索属性，您不能调用它。 它确实具有一个字符串形式的value属性，也许您的意思是：

    var at_sign = f1.email.value.search(/@/);

然后是：

    else if(f1.state.value.length != 2 || !(f1.state.charCodeAt('0')>=65 && state.charCodeAt('0')<=91))

同样，您忘记了三个表达式中的两个表达式的value属性，而忘记了在第三个表达式中使用f1 。 你要：

    else if(f1.state.value.length != 2 || !(f1.state.value.charCodeAt(0)>=65 && f1.state.value.charCodeAt(0)<=91))

请注意，这要求用户使用大写字母输入状态，这可能有助于告诉他们。

然后是：

    else if((f1.zip.value.length != 5) || (f1.zip.value.isNaN() == true))

isNaN是全局变量，而不是字符串方法。 如果未输入任何值，则该值为空字符串， isNaN('')返回false。 如果要测试是否输入了5位数字，请使用：

else if (!/^\d{5}$/test(f1.zip.value))

无需使用true进行测试，也无需对简单表达式进行分组：

    else if (f1.zip.value.length != 5 || isNaN(f1.zip.value))

最后，如果所有测试通过：

    return false;

阻止表单提交。 您可以忽略此return语句，返回undefined将使表单提交。 或者，如果您确实想要，则返回true 。

Answer 2

好的，我想回答您的问题，但首先要首先浏览代码并进行清理。 将此用作正确格式的代码的模板：

<!DOCTYPE html>
  <html>
  <head>
    <title>Smart Form</title>
  </head>
  <body>
    <!-- Code goes here -->
    <script type="text/javascript">

    </script>
  </body>
</html>

标签和属性不需要大写。 JavaScript注释如下：

/** Comment. */

HTML评论是这样的：

<!-- Comment. -->

另外，nitpick：属性后应跟等号而不是空格。 即

<form name="f1" id="smartForm" action="smartform.html"> ... </form>

接下来进行适当的事件绑定。

var smartForm = document.getElementById('smartForm');
smartForm.addEventListener('submit', validateForm);

接下来，我将教您如何快速真正地钓鱼，这样您就可以弄清楚为什么这对您来说很坏，以及将来如何修复这些错误。 打开开发者控制台。 如今，Evergreen浏览器（Chrome，Firefox等...）拥有不错的浏览器。 您应该知道的技巧是如何评估代码，以便可以查看访问数据的方式是否做错了。 因此，请查找如何在浏览器中针对您的平台打开开发者控制台并将其键入到控制台中：

1+1

应该评估为：2.下一个类型：document如果单击，您会看到可以稍微浏览一下dom。 接下来，使用上面的更改加载您的smartForm应用程序，然后键入：

document.getElementById('smartForm')

您应该看到您的元素。 这是正确查询dom中对象的方法。 您会注意到，如果键入document.smartForm则不起作用。 您应该得到null，这应该告诉您应该有一种从文档中获取元素的方法。 提示，它是getElementById。 因此，如果在所有输入中都输入id，则可以列出可以查询的所有文档对象：

var cityElement = document.getElementById('city');
var stateElement = document.getElementById('state');
var zipElement = document.getElementById('zip');
var emailElement = document.getElementById('email');

接下来，您可以开始查询值，例如：

cityElement.value.length != 2

清理后的版本如下所示：

<!DOCTYPE html>
  <html>
  <head>
    <title>Smart form</title>
  </head>
  <body>
    <form id='smartForm' action='smartform.html'>
      <b>City</b>
      <input type="text" id="city" size="18">
      <b>State</b>
      <input type="text" id="state" size="4">
      <b>Zip Code</b>
      <input type="text" id="zip" size="5">
      <b>Email</b>
      <input type="text" id="email" size="18">
      <input type="submit" value="done">
    </form>
  <script type="text/javascript">
    var validateForm = function(evt) {
      var error = false;
      var cityElement = document.getElementById('city');
      var stateElement = document.getElementById('state');
      var zipElement = document.getElementById('zip');
      var emailElement = document.getElementById('email');

      if (cityElement.value.length != 2 ||
          !(state.charCodeAt(0) >= 65 && state.charCodeAt(0) <= 91)) {
        error = true;
        alert('oops');
        cityElement.focus();
      }

      // etc..

      if (error) {
        evt.preventDefault();
      }
    };
    var smartForm = document.getElementById('smartForm');
    smartForm.addEventListener('submit', validateForm);
  </script>
  </body>
</html>

好吧，我注意到了另外两件事。 charCodeAt仅适用于字符串。 “ hi” .chatCodeAt不是element.charCodeAt。 另外，您还有这个随机变量at_sign。 您可以节省大量时间，并且可以通过阅读以下内容来学习如何诊断问题所在： https : //developer.chrome.com/devtools/docs/console学习如何诊断问题所在是最好的选择尝试掌握JavaScript时可以学习的技巧。 我不能太强调这一点，学习如何调试，您将学习如何更快地编程数量级。 相信我，让调试教程成为您的最佳选择！

您的代码的完整工作示例： http : //codepen.io/JAStanton/pen/tjFHn?editors=101

稍微冗长一些的版本： http : //codepen.io/JAStanton/pen/iBJAk? editors= 101

Answer 3

onSubmit的形式，而不是输入，不带javascript：已解决= p

<form onsubmit="return check_form();" ...

您的代码中有几处不幸事故，也可能会导致错误并阻止该错误发生

另外，请检查是否有错误（例如脚本中的HTML注释），如果javascript中发生了错误并且未进行处理，则该上下文中的所有javascript都将停止工作。 您可以使用任何浏览器调试器进行检查（通常F12会显示一个窗口，并在发生错误时显示错误）

javascript警报拒绝在表单验证中工作？

问题描述

3 个解决方案

解决方案1
1 已采纳 2014-10-18 05:06:39

编辑

解决方案2
1 2014-10-18 05:25:56

解决方案3
0 2014-10-18 05:06:51

javascript警报拒绝在表单验证中工作？

问题描述

3 个解决方案

解决方案1 1 已采纳 2014-10-18 05:06:39

编辑

解决方案2 1 2014-10-18 05:25:56

解决方案3 0 2014-10-18 05:06:51

解决方案1
1 已采纳 2014-10-18 05:06:39

解决方案2
1 2014-10-18 05:25:56

解决方案3
0 2014-10-18 05:06:51