javascript - 在 Javascript 中验证密码匹配

Question

我正在尝试验证两个密码字段并检查它们是否匹配，但即使两个输入框具有相同的密码，表单仍然会出错。

JS

var validator = $("#signupform").validate({
  rules: {
    password: {
      required: true,
      minlength: 6
    },

    repeatpassword: {
      required: true,
      minlength: 6,
      equalTo: "#password"
    }

  },
  messages: {
    password: {
      required: "Provide a password",
      minlength: jQuery.format("Enter at least {0} characters")
    },
    repeatpassword: {
      required: "Repeat your password",
      minlength: jQuery.format("Enter at least {0} characters"),
      equalTo: "Your passwords do not match"
    }
  },
});

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-xs-12 col-sm-6 col-md-6">
  <div class="form-group">
    <input type="password" name="password" id="password" class="form-control input-lg" placeholder="Password" tabindex="5">
  </div>
</div>
<div class="col-xs-12 col-sm-6 col-md-6">
  <div class="form-group">
    <input type="password" name="repeatpassword" id="repeatpassword" class="form-control input-lg" placeholder="Confirm Password" tabindex="6">
  </div>
</div>

Answer 1

不确定您是否知道这一点，但是，“绝对需要您拥有 <form></form> 标签才能使 jQuery Validate 插件正常运行，或者完全不运行。” Read More

所以我添加了一个表单标签。

我认为密码的问题在于，您是这样做的:

jQuery.format("Enter at least {0} characters")

控制台出现错误:

"$.format has been deprecated. Please use $.validator.format instead.";

所以我将您的代码更改为:

jQuery.validator.format("Enter at least {0} characters")

var validator = $("#signupform").validate({
  rules: {
    password: {
      required: true,
      minlength: 6
    },

    repeatpassword: {
      required: true,
      minlength: 6,
      equalTo: "#password"
    }

  },
  messages: {
    password: {
      required: "Provide a password",
      minlength: jQuery.validator.format("Enter at least {0} characters")
    },
    repeatpassword: {
      required: "Repeat your password",
      minlength: jQuery.validator.format("Enter at least {0} characters"),
      equalTo: "Your passwords do not match"
    }
  },
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.13.1/jquery.validate.min.js"></script>
<form id="signupform">
  <div class="col-xs-12 col-sm-6 col-md-6">
    <div class="form-group">
      <input type="password" name="password" id="password" class="form-control input-lg" placeholder="Password" tabindex="5">
    </div>
  </div>
  <div class="col-xs-12 col-sm-6 col-md-6">
    <div class="form-group">
      <input type="password" name="repeatpassword" id="repeatpassword" class="form-control input-lg" placeholder="Confirm Password" tabindex="6">
    </div>
  </div>
  <input type="submit" value="Submit">
</form>