HTML5の検証

Question

HTML5に2つのエントリの書式確認（2つの同一のパスワードを書いてください）があるかどうか、独自の例外を書くことができますか？

前もって太もも！

Answer 1

私はそれが不可能だと確信しています。また、それは簡単にジャバスクリプトでカバーすることができますなぜ代わりに使用しないでください？

これは完璧に動作します：

<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-利用何かをしたい場合は、この試してください：あなたのCSSにこれを追加することで、それが空想してください 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> 

を（以下）。 HTML5の検証に失敗すると、問題の入力フィールドの周りに赤い枠線が表示されます。

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

すべてが完了しました。ユーザーが両方のパスワードを正しく入力するためには、alert（）またはサーバー側の検証を使用する必要があります。クライアント側のものには依存しないでください。

Answer 3

私は同様の問題を抱えていました。これをHTML5 APIを使用して解決するために、私はこれを行いました：少なくとも8文字と数字を含むパスワードのパターンを設定しました。パターン妥当性についてel.validity.patternMismatchチェックして最初にして2の妥当性を確認する

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

を：その後、彼らは私がやったのマッチングにします。 パスワードを入力したパターンを示します。

​​

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

汚れた作業を行うためにJqueryを使用しても構わない場合は、http://jqueryvalidation.org/validate/を使用することもできます。

チェックアウト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/