0

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

这是代码：

<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

有几个问题。首先是您调用函数的方式：

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

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

其次，在你的职能范围内，你说：

document.f1.emailerror

但是您的 html 中没有f1表单。

如果您在字段周围添加一个表单元素，将其命名为 name f1，并按如下方式更新您的内联onfocus，那么它将起作用：

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

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

注意：我并不真正赞同您在此处采用的方法 - 如果是我，我会将验证放在两个电子邮件字段中的 blur 上，但只是为了显示消息，而不是强制焦点回到第一个场地。然后，当实际提交表单时，如果仍然存在问题，那么也许我会强制将焦点移回问题字段。但无论如何，对于你想要做的事情，你几乎就在那里......

于 2012-06-16T05:54:00.313 回答