JavaScript 表单验证教程

JavaScript 表单验证是前端开发中常见且重要的技能。本文将为您介绍如何使用 JavaScript 对表单进行验证，确保用户输入的数据符合预期。

常见验证类型

1. 必填项验证
2. 邮箱验证
3. 密码强度验证
4. 手机号码验证

示例代码

以下是一个简单的邮箱验证示例：

function validateEmail(email) {
  const re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
  return re.test(email);
}

const emailInput = document.getElementById('email');
emailInput.addEventListener('blur', function() {
  if (!validateEmail(emailInput.value)) {
    alert('请输入有效的邮箱地址');
  }
});

扩展阅读

想要了解更多关于 JavaScript 表单验证的知识，可以阅读以下文章：

• JavaScript 表单验证最佳实践

图片示例

JavaScript 表单验证示例