JavaScript表单验证实战详解
JavaScript表单验证实战详解
表单验证是前端开发中非常重要的一个环节，JavaScript作为前端开发的一种主要语言，有很多优秀的表单验证插件，不过我们还是需要掌握原生的表单验证方法，尤其是在一些场景下，比如需要和后端交互的情况下，我们需要更灵活和定制化的表单验证方式。
下面，我们介绍一种常用的表单验证实现方法，具体步骤如下：
- 定义HTML表单。
html
- 编写JavaScript代码。
```javascript
// 获取表单元素
const form = document.querySelector('form');
const username = form.querySelector('input[name=username]');
const password = form.querySelector('input[name=password]');
const submitBtn = form.querySelector('button[type=submit]');
// 定义验证规则
const rules = {
username: {
required: true,
message: '请填写用户名'
},
password: {
required: true,
message: '请填写密码'
}
};
// 添加表单验证事件
submitBtn.addEventListener('click', () => {
let isValid = true; // 验证是否通过标志位
Object.keys(rules).forEach((key) => { // 遍历规则验证
const rule = rules[key];
const value = form[key].value;
if (rule.required && !value) {
alert(rule.message);
isValid = false;
}
});
if (!isValid) { // 验证未通过
return;
}
// 验证通过，执行登录操作
// ...
});
```
- 测试表单验证。
我们可以尝试不填写用户名和密码，直接点击登录按钮，可以看到弹出相应的提示信息。
以上就是本文介绍的表单验证实现方法，希望能在您的前端开发实践中有所帮助。
参考资料：
JavaScript表单验证实战详解 | Juejin