当前位置：首页 > jquery

jquery的validate

2026-03-02 18:30:14jquery

jQuery Validate 插件简介

jQuery Validate 是一个基于 jQuery 的表单验证插件，用于在客户端对表单输入进行验证。它提供了丰富的验证规则和自定义选项，支持实时验证、错误提示和自定义样式。

基本用法

引入依赖文件 确保在页面中引入 jQuery 和 jQuery Validate 插件：

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery-validation@1.19.5/dist/jquery.validate.min.js"></script>

初始化验证 通过调用 validate() 方法对表单进行验证：
```
$("#myForm").validate();
```
定义验证规则 在表单元素的 rules 属性中定义验证规则：
```
<input type="text" name="username" required minlength="5">
```

常用验证规则

required: 字段必填。
minlength: 最小长度。
maxlength: 最大长度。
email: 验证电子邮件格式。
url: 验证 URL 格式。
number: 验证数字。
equalTo: 验证两个字段值是否相同。

示例：

$("#myForm").validate({
  rules: {
    username: {
      required: true,
      minlength: 5
    },
    email: {
      required: true,
      email: true
    }
  }
});

自定义错误消息

通过 messages 属性自定义错误提示：

$("#myForm").validate({
  rules: {
    username: {
      required: true,
      minlength: 5
    }
  },
  messages: {
    username: {
      required: "请输入用户名",
      minlength: "用户名至少5个字符"
    }
  }
});

高级功能

自定义验证方法 使用 addMethod() 方法扩展验证规则：

jquery的validate

$.validator.addMethod("customRule", function(value, element) {
  return value === "example";
}, "请输入正确的值");

实时验证 默认情况下，插件会在用户输入时实时验证字段。

提交处理 通过 submitHandler 定义表单提交时的逻辑：

$("#myForm").validate({
  submitHandler: function(form) {
    form.submit();
  }
});

示例代码

以下是一个完整的表单验证示例：

<form id="myForm">
  <label for="username">用户名:</label>
  <input type="text" name="username" id="username">
  <br>
  <label for="email">邮箱:</label>
  <input type="text" name="email" id="email">
  <br>
  <input type="submit" value="提交">
</form>

<script>
  $("#myForm").validate({
    rules: {
      username: {
        required: true,
        minlength: 5
      },
      email: {
        required: true,
        email: true
      }
    },
    messages: {
      username: {
        required: "请输入用户名",
        minlength: "用户名至少5个字符"
      },
      email: {
        required: "请输入邮箱",
        email: "请输入有效的邮箱地址"
      }
    },
    submitHandler: function(form) {
      alert("表单验证通过，即将提交！");
      form.submit();
    }
  });
</script>