0

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

如下代码，我看不出有什么问题，我已经与我的其他代码进行了比较，它的格式完全相同/非常相似，但是这个由于某种原因没有执行事件。

我也试过在 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>

任何帮助将不胜感激。

更新代码

4

1 回答 1

3

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

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

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

script 元素的语言属性在 HTML 4 中已弃用，并在 HTML5 中被删除，只是不要使用它。type 属性在 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>
于 2013-03-13T01:07:35.697 回答