0

我有一个 bootstrap 3 表单，我正在使用验证器来验证表单。

我已经成功实现了登录表单的基本验证，现在我正在实现更改密码表单的验证。

表格如下：

<form id="changepassword-form" role="form" data-toggle="validator" class="form-quote" action="/changepasswordpost" method="POST">
  <input name="changepassword-id" type="hidden" value="{{ id }}"/>
  <input name="changepassword-token" type="hidden" value="{{ token }}"/>
  <div class="form-group row">
    <div class="form-field col-md-12 form-m-bttm">                                                                        
      <input name="changepassword-password" type="password" placeholder="Nueva contraseña *" class="form-control required">
    </div>
  </div>
  <div class="form-group row">
    <div class="form-field col-md-12 form-m-bttm">
      <input name="changepassword-password2" type="password" placeholder="Repita la nueva contraseña *" class="form-control required">
    </div>
  </div>
  <button id="changepassword-submit" type="submit" class="btn btn-primary">Cambiar contraseña</button>
</form>

我在文档中看到可以使用自定义验证，所以我编写了以下验证，打算在第二个密码字段中使用：

custom: {
  passwordmatch: function($el) {
    var matchValue = $('#changepassworde-password').value()
    if ($el.val() !== matchValue) {
      return "Passwords do not match"
    }
  }
}

但我不知道在哪里或如何定义这个自定义验证。我知道一旦定义我应该只适用data-passwordmatch=''于第二个密码字段。

4

1 回答 1

0

您应该使用验证器中提到的 html 属性

data-match="#inputToMatch" to ensure two fields match, e.g. password confirmations

通过以下标准 HTML5 属性在表单输入上指定验证规则：

type="email"
type="url"
type="number", with additional constraints via max, min and step attributes
pattern="Reg(ular )?Exp(ression)?" (for input types of text, search, tel, url or email)
required

以及以下非标准属性：

data-match="#inputToMatch" to ensure two fields match, e.g. password confirmations
data-minlength="5" to enforce a minimum amount of characters
data-remote="/path/to/remote/validator" to make an AJAX request to determine if the field is valid or not. Be sure to give the input a name attribute, as the request will be sent to /path/to/remote/validator?<name>=<value>. The remote endpoint should return a 200 OK if the field is valid, and a 4xx otherwise. Here's a reference server implementation using Express.
于 2018-03-27T22:45:34.483 回答