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/