Fatal编程技术网
  • javascript/
  • 使用JavaScript的两个文本字段验证

使用JavaScript的两个文本字段验证

javascript html

使用JavaScript的两个文本字段验证,javascript,html,Javascript,Html,我正在建立一个登记表。我有两个用户可以输入电子邮件的字段（一个用于电子邮件，第二个是重新输入电子邮件）。我正在尝试验证这两个字段，以确认它们是否匹配。我所做的是，当用户移动到password字段时，onfocus将调用validate函数并检查这两个字段是否匹配。如果有错误，错误将显示在另一个文本字段中。问题是代码不起作用 代码如下： <html> <head> <script> var fieldalias="Email addres

我正在建立一个登记表。我有两个用户可以输入电子邮件的字段（一个用于电子邮件，第二个是重新输入电子邮件）。我正在尝试验证这两个字段，以确认它们是否匹配。我所做的是，当用户移动到password字段时，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>


var fieldalias=“电子邮件地址字段”
功能验证（元素1、元素2）{
var passed=false
if（element1.value==''）{
document.f1.emailerror.value='填写第一个电子邮件字段'；
元素1.焦点（）
}
else if（element2.value==''）{
document.f1.emailerror.value='填写第二个电子邮件字段'；
元素2.焦点（）
}
else if（element1.value！=element2.value）{
document.f1.emailerror.value='两封电子邮件不匹配'；
element1.select（）
}
其他的
通过=正确
回程通过
}
用户名：




电子邮件：



重新输入电子邮件：




密码：
有几个问题。第一个是调用函数的方式：

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

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

第二，在你的职责范围内，你说：

document.f1.emailerror
但是html中没有
f1
表单

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

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

注意：我并不真的赞同你在这里采取的方法——如果是我，我会将验证放在两个电子邮件字段的模糊上，但只是为了显示消息，而不是强迫焦点回到第一个字段。然后，当表单实际提交时，如果仍然存在问题，那么我可能会强制将焦点放回问题字段。但无论如何，对于你正在努力做的事情，你几乎做到了…

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

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

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

第二，在你的职责范围内，你说：

document.f1.emailerror
但是html中没有
f1
表单

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

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

注意：我并不真的赞同你在这里采取的方法——如果是我，我会将验证放在两个电子邮件字段的模糊上，但只是为了显示消息，而不是强迫焦点回到第一个字段。然后，当表单实际提交时，如果仍然存在问题，那么我可能会强制将焦点放回问题字段。但是不管怎样，对于你要做的事情，你几乎做到了…

为什么要在密码字段中使用
onfocus
？为什么不在电子邮件字段中使用
onblur
？这样，用户无需点击密码字段即可激活代码。为什么在密码字段中使用
onfocus
？为什么不在电子邮件字段中使用
onblur
？通过这种方式，用户无需点击密码字段即可激活代码。用一把工作小提琴，用一个非常透彻且易于理解的答案来击打对方，总是一件令人愉快的事谢谢，这很有效。现在我试图隐藏显示错误消息的文本字段。我做了一些改变，但没有成功。此链接中的代码新问题是行
var h=document.f1.emailerror在字段存在之前运行，因为脚本在解析文档之前运行，这意味着
h
实际上没有引用该字段，并且您不能使用它来设置样式。将该行移到函数中，它将按如下所示工作：话虽如此，我还是建议这样做：-即，对错误消息使用
元素，您无需担心隐藏和显示它（当消息是空字符串时，没有什么可看）。请注意，span元素没有
.value
属性：如更新的演示中所示，使用
.innerHTML
。用一把工作的小提琴，用一个非常彻底、易于理解的答案击败对手，总是一件令人愉快的事谢谢，这很有效。现在我试图隐藏显示错误消息的文本字段。我做了一些改变，但没有成功。此链接中的代码新问题是行
var h=document.f1.emailerror在字段存在之前运行，因为脚本在解析文档之前运行，这意味着
h
实际上没有引用该字段，并且您不能使用它来设置样式。将该行移到函数中，它将按如下所示工作：话虽如此，我还是建议这样做：-即，对错误消息使用
元素，您无需担心隐藏和显示它（当消息是空字符串时，没有什么可看）。请注意，span元素没有
.value
属性：如更新的演示中所示，使用
.innerHTML
。