jQuery表单验证

学习使用jQuery实现表单实时验证，包括必填字段、邮箱格式和密码强度检查。 · 难度：入门 · +15XP

jQuery表单验证

表单验证是Web开发中必不可少的环节，它能帮助用户正确填写数据，减少服务器压力。使用jQuery可以轻松实现客户端验证，提升用户体验。

基础概念

表单验证通常包括：必填项检查、格式校验（如邮箱、电话）、长度限制等。jQuery通过事件监听（如blur、submit）和DOM操作来显示错误信息。

核心方法

• .val() - 获取或设置表单值
• .addClass() / .removeClass() - 控制样式
• .text() - 动态更新提示信息

示例代码

$(document).ready(function() {
  $('#myForm').on('submit', function(e) {
    e.preventDefault();
    var email = $('#email').val();
    var password = $('#password').val();
    if (email === '' || !email.includes('@')) {
      $('#emailError').text('请输入有效邮箱');
    } else {
      $('#emailError').text('');
    }
    if (password.length < 6) {
      $('#passwordError').text('密码至少6位');
    } else {
      $('#passwordError').text('');
    }
  });
});

验证规则表

练习提示

尝试在右侧编辑器中添加一个电话字段验证（要求11位数字），并在提交时检查。