0

登録フォームを作成しています。ユーザーがメールを入力できるフィールドが 2 つあります (1 つはメール用、もう 1 つはメールの再入力用)。2 つのフィールドを検証して、それらが一致していることを確認しようとしています。私が行ったことは、ユーザーがパスワード フィールドに移動すると、onfocus が検証関数を呼び出し、2 つのフィールドが一致するかどうかを確認することです。エラーがある場合、エラーは別のテキストフィールドに表示されます。問題は、コードが機能していないことです!!

コードは次のとおりです。

<html>
  <head>
    <script>
      var fieldalias="Email address field"
      function verify(element1, element2){
        var passed=false
        if (element1.value==''){
          document.f1.emailerror.value='Fill out the first email field';
          element1.focus()
        }
        else if (element2.value==''){
          document.f1.emailerror.value='Fill out the second email field';
          element2.focus()
        }
        else if (element1.value!=element2.value){
          document.f1.emailerror.value='The two emails are not matching';
          element1.select()
        }
        else
          passed=true
        return passed
      }
    </script>
  </head>
  <body>
    <p>Username: <br/>
       <input class="tb10" type="text" name="username" />
    </p><br/>
    <p>Email: <br/>
       <input class="tb10" type="text" name="email1" />
    </p>
    <p>Re-Enter Email: <br/>
       <input class="tb10" type="text" name="email2" />
       <input id="emerror" type="text" readonly name="emailerror"/>
    </p><br/>
    <p>Password: <br/>
       <input class="tb10" type="password" name="password1" onfocus="verify(this.email1,this.email2)";/>
    </p>
  </body>
</html>
4

1 に答える 1

3

いくつかの問題があります。1 つ目は、関数を呼び出す方法です。

onfocus="verify(this.email1,this.email2)";

thisはそのイベントが属するフィールド、つまりフォーカスを取得するフィールドになるため、email1andemail2プロパティはありません。(引用符の外側にセミコロンは必要ないことに注意してください。)

次に、関数内で次のように言います。

document.f1.emailerror

しかしf1、あなたのhtmlにはフォームがありません。

フィールドの周りにフォーム要素を追加し、名前を付けて、次のようにf1インラインを更新すると、機能します。onfocus

onfocus="verify(document.f1.email1,document.f1.email2)"

デモ: http://jsfiddle.net/jJ3YT/

注: あなたがここで取ったアプローチを本当に支持するわけではありません。私だったら、両方のメール フィールドのぼかしに検証を入れますが、メッセージを表示するだけで、最初のフィールドにフォーカスを戻すためではありません。分野。その後、フォームが実際に送信されたときに、まだ問題がある場合は、問題のフィールドにフォーカスを戻します。とにかく、あなたがやろうとしていることについては、ほとんどそこにいます...

于 2012-06-16T05:54:00.313 に答える