Question

我正在建立一个登记表。我有两个字段，用户可以输入他的电子邮件（一个用于电子邮件，第二个用于重新输入电子邮件）。我正在尝试验证这两个字段以确认它们匹配。我所做的是当用户移动到密码字段时，onfocus将调用validate函数并检查两个字段是否匹配。如果出现错误，则错误将显示在另一个文本字段中。问题是代码无效!!

以下是代码：

<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>

Answer 1

有一些问题。第一个是你调用函数的方式：

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

this将是该事件所属的字段，即获得焦点的字段，因此它没有email1和email2属性。（另请注意，您不需要分号在之外的引号。）

其次，在你的功能中你说：

document.f1.emailerror

但你的html中没有f1表单。

如果您在字段周围添加表单元素，请为其指定名称f1，然后按如下所示更新内联onfocus，然后就可以了：

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

演示：http://jsfiddle.net/jJ3YT/

注意：我并不认可你在这里采取的方法 - 如果是我，我会将验证放在两个电子邮件字段的模糊中，但只显示消息，而不是强制重点关注进入第一个领域。然后当表格实际提交时，如果仍有问题，那么我可能会强制重点回到问题字段。但无论如何，你想做什么，你几乎就在那里......

使用JavaScript进行两次文本域验证

1 个答案: