当前位置：首页 > jquery

jquery校验

2026-04-08 02:19:09jquery

jQuery 表单校验方法

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

使用 jQuery Validation 插件 jQuery Validation 是一个流行的插件，专门用于表单验证。需要先引入 jQuery 和 jQuery Validation 插件文件。

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

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

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

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

手动校验实现

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

监听表单提交事件 在表单提交时阻止默认行为，检查字段是否符合条件。

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

  $("input[type='text']").each(function() {
    if ($(this).val().trim() === "") {
      isValid = false;
      $(this).addClass("error");
    } else {
      $(this).removeClass("error");
    }
  });

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

实时校验 通过监听输入事件，在用户输入时实时反馈校验结果。

$("#email").on("input", function() {
  var email = $(this).val();
  var emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;

  if (emailRegex.test(email)) {
    $(this).removeClass("error").addClass("success");
  } else {
    $(this).removeClass("success").addClass("error");
  }
});

校验反馈样式

通过 CSS 为校验状态添加视觉反馈。

.error {
  border: 1px solid red;
}
.success {
  border: 1px solid green;
}
.error-message {
  color: red;
  font-size: 12px;
}

动态显示错误消息 在手动校验中动态插入或显示错误消息。

jquery校验

$("#username").on("blur", function() {
  if ($(this).val().length < 5) {
    $("#username-error").text("用户名至少5个字符").show();
  } else {
    $("#username-error").hide();
  }
});

以上方法涵盖了从插件到手动实现的 jQuery 表单校验技术，可根据项目需求选择适合的方式。

标签: jquery