我可以使用默认验证选项在引导程序4中检查密码确认吗？

Question

我已阅读https://getbootstrap.com/docs/4.0/components/forms/#validation。阅读后，我想可以使用bootstrap 4默认选项在客户端站点中检查确认密码。而且，由于我是Web开发新手，所以我找不到解决方案。

如果有可能，那怎么办？

我的注册模式是

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

有关详细信息代码中看到这

当两个密码相等时，我想将电子邮件和密码提交给服务器。否则显示警报消息。

Answer 1

使用约束验证为的Bootstrap 4，以下形式具有两个必填字段，一个用于电子邮件地址，一个用于密码。它还具有第三个字段，只有在用户在密码字段和该第三个字段中键入相同的密码时，该第三个字段才被视为有效。

<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