首页JavaScript+CSS+html【练习题】JS正则表达式验证表单

JavaScript+CSS+html【练习题】JS正则表达式验证表单

时间: 2024-10-15 08:17:45 浏览: 27

在JavaScript中，正则表达式常用于验证用户输入的数据，尤其是在HTML表单中。下面是一个简单的例子，展示如何使用正则表达式来验证电子邮件地址的格式： ```html <!DOCTYPE html> <html lang="zh"> <head> <style> .error { color: red; } </style> </head> <body> <form id="myForm" onsubmit="return validateForm()"> <label for="email">邮箱:</label> <input type="text" id="email" name="email"> <span class="error" id="emailError"></span><br> <input type="submit" value="提交"> </form> <script> function validateForm() { var email = document.getElementById('email').value; var emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; // 正则表达式模式 if (!emailRegex.test(email)) { // 使用test方法检查是否匹配 document.getElementById('emailError').innerText = "请输入有效的邮箱地址"; return false; // 验证失败阻止表单提交 } else { document.getElementById('emailError').innerText = ""; return true; } } </script> </body> </html> ``` 在这个示例中，当用户点击提交按钮时，`validateForm()`函数会被调用。它获取输入框中的值，并通过正则表达式验证其格式是否符合邮箱地址的要求。如果不满足条件，会显示错误信息并阻止表单提交。

阅读全文