Question

我有一个bootstrap 3表单，我使用validator来验证表单。

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

表格如下：

<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=''应用于第二个密码字段。

Answer 1

您应该使用validator

中提到的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.

bootstrap 3验证器 - 更改密码表单

1 个答案: