当前位置：首页 > jquery

jquery注册验证

2026-03-16 15:33:09jquery

jQuery 注册验证实现方法

使用 jQuery 可以方便地实现前端表单验证功能，以下是一个完整的注册表单验证示例。

表单 HTML 结构

<form id="registerForm">
  <div>
    <label for="username">用户名:</label>
    <input type="text" id="username" name="username">
    <span class="error" id="usernameError"></span>
  </div>

  <div>
    <label for="email">邮箱:</label>
    <input type="email" id="email" name="email">
    <span class="error" id="emailError"></span>
  </div>

  <div>
    <label for="password">密码:</label>
    <input type="password" id="password" name="password">
    <span class="error" id="passwordError"></span>
  </div>

  <div>
    <label for="confirmPassword">确认密码:</label>
    <input type="password" id="confirmPassword" name="confirmPassword">
    <span class="error" id="confirmPasswordError"></span>
  </div>

  <button type="submit">注册</button>
</form>

jQuery 验证代码

$(document).ready(function() {
  $('#registerForm').submit(function(e) {
    e.preventDefault();
    let isValid = true;

    // 用户名验证
    const username = $('#username').val().trim();
    if(username === '') {
      $('#usernameError').text('用户名不能为空');
      isValid = false;
    } else if(username.length < 3) {
      $('#usernameError').text('用户名至少3个字符');
      isValid = false;
    } else {
      $('#usernameError').text('');
    }

    // 邮箱验证
    const email = $('#email').val().trim();
    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
    if(email === '') {
      $('#emailError').text('邮箱不能为空');
      isValid = false;
    } else if(!emailRegex.test(email)) {
      $('#emailError').text('请输入有效的邮箱地址');
      isValid = false;
    } else {
      $('#emailError').text('');
    }

    // 密码验证
    const password = $('#password').val();
    if(password === '') {
      $('#passwordError').text('密码不能为空');
      isValid = false;
    } else if(password.length < 6) {
      $('#passwordError').text('密码至少6个字符');
      isValid = false;
    } else {
      $('#passwordError').text('');
    }

    // 确认密码验证
    const confirmPassword = $('#confirmPassword').val();
    if(confirmPassword === '') {
      $('#confirmPasswordError').text('请确认密码');
      isValid = false;
    } else if(password !== confirmPassword) {
      $('#confirmPasswordError').text('两次密码不一致');
      isValid = false;
    } else {
      $('#confirmPasswordError').text('');
    }

    if(isValid) {
      alert('注册成功');
      // 这里可以添加表单提交逻辑
    }
  });
});

CSS 样式

.error {
  color: red;
  font-size: 12px;
  margin-left: 10px;
}

input {
  margin-bottom: 10px;
}

验证规则说明

用户名验证要求：

不能为空
长度至少3个字符

邮箱验证要求：

不能为空
符合标准邮箱格式

密码验证要求：

不能为空
长度至少6个字符
两次输入密码必须一致

实时验证实现

如需实现输入时实时验证，可以添加以下代码：

jquery注册验证

$('#username').on('input', function() {
  // 用户名实时验证逻辑
});

$('#email').on('input', function() {
  // 邮箱实时验证逻辑
});

$('#password, #confirmPassword').on('input', function() {
  // 密码实时验证逻辑
});