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 要素の language 属性は、HTML 4 で廃止され、HTML5 で削除されました。使用しないでください。type 属性は HTML5 では省略可能です (そして非常に長い間実践されてきました) ので、それも削除することを検討してください。エラーの機会が 1 つ減ります。

>   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 に答える