html表单验证用js拦截提交并检查数据，1.获取表单和输入元素；2.添加submit事件监听器；3.验证邮箱和密码格式；4.失败则阻止提交并提示错误；5.使用正则表达式校验复杂规则；6.通过input事件实现即时验证；7.异步验证需用fetch api结合blur事件减少请求频率；8.优化体验包括即时反馈、清晰提示、避免频繁验证、提升无障碍性。
HTML表单验证，用JS来搞定，核心就是拦截表单提交，然后用各种JS技巧来检查用户输入的数据是否符合预期。比如，是不是填了必填项，邮箱格式对不对，密码强度够不够等等。如果验证没通过，就阻止表单提交，给用户一个友好的提示。
解决方案
首先，你需要获取表单元素和需要验证的输入元素。这可以用document.getElementById 或者 document.querySelector来实现。
立即学习“前端免费学习笔记（深入）”；
这段代码做了这些事情：
- 获取了表单和输入框元素。
- 给表单添加了一个
submit事件监听器。 - 在提交的时候，先验证邮箱和密码。
- 如果验证失败，就显示错误信息，并阻止表单提交。
-
validateEmail函数使用正则表达式来验证邮箱格式。
如何使用input事件进行实时验证？
input事件会在输入框的值发生变化时触发。你可以利用它来实时验证用户的输入，提供即时反馈。
这段代码监听了username输入框的input事件。当用户输入内容时，会立即检查用户名长度，并显示相应的错误信息。
如何使用正则表达式进行更复杂的验证？
正则表达式是进行复杂字符串匹配的利器。上面邮箱验证就是一个例子。 再举个例子，验证手机号码：
function validatePhoneNumber(phoneNumber) {
const re = /^1[3456789]\d{9}$/; // 中国大陆手机号码
return re.test(phoneNumber);
}这个正则表达式^1[3456789]\d{9}$的含义是：
-
^: 匹配字符串的开头。 -
1: 必须以1开头。 -
[3456789]: 第二位可以是3、4、5、6、7、8、9中的任意一个数字。 -
\d{9}: 后面跟着9个数字。 -
$: 匹配字符串的结尾。
如何处理异步验证，比如检查用户名是否已存在？
有时候，你需要向服务器发送请求来验证数据，比如检查用户名是否已经被注册。这需要用到异步操作。
这段代码使用了fetch API来向后端发送请求，检查用户名是否存在。注意，这里使用了async/await语法，让异步代码看起来更像同步代码。 另外，使用了blur事件，在输入框失去焦点时才进行验证，避免频繁请求。
如何优化表单验证的用户体验？
-
即时反馈： 使用
input事件提供即时验证反馈。 - 清晰的错误提示： 错误信息要明确指出问题所在。
- 避免过度验证： 不要在用户输入时过于严格地验证，可以等到用户完成输入后再进行验证。
- 无障碍性： 确保验证信息对屏幕阅读器等辅助技术友好。可以使用ARIA属性来增强无障碍性。
- 表单聚焦： 当验证失败时，将焦点设置到第一个错误的输入框。
例如，使用ARIA属性：
请输入您的邮箱地址。
aria-describedby 关联输入框和描述信息，role="alert" 告诉屏幕阅读器这是一个警告信息。
