JavaScript表单验证实战详解

表单验证是前端开发中非常重要的一个环节，JavaScript作为前端开发的一种主要语言，有很多优秀的表单验证插件，不过我们还是需要掌握原生的表单验证方法，尤其是在一些场景下，比如需要和后端交互的情况下，我们需要更灵活和定制化的表单验证方式。

下面，我们介绍一种常用的表单验证实现方法，具体步骤如下：

  1. 定义HTML表单。

html

  1. 编写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;

}

// 验证通过，执行登录操作

// ...

});

```

  1. 测试表单验证。

我们可以尝试不填写用户名和密码，直接点击登录按钮，可以看到弹出相应的提示信息。

以上就是本文介绍的表单验证实现方法，希望能在您的前端开发实践中有所帮助。

参考资料：

JavaScript表单验证实战详解 | Juejin