Forms HTML5验证

我想知道HTML5是否有双重输入的formvalidation（写两个相同的密码），你能写自己的异常吗

---

先走一步

我很确定这是不可能的。而且，javascript可以很容易地覆盖它，所以为什么不使用它呢

这非常有效：

<script language="javascript"> 
function checkPassword() { 
    if (document.pwForm.pw1.value != document.pwForm.pw2.value) { 
        alert ('The passwords do not match!');
        return false; 
    } 
} 
</script>
<form action="filename.ext" name="pwForm" method="GET/POST">
    <input type="password" name="pw1" value=""><br />
    <input type="password" name="pw2" value=""><br />
    <input type="Submit" name="CheckPassword" value="Check Passwords" onClick="return checkPassword();">
</form>

函数checkPassword（）{
如果（document.pwForm.pw1.value！=document.pwForm.pw2.value）{
警报（'密码不匹配！'）；
返回false；
} 
} 

如果您想使用更好的HTML5，请尝试以下方法：

---

都做完了。您仍然应该使用alert（）或服务器端验证来确保用户正确输入两个密码。不要依赖客户端任何东西。

我遇到了一个类似的问题，为了使用HTML5API解决这个问题，我做了以下工作：设置密码模式，使其至少包含八个字母和一个数字。然后，为了使它们匹配，我做了：

    var password = document.querySelector('#password'),
        passwordConfirm = document.querySelector('#password_confirm');

    [].forEach.call([password, passwordConfirm], function(el) {
        el.addEventListener('input', function() {
            if (!el.validity.patternMismatch) {
                if ( password.value === passwordConfirm.value ) {
                    try{password.setCustomValidity('')}catch(e){}
                } else {
                    password.setCustomValidity("Password and password confirm doesn\'t match")
                }
            }
        }, false)
    });

其中，使用

el.validity.patternmatch

首先检查模式有效性，然后检查两者的有效性。 这是我的密码输入模式

---

谢谢Kicker，这真的很有用

我对它进行了一些扩展，使密码和密码确认输入在输入开始时就无效

var password = document.querySelector(' input[name=usr_password]');
var passwordConfirm = document.querySelector(' input[name=usr_password_confirm]');
if (password && passwordConfirm)
{
    [].forEach.call([password, passwordConfirm], function(el) {
        el.addEventListener('input', function() {
            if ( el.validity.patternMismatch === false) {
                if ( password.value === passwordConfirm.value ) {
                    try{
                        password.setCustomValidity('');
                        passwordConfirm.setCustomValidity('');

                    }
                    catch(e){}
                }
                else {
                    password.setCustomValidity("The two passwords do not match");
                }
            }
            if ((password.checkValidity() && passwordConfirm.checkValidity()) === false)
            {
                password.setCustomValidity("The two passwords do not match, and they don't comply with the password rules.");
                passwordConfirm.setCustomValidity("The two passwords do not match, and they don't comply with the password rules.");
            }
            else
            {
                password.setCustomValidity('');
                passwordConfirm.setCustomValidity('');

            }
        }, false)
    });
}

---

我想这就是你要找的

<p>Password: <input type="password" required pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{6,}" name="pwd1" onchange="
  this.setCustomValidity(this.validity.patternMismatch ? 'Password must contain at least 6 characters, including UPPER/lowercase and numbers' : '');
  if(this.checkValidity()) form.pwd2.pattern = this.value;
"></p>
<p>Confirm Password: <input type="password" required pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{6,}" name="pwd2" onchange="
  this.setCustomValidity(this.validity.patternMismatch ? 'Please enter the same Password as above' : '');
"></p>

密码：

确认密码：

这将进行密码和重新键入密码字段的验证。

如果您不介意使用Jquery来做脏活，另一个选项是使用

:invalid {
     border: 2px solid #ff0000;
}

退房

密码


阿盖恩


$（“#myform”）。验证({
规则：{
密码：“必需”，
再次输入密码。\u：{
equalTo:“#密码”
}
}
});

---

如果需要，您还可以编写更复杂的方法：

尽管答案是正确的。这段代码有很多问题：1。如果未更改字段1，则不会添加自定义错误。2.如果有人在pw1而不是pw2中输入了错误的密码，并且在字段保持无效（尽管它是有效的）后更改了密码。3.只有在字段尚未出现自定义错误或自定义错误是由同一脚本添加的情况下（您需要为此测试validity.customError/validationMessage），才应更改自定义有效性。虽然您可以这样做，但您确实应该避免这样做。通过Ajax在服务器端进行验证。

<p>Password: <input type="password" required pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{6,}" name="pwd1" onchange="
  this.setCustomValidity(this.validity.patternMismatch ? 'Password must contain at least 6 characters, including UPPER/lowercase and numbers' : '');
  if(this.checkValidity()) form.pwd2.pattern = this.value;
"></p>
<p>Confirm Password: <input type="password" required pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{6,}" name="pwd2" onchange="
  this.setCustomValidity(this.validity.patternMismatch ? 'Please enter the same Password as above' : '');
"></p>

<form id="myform">
  <label for="password">Password</label>
  <input id="password" name="password" />
  <br/>
  <label for="password_again">Again</label>
  <input class="left" id="password_again" name="password_again" />
  <br>
  <input type="submit" value="Validate!">
</form>

<script>
  $( "#myform" ).validate({
    rules: {
      password: "required",
      password_again: {
        equalTo: "#password"
      }
    }
  });
</script>