HTML5验证

Question

我不知道HTML5是否有双重输入的任何形式验证（写入2相同的密码），并且您可以编写自己的异常？

Thanx提前！

Answer 1

我很确定这是不可能的。此外，它可以很容易地被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> 

Answer 2

如果你想要的东西更好一点和HTML5的使用，试试这个： http://www.html5rocks.com/en/tutorials/forms/html5forms/

<label>Password:</label> 
<input type="password" id="password" name="password"> 
<label>Confirm Password:</label> 
<input type="password" id="passwordconf" name="passwordconf" oninput="check(this)"> 
<script language='javascript' type='text/javascript'> 
function check(input) { 
    if (input.value != document.getElementById('password').value) { 
     input.setCustomValidity('The two passwords must match.'); 
    } else { 
     // input is valid -- reset the error message 
     input.setCustomValidity(''); 
    } 
} 
</script> 

让它看中加给你的CSS（下面）。当它们通过HTML5验证失败时，它会在有问题的输入字段周围放置红色边框。

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

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

Answer 3

我有一个类似的问题，并解决它使用HTML5 api我这样做：设置一个模式的密码，以包含至少八个字母和一个数字。然后让他们匹配我所做的：

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.patternMismatch检查模式的有效性，然后再检查两者的有效性。 这是我的密码输入模式。

​​

Answer 4

感谢踢球，这是非常有用的。

我扩大了一点，使密码和密码确认输入无效，只要输入开始输入。

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) 
    }); 
} 

Answer 5

我想这就是你要找的。

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

这将执行密码和重新输入密码字段验证。

Answer 6

另一种选择是使用http://jqueryvalidation.org/validate/，如果你不介意使用Jquery来做你的肮脏工作。

退房http://jqueryvalidation.org/equalTo-method

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

如果需要，您也可以编写更复杂的方法：http://jqueryvalidation.org/category/plugin/