当前位置：首页 > jquery

jquery验证插件

2026-04-08 10:11:49jquery

jQuery 验证插件推荐

jQuery Validation Plugin 是最流行的 jQuery 表单验证插件之一，由 Jörn Zaefferer 开发。它提供了灵活的验证规则和自定义选项，适用于大多数表单验证场景。

基本使用方法

引入 jQuery 和验证插件
在 HTML 文件中引入 jQuery 和验证插件的脚本文件：

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

定义表单和验证规则
通过 validate() 方法为表单定义验证规则：

$("#myForm").validate({
  rules: {
    username: {
      required: true,
      minlength: 3
    },
    email: {
      required: true,
      email: true
    }
  },
  messages: {
    username: {
      required: "请输入用户名",
      minlength: "用户名至少需要 3 个字符"
    },
    email: {
      required: "请输入邮箱",
      email: "请输入有效的邮箱地址"
    }
  }
});

常用验证规则

required: 字段必填。
minlength/maxlength: 最小/最大长度限制。
email: 验证邮箱格式。
url: 验证 URL 格式。
number: 验证数字。
equalTo: 验证字段值是否匹配另一个字段（如密码确认）。

自定义验证方法

可以通过 addMethod() 方法扩展自定义验证规则：

jquery验证插件

$.validator.addMethod("noSpace", function(value, element) {
  return value.indexOf(" ") < 0;
}, "不能包含空格");

$("#myForm").validate({
  rules: {
    username: {
      noSpace: true
    }
  }
});

高级功能

远程验证
使用 remote 选项进行服务器端验证：

username: {
  required: true,
  remote: {
    url: "check-username.php",
    type: "post"
  }
}

动态表单验证
通过 rules() 方法动态修改验证规则：

$("#username").rules("add", {
  required: true,
  minlength: 3
});

错误提示自定义
通过 errorPlacement 和 highlight 选项自定义错误提示位置和样式：

jquery验证插件

$("#myForm").validate({
  errorPlacement: function(error, element) {
    error.appendTo(element.parent().find(".error-message"));
  },
  highlight: function(element) {
    $(element).addClass("error-field");
  }
});

其他 jQuery 验证插件

jQuery Validation Plugin
官方文档：https://jqueryvalidation.org/
Parsley.js
轻量级表单验证库，支持动态表单和自定义验证规则。
官网：https://parsleyjs.org/
FormValidation
功能强大的表单验证插件，支持 Bootstrap 和其他框架。
官网：https://formvalidation.io/