使用 onblur 进行表单验证答案

【问题标题】：Form validation with onblur使用 onblur 进行表单验证
【发布时间】：2013-07-29 14:04:53
【问题描述】：

这是我的表格。

<form method="post" name="frm" >

    <label>Name*<input type="text" name="Name" value="<?php echo $r['Name'] ?>" onblur="if(this.value.length<3) alert('Name too short');" /></label>


    <label>Username*<input type="text" name="UN" value="<?php echo $r['UN'] ?>" onblur="if(this.value.length<5) alert('Username too short');" /></label>
    <label>Password*<input type="password" name="PW"  onblur="validation()" /></label>
    <label>Confirm Password*<input type="password" name="CM" onblur="validation()" /></label>
    <?php } ?>

    <input type="submit" name="Submit" value="<?php if($new) echo 'Register'; else echo 'Update'; ?>" />
</form>

在不编写单独的 onblur 事件的情况下，我试图将所有这些事件放入一个名为 validation() 的函数中，就像我为 Password 和确认 Password 字段所做的那样。这是我的验证函数。

<script language="javascript">
      function validation(){
            var password= document.frm.PW.value;
            var password2=document.frm.CM.value;
            if (password.length<5){
                alert ("Password too short");
                }
            else if(password!=password2){
                alert("password mismatch");
                }

            }

    </script>

但是一旦我填写了密码并且当我即将开始输入确认密码字段时，使用此代码它会提醒消息（“密码不匹配”）。如何摆脱这个。和对于所有表单标签，如果我正在验证和使用 validation() 函数，那么在每个标签中我是否必须调用 onblur=validation();

【问题讨论】：

如果您将警报替换为在您键入时显示在页面上的内容，那么烦人的就少得多了。即使用错误消息更新跨度。我会避免提醒，但如果你确实使用它们，请在点击提交时保存。

标签： forms validation

【解决方案1】：

不要在主密码更改时触发密码验证 - 在您更改密码 2 或单击提交时触发它。 :)

如果您在更新密码和密码 2 时坚持检查，我会添加检查以查看密码 2 是否留空：

else if(password !== password2 && password2 !== ""){

但是在提交时进行所有检查是一个更简洁的解决方案（正如 Rake 所说，更新跨度而不是警报会更简洁）。

【讨论】：

即不使用 onblur 使用