当前位置：首页 > jquery

jquery正则验证

2026-02-03 14:54:09jquery

jQuery 正则验证的实现方法

使用 jQuery 结合正则表达式进行表单验证是一种常见的前端验证方式。以下是几种实现方法：

基础正则验证示例

$('#inputField').on('blur', function() {
  var value = $(this).val();
  var regex = /^[a-zA-Z0-9]+$/; // 仅允许字母和数字
  if (!regex.test(value)) {
    alert('输入内容不符合要求');
  }
});

结合事件处理的验证

$('#form').submit(function(e) {
  var email = $('#email').val();
  var emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;

  if (!emailRegex.test(email)) {
    e.preventDefault();
    $('#emailError').text('请输入有效的邮箱地址');
  }
});

常用验证正则表达式

手机号码验证：/^1[3-9]\d{9}$/
身份证号验证：/(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/
密码强度验证（至少8位，含大小写和数字）：/^(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}$/

使用 jQuery Validation 插件

对于更复杂的验证需求，可以使用 jQuery Validation 插件：

$("#myForm").validate({
  rules: {
    username: {
      required: true,
      minlength: 4,
      regex: /^[a-zA-Z0-9_]+$/ // 自定义正则规则
    }
  },
  messages: {
    username: {
      required: "请输入用户名",
      minlength: "用户名至少4个字符",
      regex: "只允许字母、数字和下划线"
    }
  }
});

自定义验证方法

可以扩展 jQuery 的验证方法：

$.validator.addMethod("customRegex", function(value, element, regex) {
  return this.optional(element) || regex.test(value);
}, "请输入符合格式的内容");

// 使用自定义方法
$("#form").validate({
  rules: {
    fieldName: {
      customRegex: /^your-regex-here$/
    }
  }
});

实时验证反馈

$('#inputField').on('input', function() {
  var isValid = /your-regex/.test($(this).val());
  $(this).toggleClass('is-invalid', !isValid);
  $(this).toggleClass('is-valid', isValid);
});

这些方法可以根据实际需求组合使用，实现灵活的表单验证功能。对于复杂项目，建议使用专门的验证库如 jQuery Validation 插件，以减少重复代码并提高可维护性。

jquery正则验证