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

时间：2014-10-18 04:14:40

标签： javascript forms validation

我一直在尝试一切，以便正确弹出这些警报。我开始使用嵌套函数，然后将它们抛出并将其全部放在一个函数中，现在当我在填写任何一个文本框后按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>

我在控制台中没有错误，现在当我输入内容时，我得到测试线＆＃34;表单已启动＆＃34;出现一瞬间，伴随着一些神秘的错误，然后它们全部消失并显示形式。但我的问题是，为什么在这个结果的路上没有发出警报？似乎即使页面被覆盖，它仍然应该弹出。还有，有没有办法在它被覆盖之前用代码/和/或调试暂停它？所以我的基本问题是：为什么不弹出警报，如何将警报弹出，并将焦点保留在if / else语句中函数停止的正确字段中？

更新2：我对错误做了一个快速的屏幕上限，事实证明f1.email等未定义，确实导致事情无效。所以我仍然想知道如何用代码暂停它或在调试器中，帖子和链接似乎没有完全清楚100％。一旦我进入consonle并进入调试模式，我到底该从哪里开始让程序暂停错误？

另外：如果我在标题的脚本顶部声明了getElementByID变量，那么在函数中使用它们，是否可以在没有所有其他事件处理方法的情况下工作？我在打字的时候尝试这个。

3 个答案:

答案 0 :(得分：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;
    }

    ...
}

您应该使用正则表达式或查找来验证 state 值，而不是 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))

没有必要对其进行测试，只需使用它，也不需要对简单表达式进行分组：

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

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

    return false;

阻止表单提交。您可以省略此return语句，返回 undefined 将提交表单。或者，如果你真的想要，请返回 true 。

答案 1 :(得分：1)

好的我想回答你的问题，但首先要先介绍一下你的问题 代码并清理它。 使用此作为正确格式化代码的模板：

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

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

标签＆amp;属性不需要大写。 Javascript评论是这样的：

/** Comment. */

Html评论是这样的：

<!-- Comment. -->

也是挑剔：属性后面应该是等号而不是空格。即。

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

接下来正确的事件绑定。

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

接下来我将教你如何快速捕鱼，这样你就可以弄清楚为什么这会被打破，以及如何在将来修复这些错误。打开开发者控制台。 Evergreen浏览器（Chrome，Firefox等......）今天有很好的浏览器。您应该知道的技巧是如何评估您的代码，以便您可以查看您是否在访问数据方面做错了什么。因此，请查看如何在浏览器中为您的平台打开开发人员控制台，并将其输入您的控制台：

1+1

应评估为：2。 下一个类型：文件 如果你点击周围你可以看到你可以稍微走过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

答案 2 :(得分：0)

onSubmit进入表单，而不是输入，没有javascript：Solved = p 

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

您的代码中存在多个可能导致错误并阻止其工作的错误

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

相关问题
最新问题