ブートストラップ4でのフォーム検証ベータ

Question

ビルディング検証フォームの理解に問題があります。ブートストラップ現在のドキュメントであり、JSコード（いわゆるスターターコード）の一部です：

<script> 
// Example starter JavaScript for disabling form submissions if there are invalid fields 
(function() { 
    'use strict'; 

    window.addEventListener('load', function() { 
    var form = document.getElementById('needs-validation'); 
    form.addEventListener('submit', function(event) { 
     if (form.checkValidity() === false) { 
     event.preventDefault(); 
     event.stopPropagation(); 
     } 
     form.classList.add('was-validated'); 
    }, false); 
    }, false); 
})(); 
</script> 

、それが正常に動作しますが、私は、パスワードのチェックを実装したい場合、私は例えば、何をすべきでしょうか？もし私がそれを正しく理解していれば、Bootstrapにはcssクラスがあります：validと：フィールドが空のときに実行される無効です。私はいくつかの状態が（すなわち8記号未満のパスワード）であるときにそれらを発射したい。

<form id="needs-validation" novalidate> 
    <div class="form-row"> 
     <div class="form-group col-md-6"> 
      <label for="inputPassword1">Password</label> 
      <input type="password" class="form-control" name="inputPassword1" id="pass1" placeholder="password" required> 
     <div class="invalid-feedback"> 
      Please provide a valid password. 
     </div> 
    </div> 
</form> 

Answer 1

パターン属性を使用できます。 From MDN：

パターン コントロールの値が反対 をチェックされていることを正規表現。パターンは、一部の サブセットではなく、値全体と一致する必要があります。 title属性を使用して、 ユーザを支援するパターンを記述します。この属性は、type属性の値が テキスト、検索、tel、url、電子メール、またはパスワードである場合に適用されます。それ以外の場合は無視されます。 正規表現言語は、JavaScript RegExp アルゴリズムと同じで、パターンを のユニコードコードポイントのシーケンスとして扱う 'u'パラメータを使用しています。パターンは、 スラッシュで囲まれていません。例えば

、以下のパスワードが下部ケースと数字、大文字と少なくとも8つの文字であることを検証します：

<form id="needs-validation" novalidate> 
    <div class="form-row"> 
     <div class="form-group col-md-6"> 
      <label for="inputPassword1">Password</label> 
      <input type="password" class="form-control" name="inputPassword1" id="pass1" placeholder="password" 
        pattern="^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[a-zA-Z\d]{8,}$" 
        required> 
     <div class="invalid-feedback"> 
      Passwords should be a minimum of 8 characters and include at least one upper case letter, one lower case letter and one number. 
     </div> 
    </div> 
</form>