VanillaJS-task2：一种使用正则表达式对其进行验证的注册表格

在JavaScript的纯原生环境下（即VanillaJS）开发网页应用时，经常需要处理用户输入的数据，例如在注册表格中验证用户输入的信息。本项目"VanillaJS-task2"聚焦于利用正则表达式实现注册表格的前端验证，确保用户提交的数据格式正确，提升用户体验并减少服务器端的无效负载。 正则表达式是处理字符串的强大工具，能够匹配、查找、替换等操作，尤其在验证用户输入格式方面表现出色。例如，我们可以用正则表达式来检查邮箱的格式是否合法，手机号码是否符合规定，密码强度是否足够等。在注册表格中，常见的验证规则包括： 1. **邮箱验证**：一个有效的邮箱格式通常遵循`^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$`这样的正则模式。这个模式包含了邮箱地址的基本结构，即用户名@域名.顶级域。 2. **手机号码验证**：这取决于具体国家或地区的手机号码格式。例如，中国的手机号码通常以13、14、15、16、17、18、19开头，且总长度为11位，所以可以使用`^1[3-9]\d{9}$`进行验证。 3. **密码强度验证**：一般会要求用户设置包含大小写字母、数字和特殊字符的复杂密码。例如，`^(?=.*[A-Za-z])(?=.*\d)(?=.*[@$!%*#?&])[A-Za-z\d@$!%*#?&]{8,}$`这个正则表达式至少需要8个字符，包含至少一个大写字母、一个小写字母和一个数字。 在VanillaJS中，我们可以使用`addEventListener`来监听表单的提交事件，然后在`event.preventDefault()`阻止默认提交行为后，调用正则表达式进行验证。例如： ```javascript document.querySelector('form').addEventListener('submit', function(event) { event.preventDefault(); const email = document.querySelector('#email').value; const phoneNumber = document.querySelector('#phone').value; const password = document.querySelector('#password').value; const emailRegex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/; const phoneRegex = /^1[3-9]\d{9}$/; const passwordRegex = /^(?=.*[A-Za-z])(?=.*\d)(?=.*[@$!%*#?&])[A-Za-z\d@$!%*#?&]{8,}$/; if (!emailRegex.test(email)) { alert('请输入有效的邮箱地址'); return; } if (!phoneRegex.test(phoneNumber)) { alert('请输入有效的手机号码'); return; } if (!passwordRegex.test(password)) { alert('密码必须包含至少一个大写字母、一个数字和一个特殊字符，且长度至少8位'); return; } // 如果所有验证都通过，可以在这里发送数据到服务器 }); ``` 在这个示例中，我们首先获取表单中的邮箱、手机号码和密码输入值，然后使用对应的正则表达式进行验证。如果验证失败，将向用户显示错误提示。 在"VanillaJS-task2-master"这个项目中，你可以找到完整的代码实现，包括HTML结构、CSS样式以及JavaScript逻辑。通过研究这个项目，你不仅能学习如何使用正则表达式进行前端验证，还能了解到如何组织和管理一个小型的VanillaJS应用。对于想要提升JavaScript技能或者深入理解前端验证的开发者来说，这是一个很好的实践案例。