jquery validate表单验证插件

下面是关于jquery validate表单验证插件的完整攻略，内容分为以下几部分：

1. 什么是jquery validate表单验证插件

jquery validate是一个基于jQuery的表单验证插件，它可以实现非常全面的表单验证功能，包括表单必填、表单格式验证、自定义验证规则等，能帮助我们轻松实现表单验证，提高用户体验。

1. 如何引入jquery validate

我们可以通过以下两种方式引入jquery validate：

（1）通过CDN引入，如下面的代码：

<script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/jquery.validate.min.js"></script>

（2）下载jquery validate插件，将jquery.validate.min.js文件引入到项目中。

1. 基本使用方法

下面是jquery validate的基本使用方法：

（1）通过选择器选择需要验证的表单，然后调用validate()方法初始化。

（2）通过rules()方法设置各种验证规则，使用messages()方法设置错误提示信息。

（3）使用submitHandler()方法设置表单提交处理函数，也可以使用其他的验证成功或验证失败处理函数。

下面是一个示例代码：

<form id="form1">
  <label>用户名：</label>
  <input type="text" name="username" class="required" minlength="2" maxlength="20">
  <br>

  <label>密码：</label>
  <input type="password" name="password" class="required" minlength="6" maxlength="20">
  <br>

  <input type="submit" value="提交">
</form>

<script>
  $("#form1").validate({
    rules: {
      username: {
        required: true,
        minlength: 2,
        maxlength: 20
      },
      password: {
        required: true,
        minlength: 6,
        maxlength: 20
      }
    },
    messages: {
      username: {
        required: "请输入用户名",
        minlength: "用户名不能少于2个字符",
        maxlength: "用户名不能超过20个字符"
      },
      password: {
        required: "请输入密码",
        minlength: "密码不能少于6个字符",
        maxlength: "密码不能超过20个字符"
      }
    },
    submitHandler: function(form) {
      alert("提交成功！");
    }
  });
</script>

在上面的代码中，我们设置了两个表单元素，分别是username和password，他们都有required、minlength、maxlength三个验证规则。我们还设置了messages属性，用来设置错误提示信息。当我们提交表单时，如果验证通过，会弹出提示框“提交成功！”。

1. 自定义验证规则

除了上面提到的一些常见的验证规则，我们还可以通过addMethod()方法添加自定义的验证规则。该方法有三个参数，分别为验证规则名称、验证规则函数、验证规则错误提示信息。下面是一个自定义验证规则的示例代码：

<form id="form2">
  <label>手机号码：</label>
  <input type="text" name="phone" class="phone-num" maxlength="11">
  <br>

  <input type="submit" value="提交">
</form>

<script>
  // 自定义手机号码规则
  $.validator.addMethod("phone", function(value, element) {
      var length = value.length;
      var mobile = /^((\+)?86|((\+)?086))?1[3|4|5|6|7|8|9]\d{9}$/;
      return this.optional(element) || (length == 11 && mobile.test(value));
  }, "请正确填写您的手机号码");

  $("#form2").validate({
    rules: {
      phone: {
        required: true,
        phone: true
      }
    },
    messages: {
      phone: {
        required: "请输入手机号码",
        phone: "请填写正确的手机号码"
      }
    },
    submitHandler: function(form) {
      alert("提交成功！");
    }
  });
</script>

在上面的代码中，我们添加了一个名为“phone”的自定义验证规则。当我们在填写手机号码时，如果填写的手机号码格式不正确，会提示“请填写正确的手机号码”。如果验证通过，会弹出提示框“提交成功！”。

1. 示例说明

下面是两个jquery validate的示例：

（1）邮件格式验证

<form id="form3">
  <label>邮箱：</label>
  <input type="text" name="email" class="required email">
  <br>

  <input type="submit" value="提交">
</form>

<script>
  $("#form3").validate({
    rules: {
      email: {
        required: true,
        email: true
      }
    },
    messages: {
      email: {
        required: "请输入邮箱",
        email: "邮箱格式不正确"
      }
    },
    submitHandler: function(form) {
      alert("提交成功！");
    }
  });
</script>

在上面的代码中，我们添加了一个验证规则叫做“email”，用来验证邮箱格式是否正确。如果验证通过，会弹出提示框“提交成功！”。

（2）密码确认验证

<form id="form4">
  <label>密码：</label>
  <input type="password" name="password" class="required" minlength="6" maxlength="20">
  <br>

  <label>确认密码：</label>
  <input type="password" name="confirm_password" class="required" minlength="6" maxlength="20">
  <br>

  <input type="submit" value="提交">
</form>

<script>
  $("#form4").validate({
    rules: {
      password: {
        required: true,
        minlength: 6,
        maxlength: 20
      },
      confirm_password: {
        required: true,
        equalTo: "#form4 [name=password]"
      }
    },
    messages: {
      password: {
        required: "请输入密码",
        minlength: "密码不能少于6个字符",
        maxlength: "密码不能超过20个字符"
      },
      confirm_password: {
        required: "请确认密码",
        equalTo: "两次输入密码不一致"
      }
    },
    submitHandler: function(form) {
      alert("提交成功！");
    }
  });
</script>

在上面的代码中，我们添加了一个验证规则叫做“equalTo”，用来验证确认密码是否与原密码一致。如果验证通过，会弹出提示框“提交成功！”。

总结：以上是jquery validate表单验证插件的完整攻略，包含了插件的引入、基本使用方法、自定义验证规则、示例说明等内容。希望能对您有所帮助！