Question

我有一个令人困惑的问题。

代码如下，我看不出任何错误，我与其他代码进行了比较，它的格式完全相同/非常相似，但是由于某种原因，这个没有执行该事件。 / p>

我也试过在if语句中这样做：

if (regExName.test(theForm.txtName.value))

仍然是同样的错误，根本没有任何反应。 lbl ???根本不显示任何消息是否有效。

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style type="text/css">
        .auto-style1 {
            width: 100%;
        }
        .auto-style2 {
            width: 265px;
        }
        #Text1 {
            width: 186px;
        }
        #Text2 {
            width: 186px;
        }
        #Text3 {
            width: 186px;
        }
        #txtName {
            width: 186px;
        }
        #txtAge {
            width: 186px;
        }
        #txtNumber {
            width: 186px;
        }
    </style>
    <script language="javascript" type="text/javascript">

        function btnValidate(theForm) {
            regExName = new RegExp("[a-zA-Z]");
            regExAge = new RegExp("^([1])?[0-9]{2}");
            regExNum = new RegExp("[2-9][0-9]{2}\-[0-9]{4}");

            if (regExName.test(theForm.txtName))
                lblName.innerHTML = "Valid, continue.";
            else 
                lblName.innerHTML = "Invalid Name Entry, please try again.";

            if (regExAge.test(theForm.txtAge))
                lblAge.innerHTML = "Valid, continue.";
            else
                lblAge.innerHTML = "Invalid Age Entry, please try again.";

            if (regExNum.test(theForm.txtNumber))
                lblNumber.innerHTML = "Valid, continue.";
            else
                lblNumber.innerHTML = "Invalid Phone Number Entry, please try again.";
        }

    </script>
</head>
<body>
    <form action="">

    <table class="auto-style1">
        <tr>
            <td class="auto-style2">Name:&nbsp;&nbsp;&nbsp;
                <input id="txtName" type="text" /></td>
            <td>
                <div id="lblName">
                </div>
            </td>
        </tr>
        <tr>
            <td class="auto-style2">Age:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                <input id="txtAge" type="text" /></td>
            <td>
                <div id="lblAge">
                </div>
            </td>
        </tr>
        <tr>
            <td class="auto-style2">Number:
                <input id="txtNumber" type="text" /></td>
            <td>
                <div id="lblNumber">
                </div>
            </td>
        </tr>
    </table>
    <p>
        <input id="Submit1" type="submit" value="Validate" onsubmit="btnValidate(this.form)"/></p>
        </form>
</body>
</html>

非常感谢任何帮助。

更新代码

Answer 1

您的按钮不在表单中，因此this.form会返回undefined。将表单放在表的外部（和按钮），并将验证侦听器放在表单的onsubmit处理程序上，而不是按钮上。并将输入类型按钮更改为输入类型提交。

关于代码的其他一些建议：

>   <script language="javascript" type="text/javascript">

脚本元素的语言属性在HTML 4中已弃用，在HTML5中已删除，只是不要使用它。 type5属性在HTML5中是可选的（并且已经在实践中使用了很长时间），因此请考虑将其删除。错误的机会少了一点。

>   function btnValidate(theForm) {
>        regExName = new RegExp("[a-zA-Z]");
>        regExAge = new RegExp("^([1])?[0-9]{2}");
>        regExNum = new RegExp("[2-9][0-9]{2}\-[0-9]{4}");

变量应使用var关键字保持在本地，因此：

        var regExName = new RegExp("[a-zA-Z]");
        var regExAge = new RegExp("^([1])?[0-9]{2}");
        var regExNum = new RegExp("[2-9][0-9]{2}\-[0-9]{4}");

>        if (regExName.test(theForm.txtName))
>            lblName.innerHTML = "Valid, continue.";

不要将元素id用作全局变量，它是早期IE中引入的设计缺陷，并且由其他浏览器模仿以实现兼容性，只是不要这样做。使用以下命令获取元素的引用：

         var lblName = document.getElementById('lblName');

>        else 
>            lblName.innerHTML = "Invalid Name Entry, please try again.";

请在if语句周围使用括号。它使代码更易读，更易于维护。以上内容也适用于其余代码。

至于HTML：

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

您有HTML DOCTYPE，因此请删除xmlns属性。

表单控件必须采用某种形式，并且名称必须成功（即，在提交表单时将其值发送到服务器）。因此，用名称替换控件ID，例如

<input name="txtName" type="text">

最后，不要在HTML文档中使用XML样式标记。

修改

所以这里是你的代码清理完毕。请注意，该函数必须返回false才能取消提交，否则表单将提交。

<!DOCTYPE html>
  <title></title>
  <script>

    function btnValidate(theForm) {
      var regExName = new RegExp("[a-zA-Z]");
      var regExAge = new RegExp("^([1])?[0-9]{2}");
      var regExNum = new RegExp("[2-9][0-9]{2}\-[0-9]{4}");
      var lblName = document.getElementById('lblName');
      var lblAge = document.getElementById('lblAge');
      var lblNumber = document.getElementById('lblNumber');
      var returnValue = true;

      if (regExName.test(theForm.txtName.value)) {
         lblName.innerHTML = "Valid, continue."

      // If test fails, write error message and set returnValue to false
      } else {
         lblName.innerHTML = "Invalid Name Entry, please try again.";
         returnValue = false;
      }

      if (regExAge.test(theForm.txtAge.value)) {
         lblAge.innerHTML = "Valid, continue.";
      } else {
         lblAge.innerHTML = "Invalid Age Entry, please try again.";
         returnValue = false;
      }

      if (regExNum.test(theForm.txtNumber.value)) {
         lblNumber.innerHTML = "Valid, continue.";
      } else {
         lblNumber.innerHTML = "Invalid Phone Number Entry, please try again.";
         returnValue = false;
      }

      // returnValue will be either false, cancelling submit, or 
      // any other value to continue submit 
      return returnValue;
    }

  </script>

  <!-- note that the listener must return a value -->
  <form action=""  onsubmit="return btnValidate(this)">

    <table class="auto-style1">
        <tr>
            <td class="auto-style2">Name:&nbsp;&nbsp;&nbsp;
                <input name="txtName" type="text"></td>
            <td>
                <div id="lblName"></div>
            </td>
        </tr>
        <tr>
            <td class="auto-style2">Age:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                <input name="txtAge" type="text"></td>
            <td>
                <div id="lblAge">
                </div>
            </td>
        </tr>
        <tr>
            <td class="auto-style2">Number:
                <input name="txtNumber" type="text" /></td>
            <td>
                <div id="lblNumber">
                </div>
            </td>
        </tr>
    </table>
    <p>
        <input type="submit" value="Validate"></p>
  </form>
</html>

执行事件时没有任何反应

1 个答案:

修改