jQuery Validate仅邮箱验证生效，equalTo及自定义验证失效求助

嘿，我来帮你梳理下为啥equalTo和自定义验证规则没生效，大概率是这几个关键配置环节没做好：

1. equalTo规则的常见坑点 #

• 首先得确认目标元素的选择器完全正确：equalTo的参数是jQuery选择器（比如#password），不是表单的name属性。你密码框的id是password，那确认密码的规则得写成equalTo: "#password"，别写错id或者用name代替。
• 还要确保确认密码的输入框有独立的name属性，jQuery Validate是通过name来绑定规则的，比如你的确认密码框得是<input name="confirmPassword" ...>，然后在rules里对应这个name配置规则。

2. 自定义规则的正确姿势 #

自定义规则必须在表单验证初始化之前注册，而且语法不能错：

// 先注册自定义规则，比如验证密码长度
$.validator.addMethod("minLength8", function(value, element) {
  // 这里写你的验证逻辑，返回true表示通过，false表示不通过
  return value.length >= 8;
}, "密码长度不能少于8位"); // 自定义错误提示

// 再初始化表单验证
$(document).ready(function() {
  $("#form1").validate({
    rules: {
      password: {
        required: true,
        minLength8: true // 引用刚才注册的自定义规则
      },
      // 其他规则...
    }
  });
});

要是把自定义规则写在validate初始化之后，插件根本找不到这个规则，自然不会生效。

3. 基础配置不能少 #

• 必须确保DOM加载完成后再初始化验证：把validate的代码放在$(document).ready()或者$(function(){})里，不然页面还没加载完，插件找不到表单元素，规则就白配置了。
• 插件引入顺序要对：先引入jQuery，再引入jQuery Validate插件，顺序反了的话，插件没法挂载到jQuery上，所有自定义规则和特殊规则（比如equalTo）都会失效。

4. 最后检查控制台 #

打开浏览器的开发者工具控制台，看看有没有报错——比如“$ is not defined”（jQuery没加载）、“Cannot read property 'addMethod' of undefined”（Validate没加载对）、或者找不到元素的错误，这些都是导致规则失效的常见原因。

举个完整的正确示例给你参考：

<form id="form1">
  <input class="input1991 savage" name="name" placeholder="Full Name" type="text"><br>
  <input class="input1991 savage" name="email" placeholder="Email" type="email"><br>
  <input id="password" class="input1991 savage" name="password" placeholder="Password" type="password"><br>
  <input id="confirmPassword" class="input1991 savage" name="confirmPassword" placeholder="Confirm Password" type="password"><br>
  <button type="submit">Submit</button>
</form>

<script src="jquery.min.js"></script>
<script src="jquery.validate.min.js"></script>
<script>
// 注册自定义规则
$.validator.addMethod("minLength8", function(value, element) {
  return value.length >= 8;
}, "密码长度不能少于8位");

// 初始化表单验证
$(document).ready(function() {
  $("#form1").validate({
    rules: {
      name: {
        required: true
      },
      email: {
        required: true,
        email: true
      },
      password: {
        required: true,
        minLength8: true
      },
      confirmPassword: {
        required: true,
        equalTo: "#password"
      }
    },
    messages: {
      name: "请输入全名",
      email: "请输入有效的邮箱地址",
      password: "请输入密码"
    }
  });
});
</script>

内容的提问来源于stack exchange，提问作者beertwenty