web-dev-qa-db-ja.com

デフォルトの検証オプションを使用してbootstrap 4でパスワードの確認を確認できますか？

https://getbootstrap.com/docs/4.0/components/forms/#validation を読みました。読んだ後、bootstrap 4つのデフォルトオプションを使用して、クライアントサイトで確認パスワードを確認することが可能だと思います。

それが可能であれば、どのように？

私のサインアップモーダルは

<li><button type="button" class="btn btn-light btn-lg" data-toggle="modal" data-target="#signUp">Sign Up</button></li>
                    <li><button type="button" class="btn btn-light btn-lg" data-toggle="modal" data-target="#signIn" style="margin-left:10px">Sign In</button></li>

                    <!-- Modal content-->




                    <div class="modal fade" id="signUp" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
                        <div class="modal-dialog" role="document">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <h5 class="modal-title" id="exampleModalLabel">Sign Up</h5>
                                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                        <span aria-hidden="true">&times;</span>
                                    </button>
                                </div>
                                <div class="modal-body">
                                    <form>
                                        <div class="form-group">
                                            <label for="email" class="col-form-label">Email address:</label>
                                            <input type="email" class="form-control" id="email" name="email">
                                        </div>
                                        <div class="form-group">
                                            <label for="pwd" class="col-form-label">Password:</label>
                                            <input type="password" class="form-control" id="pwd" name="password">
                                        </div>
                                        <div class="form-group">
                                            <label for="pwd" class="col-form-label">Confirm Password:</label>
                                            <input type="password" class="form-control" id="pwd" name="password">
                                        </div>
                                    </form>
                                </div>
                                <div class="modal-footer">
                                    <button type="submit" class="btn btn-primary">Sign Up</button>

                                </div>
                            </div>
                        </div>
                    </div>

詳細コードについては、 this を参照してください

両方のパスワードが等しい場合に、サーバーにメールとパスワードを送信したい。それ以外の場合は、警告メッセージを表示します。

password-confirmation
5
user9644880

制約検証を使用したブートストラップ4次のフォームには、電子メールアドレス用とパスワード用の2つの必須フィールドがあります。また、ユーザーがパスワードフィールドとこの3番目のフィールドに同じパスワードを入力した場合にのみ有効と見なされる3番目のフィールドもあります。

<h1>Create new account</h1>
<form action="/newaccount" method=post
      oninput='up2.setCustomValidity(up2.value != up.value ? "Passwords do not match." : "")'>
  <p>
  <label for="username">E-mail address:</label>
  <input id="username" type=email required name=un>
  <p>
  <label for="password1">Password:</label>
  <input id="password1" type=password required name=up>
  <p>
  <label for="password2">Confirm password:</label>
  <input id="password2" type=password name=up2>
  <p>
  <input type=submit value="Create account">
</form>

詳細確認： https://www.w3.org/TR/html5/sec-forms.html#sec-constraint-validation

14
Mohammed Abdellatif