使用JavaScript正则验证表单输入合法性

该资源是一个使用JavaScript实现的简单表单验证页面，主要目的是通过正则表达式检查用户在界面上输入的基本字符是否符合规范。页面包含QQ号、手机号和邮箱三项输入，每项输入都有相应的验证规则。 在这个HTML文档中，表单验证是通过JavaScript函数`Fsubmit()`在用户提交表单时触发的。为了确保输入的QQ号、手机号和邮箱格式正确，我们需要编写对应的正则表达式，并将其应用到输入字段的验证中。 QQ号通常由5-11位数字组成，因此一个简单的QQ号正则表达式可以是`/^\d{5,11}$/`，它会匹配5到11个连续的数字。 手机号在中国通常以13、14、15、16、17、18或19开头，后面跟着9位数字，所以一个手机号的正则表达式可以是`/^1[3-9]\d{9}$/`，这将匹配以1开头，第二位是3到9之间的数字，后面跟着9位数字的字符串。 邮箱地址的正则表达式相对复杂，通常包含字母、数字、点和下划线，且必须以@符号分隔域名和顶级域名，例如`.com`、`.net`等。一个简单的邮箱正则表达式可以是`/^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/`，它能匹配大多数常见格式的邮箱地址。 在JavaScript中，我们可以为每个输入字段添加事件监听器，例如`input`事件，实时检查用户的输入。当用户离开输入框（失去焦点）时，我们调用验证函数，如果输入不符合规定，可以在对应的`<span>`元素中显示错误信息。 以下是可能的JavaScript实现： ```javascript function Fsubmit() { var iptqq = document.getElementById('iptqq'); var iptPhone = document.getElementById('iptPhone'); var iptEmail = document.getElementById('iptEmail'); // QQ号验证 if (!/^\d{5,11}$/.test(iptqq.value)) { iptqq.nextElementSibling.innerHTML = "请输入正确的QQ号"; return false; } else { iptqq.nextElementSibling.innerHTML = ""; } // 手机号验证 if (!/^1[3-9]\d{9}$/.test(iptPhone.value)) { iptPhone.nextElementSibling.innerHTML = "请输入正确的手机号"; return false; } else { iptPhone.nextElementSibling.innerHTML = ""; } // 邮箱验证 if (!/^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/.test(iptEmail.value)) { iptEmail.nextElementSibling.innerHTML = "请输入正确的邮箱地址"; return false; } else { iptEmail.nextElementSibling.innerHTML = ""; } } // 添加事件监听器 iptqq.addEventListener('blur', Fsubmit); iptPhone.addEventListener('blur', Fsubmit); iptEmail.addEventListener('blur', Fsubmit); ``` 在这个例子中，当用户在输入框失去焦点（`blur`事件）时，`Fsubmit`函数会被调用，验证输入并显示相应的错误提示。如果所有输入都符合要求，表单才能成功提交。这个简单的验证机制可以防止用户提交无效数据，提高用户体验，并减轻服务器端的验证压力。