当前位置：首页 > jquery

jquery校验

2026-02-03 09:14:03jquery

jQuery 表单校验方法

jQuery 提供了多种方式实现表单校验，以下是常见的方法：

使用 jQuery Validate 插件 这是最流行的 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.3/dist/jquery.validate.min.js"></script>

基本校验规则示例

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

自定义校验规则

可以通过 addMethod 方法添加自定义校验规则：

jquery校验

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

// 使用自定义规则
rules: {
  password: {
    noSpace: true
  }
}

实时校验实现

通过 keyup 和 blur 事件触发实时校验：

$("input").on("keyup blur", function() {
  $("#myForm").validate().element(this);
});

异步校验示例

使用远程校验检查用户名是否可用：

jquery校验

rules: {
  username: {
    required: true,
    remote: {
      url: "check_username.php",
      type: "post"
    }
  }
}

校验结果样式处理

可以通过 errorClass 和 errorElement 自定义错误显示样式：

$("#myForm").validate({
  errorClass: "invalid-feedback",
  errorElement: "span",
  highlight: function(element) {
    $(element).addClass("is-invalid");
  },
  unhighlight: function(element) {
    $(element).removeClass("is-invalid");
  }
});

表单提交处理

校验通过后提交表单：

$("#myForm").validate({
  submitHandler: function(form) {
    form.submit();
    // 或使用AJAX提交
    // $.ajax({
    //   url: form.action,
    //   type: form.method,
    //   data: $(form).serialize()
    // });
  }
});

常用校验规则

required: 必填字段
email: 邮箱格式
url: URL格式
date: 日期格式
number: 数字
digits: 整数
equalTo: 与指定字段值相同
minlength: 最小长度
maxlength: 最大长度
range: 数值范围

动态表单校验

对于动态添加的表单元素，需要重新初始化校验：

$("#addBtn").click(function() {
  $("#myForm").append('<input type="text" name="dynamicField">');
  $("#myForm").validate().element("input[name='dynamicField']");
});

标签: jquery