当前位置：首页 > JavaScript

js实现验证

2026-01-12 13:43:40JavaScript

验证表单输入

使用JavaScript验证表单输入是常见的需求。可以通过监听表单提交事件，检查输入字段是否符合要求。

document.getElementById('myForm').addEventListener('submit', function(event) {
  const email = document.getElementById('email').value;
  const password = document.getElementById('password').value;

  if (!email.includes('@')) {
    alert('请输入有效的邮箱地址');
    event.preventDefault();
  }

  if (password.length < 8) {
    alert('密码长度不能少于8个字符');
    event.preventDefault();
  }
});

正则表达式验证

正则表达式是强大的验证工具，可以用于验证各种格式的数据。

function validatePhoneNumber(phone) {
  const regex = /^1[3-9]\d{9}$/;
  return regex.test(phone);
}

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

实时输入验证

在用户输入时实时验证可以提升用户体验，减少表单提交时的错误。

document.getElementById('username').addEventListener('input', function() {
  const username = this.value;
  const feedback = document.getElementById('usernameFeedback');

  if (username.length < 4) {
    feedback.textContent = '用户名至少需要4个字符';
    feedback.style.color = 'red';
  } else {
    feedback.textContent = '用户名可用';
    feedback.style.color = 'green';
  }
});

自定义验证规则

可以创建自定义验证函数来处理特定的验证需求。

function validatePassword(password) {
  const hasNumber = /\d/.test(password);
  const hasUpper = /[A-Z]/.test(password);
  const hasLower = /[a-z]/.test(password);

  return password.length >= 8 && hasNumber && hasUpper && hasLower;
}

HTML5内置验证

结合HTML5的内置验证属性可以简化部分验证工作。

<input type="email" required>
<input type="password" minlength="8" required>
<input type="number" min="18" max="99">

验证库的使用

对于复杂项目，可以考虑使用专门的验证库如validator.js或Yup。

// 使用validator.js示例
const validator = require('validator');

validator.isEmail('test@example.com'); // true
validator.isMobilePhone('13800138000', 'zh-CN'); // true

错误信息展示

良好的错误信息展示对用户体验至关重要。

function showError(inputElement, message) {
  const errorElement = document.createElement('div');
  errorElement.className = 'error-message';
  errorElement.textContent = message;
  errorElement.style.color = 'red';

  inputElement.parentNode.appendChild(errorElement);
}

异步验证

某些验证可能需要与服务器交互，进行异步验证。

async function checkUsernameAvailability(username) {
  const response = await fetch(`/api/check-username?username=${username}`);
  const data = await response.json();
  return data.available;
}