jquery 验证

jQuery 表单验证方法

jQuery 表单验证可以通过多种方式实现，包括使用原生 jQuery 或插件如 jQuery Validation Plugin。以下是几种常见的验证方法：

使用 jQuery Validation Plugin

1. 引入必要的库文件

   <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>

2. 基本表单验证示例

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

自定义验证方法

可以通过 $.validator.addMethod() 添加自定义验证规则：

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

// 使用自定义规则
$("#myForm").validate({
  rules: {
    username: {
      required: true,
      noSpace: true
    }
  }
});

异步验证

实现远程验证（如检查用户名是否已存在）：

$("#myForm").validate({
  rules: {
    username: {
      required: true,
      remote: {
        url: "check-username.php",
        type: "post"
      }
    }
  }
});

手动触发验证

可以通过 valid() 方法手动检查表单是否有效：

if ($("#myForm").valid()) {
  // 表单验证通过
}

验证事件

可以绑定验证成功或失败的事件：

$("#myForm").validate({
  invalidHandler: function(event, validator) {
    // 验证失败时执行
  },
  submitHandler: function(form) {
    // 验证通过时执行
    form.submit();
  }
});

原生 jQuery 验证实现

如果不使用插件，可以用原生 jQuery 实现基本验证：

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

  // 验证用户名
  if ($("#username").val().length < 5) {
    isValid = false;
    $("#usernameError").text("用户名至少5个字符");
  }

  // 验证邮箱
  if (!isValidEmail($("#email").val())) {
    isValid = false;
    $("#emailError").text("请输入有效的邮箱地址");
  }

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

function isValidEmail(email) {
  const re = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
  return re.test(email);
}

验证样式自定义

可以通过 CSS 自定义验证错误样式：

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

常见验证规则

1. 必填字段验证

   

   required: true

2. 最小长度验证

   minlength: 5

3. 最大长度验证

   maxlength: 20

4. 邮箱格式验证

   email: true

5. 数字验证

   number: true

6. 范围验证

   range: [18, 100]

7. 正则表达式验证

   pattern: /^[A-Za-z]+$/