jquery 校验

jQuery 校验方法

使用 jQuery 进行表单校验可以通过多种方式实现，以下是常见的几种方法：

使用 jQuery Validate 插件

jQuery Validate 是一个流行的表单校验插件，提供丰富的校验规则和自定义选项。

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

自定义校验方法

可以通过 jQuery 扩展自定义校验规则：

$.validator.addMethod("phone", function(value, element) {
  return this.optional(element) || /^\d{11}$/.test(value);
}, "请输入11位手机号码");

实时校验

在输入时实时校验：

$("#email").on("blur", function() {
  const email = $(this).val();
  if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) {
    $(this).next(".error").text("邮箱格式不正确");
  } else {
    $(this).next(".error").text("");
  }
});

表单提交前校验

在表单提交前进行整体校验：

$("#myForm").submit(function(e) {
  e.preventDefault();
  let isValid = true;

  $("input[required]").each(function() {
    if ($(this).val() === "") {
      $(this).next(".error").text("此项为必填项");
      isValid = false;
    }
  });

  if (isValid) {
    this.submit();
  }
});

常用校验规则示例

• 必填字段：required: true
• 最小长度：minlength: 5
• 最大长度：maxlength: 20
• 邮箱格式：email: true
• 数字范围：range: [1, 100]
• 正则匹配：pattern: /^[A-Za-z]+$/

错误提示样式

可以自定义错误提示的样式：

.error {
  color: red;
  font-size: 12px;
  margin-top: 5px;
}
input.error {
  border: 1px solid red;
}

以上方法可以根据实际需求组合使用，实现灵活的表单校验功能。