jquery校验

jQuery 表单校验方法

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

使用 jQuery Validate 插件

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: 3
    },
    email: {
      required: true,
      email: true
    }
  },
  messages: {
    username: {
      required: "请输入用户名",
      minlength: "用户名至少3个字符"
    },
    email: {
      required: "请输入邮箱",
      email: "请输入有效的邮箱地址"
    }
  }
});

自定义校验方法

如果不使用插件，可以通过 jQuery 事件和条件判断实现校验。

$("#myForm").submit(function(event) {
  var isValid = true;

  // 校验用户名
  if ($("#username").val().length < 3) {
    alert("用户名至少3个字符");
    isValid = false;
  }

  // 校验邮箱
  var emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
  if (!emailRegex.test($("#email").val())) {
    alert("请输入有效的邮箱地址");
    isValid = false;
  }

  if (!isValid) {
    event.preventDefault();
  }
});

实时校验

可以在用户输入时实时校验，提供即时反馈。

$("#username").on("input", function() {
  if ($(this).val().length < 3) {
    $(this).css("border-color", "red");
  } else {
    $(this).css("border-color", "green");
  }
});

校验规则扩展

自定义校验规则

可以通过 $.validator.addMethod 添加自定义校验规则。

$.validator.addMethod("strongPassword", function(value, element) {
  return /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[a-zA-Z\d]{8,}$/.test(value);
}, "密码必须包含大小写字母和数字，且至少8位");

$("#myForm").validate({
  rules: {
    password: {
      required: true,
      strongPassword: true
    }
  }
});

异步校验

校验数据是否已存在（如用户名查重）。

$.validator.addMethod("checkUsername", function(value, element) {
  var result = false;
  $.ajax({
    url: "/check-username",
    data: { username: value },
    async: false,
    success: function(response) {
      result = response.available;
    }
  });
  return result;
}, "用户名已存在");

错误提示样式

可以通过 CSS 自定义错误提示样式。

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

校验表单提交

确保表单通过校验后才提交。

$("#myForm").validate({
  submitHandler: function(form) {
    // 校验通过后执行
    form.submit();
    // 或使用AJAX提交
    // $.ajax({
    //   url: $(form).attr("action"),
    //   type: "POST",
    //   data: $(form).serialize(),
    //   success: function(response) {
    //     alert("提交成功");
    //   }
    // });
  }
});

以上方法涵盖了 jQuery 表单校验的基本和高级用法，可以根据实际需求选择合适的方式。