jquery.validate 自定义验证方法及validate相关参数

下面是关于jquery.validate自定义验证方法及validate相关参数的攻略，包含以下内容：

1. jQuery.validate 的基础使用方法

2. 自定义验证方法

3. validate 相关参数

4. 示例说明

1. jQuery.validate 的基础使用方法

首先我们需要引入 jQuery 及 jQuery.validate 的相关文件，具体可以参考以下代码：

<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/jquery-validate/1.19.0/jquery.validate.min.js"></script>

在 HTML 页面中，需要给需要验证的表单元素添加相应的 class 和 name 属性。例如：

<form>
  <label for="name">姓名:</label>
  <input type="text" id="name" name="name" class="required">
  <br>
  <label for="email">Email:</label>
  <input type="text" id="email" name="email" class="required email">
  <br>
  <input type="submit" value="Submit">
</form>

接下来，我们需要在 JavaScript 中对表单进行验证。具体可以参考以下代码：

$(document).ready(function() {
  $("form").validate();
});

由于没有设置验证规则，我们的表单验证并无实际效果。接下来，我们将会看到如何添加自定义验证方法和 validate 相关参数。

2. 自定义验证方法

jQuery.validate 提供了一个名为 addMethod 的方法，可以自定义验证规则。addMethod 方法包含三个参数，分别为自定义验证方法名称、自定义验证方法规则和验证失败的提示信息。例如：

$.validator.addMethod("isMobile", function(value, element) {
  var mobile = /^1[3456789]\d{9}$/;
  return this.optional(element) || (mobile.test(value));
}, "请填写正确的手机号码");

addMethod 方法的三个参数的详细说明如下：

• 方法名称：自定义验证规则的名称，作为验证规则的标识符，以便后面引用。
• 方法规则：对输入的值进行处理或者验证。接受两个参数，分别为需要验证的值（value）和需要验证的 HTML 元素（element）。需要返回布尔类型，true 表示验证成功，false 表示验证失败。
• 提示信息：验证失败时需要显示的提示信息。

3. validate 相关参数

除了自定义验证方法外，jQuery.validate还有一些相关参数，可以对表单验证进行更加细致的设置。以下为常用的一些参数：

• rules: 验证规则。可以通过规则自定义验证方法，也可以使用预设的验证方法，例如：{name:{required:true}}。
• messages: 验证提示信息。可以对每一个表单元素单独定义提示信息。
• ignore: 对某些表单元素进行忽略，不验证。
• onfocusout: 在失去焦点的时候进行验证，默认为 true。
• onkeyup: 在按键抬起的时候进行验证，默认为 true。
• submitHandler: 提交表单时的回调函数。如果表单验证成功之后，将执行该函数。

4. 示例说明

下面通过两个示例说明 jQuery.validate 的使用方法：

示例一

表单中包含“用户名”和“手机号码”两个输入框，用户名不能为空格、数字和下划线之外的字符且长度必须大于等于 3。手机号码必须为 11 位数字。具体代码如下：

<form id="myform">
  <label for="name">用户名:</label>
  <input type="text" id="name" name="name"><br>
  <label for="phone">手机号码:</label>
  <input type="text" id="phone" name="phone"><br>
  <input type="submit" value="提交">
</form>

$(document).ready(function() {
  $.validator.addMethod("validName", function(value, element) {
    return this.optional(element) || /^[a-zA-Z0-9_]{3,}$/.test(value);
  }, "请输入正确的用户名");

  $.validator.addMethod("validPhone", function(value, element) {
    return this.optional(element) || /^1[3456789]\d{9}$/.test(value);
  }, "请输入正确的手机号码");

  $("#myform").validate({
    rules: {
      name: {
        required: true,
        validName: true
      },
      phone: {
        required: true,
        validPhone: true
      }
    },
    messages: {
      name: {
        required: "请输入用户名",
      },
      phone: {
        required: "请输入手机号码",
      }
    }
  });
});

在如上代码中，我们首先定义了 validName 和 validPhone 两个自定义验证规则及其提示信息，接下来在 validate 方法中使用 rules 和 messages 对“用户名”和“手机号码”这两个输入框进行验证。其中 rules 中使用了 validName 和 validPhone 进行自定义验证。

示例二

表单中包含一个用于上传文件的输入框，需要根据文件类型进行限制。具体代码如下：

<form id="fileForm">
  <label for="file">上传文件:</label>
  <input type="file" id="file" name="file"><br>
  <input type="submit" value="提交">
</form>

$(document).ready(function(){
  $("#fileForm").validate({
    rules: {
      file: {
        required: true,
        extension: "jpg|gif|png"
      }
    },
    messages: {
      file: {
        required: "请上传文件",
        extension: "请上传jpg、gif或png格式的文件"
      }
    }
  });
});

在如上代码中，我们使用 “extension” 预设方法限制文件类型，该方法需要传递一个字符串参数，用来限制文件类型。当文件类型不符合要求时，将会提示 “请上传jpg、gif或png格式的文件” 错误信息。

希望以上内容能够对你有所帮助，如果有什么问题，欢迎在评论区留言。