12

我已阅读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>

详细代码见这个

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

4

1 回答 1

38

使用约束验证的 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

于 2018-10-30T13:37:19.023 回答