jquery - Jquery Validation equalTo 不使用引导程序

Question

我有一个带有密码字段的表单，我想通过比较两个密码字段的值来验证它：

<div class="form-group">
<label for="pwd">Password:</label>
<input type="password" class="form-control" id="pwd" name="pwd" required>
</div>
<div class="form-group">
<label for="repwd">Retype Password:</label>
<input type="password" class="form-control" id="repwd" name="repwd" required>
</div>

我的 jquery 验证规则是：

$("#registerform").validate({
    rules: {
        pwd: {
            required: true,
            equalTo: "#repwd"
        },
        repwd: {
            required: true,
            equalTo: "#pwd"
        }
    },
    messages: {
        repwd: {
            equalTo: "Should be equal"
        }
    },
    onkeyup: function(element){
        this.element(element);
    },
    submitHandler: function(form) {
    // do other things for a valid form
     form.submit();
    },
});

 $('#pwd').on('change blur keyup', function() {
    $('#pwd').valid();
});

所需规则已验证，但 equalTo 未验证。我该如何解决？

标签： jquerybootstrap-4jquery-validate

Answer 1

您可以简单地添加equalTo到，pwd因为这里repwd应该等于pwd不与您在 jquery 代码更改中所做的相反，它应该可以工作。

演示代码：

$("#registerform").validate({
  rules: {
    pwd: "required", //pwd required
    repwd: {
      required: true, //repwd required
      equalTo: "#pwd" //should be equal to pwd
    }

  },
  onkeyup: function(element) {
    this.element(element);
  },
  submitHandler: function(form) {
    // do other things for a valid form
    form.submit();
  },
});

$('#pwd').on('change blur keyup', function() {
  $('#pwd').valid();
});

<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/jquery.validate.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/additional-methods.min.js"></script>
<form id="registerform">
  <div class="form-group">
    <label for="pwd">Password:</label>
    <input type="password" class="form-control" id="pwd" name="pwd" required>
  </div>
  <div class="form-group">
    <label for="repwd">Retype Password:</label>
    <input type="password" class="form-control" id="repwd" name="repwd" required>
  </div>
</form>