首先有三个文本框，和一个提交按钮，第一个输入账号，第二个密码，第三个手机号
我们的需求：判断3个文本框是否全部输入正确，当我们点击提交时，如果有一个输入错误则不能提交，全部输入正确则提交成功；
下面直接上代码
表单代码
<form action=""><input type="text"><span></span><br><input type="text"><span></span><br><input type="text"><span></span><br><input type="submit"></form>
JS代码
<script>var ids;//获取表单，给表单添加输入事件和提交事件var form = document.querySelector("form");form.addEventListener("submit", formHandler);form.addEventListener("input", formHandler);//获取所有的input元素列表并转换为数组var list = Array.from(document.querySelectorAll("input"));//删除数组最后一个元素，也就是删除submit 提交，数组保留3个文本框list.pop();// 创建一个数组，里面给入3个false，意味着初始没输入时默认错误var arr = [];for (var i = 0; i < list.length; i++) {arr.push(false);}function formHandler(e) {//输入时，查找点击元素在数组中的下标,并且判断输入内容是否符合我们设置的标准if (e.type === "input") {//节流if (ids) return;ids = setTimeout(function () {clearTimeout(ids);ids = 0;var index = list.indexOf(e.target);// 将返回的布尔值赋值给boolvar bool = getVerify(index, e.target.value);if (bool) {// bool值为true时，输入正确时，在span里面显示文本内容设置颜色e.target.nextElementSibling.textContent = "输入正确";e.target.nextElementSibling.style.color = "green";} else {// bool值为false时，输入错误，在span里面显示文本内容设置颜色e.target.nextElementSibling.textContent = "输入错误";e.target.nextElementSibling.style.color = "red";}console.log(arr, index)// 将返回的bool值添加至数组对应的下标，输入正确返回true错误返回falsearr[index] = bool;}, 500)} // 当提交时，并且在数组里查找不到false，提交成功，否则不能提交else if (e.type === "submit" && arr.indexOf(false) === -1) {} else {e.preventDefault();console.log("请输入正确后提交");}}function getVerify(index, value) {//判断点击元素的下标，这里return返回的都是一个布尔值switch (index) {// 下标为0时，第一个文本框，我们认为是账户，在输入的值中查找是否符合正则（8-16位数字，字母下划线组合）case 0:return /^\w{8,16}$/.test(value);//下标为1时，第二个文本框，我们认为是密码case 1:return /^(?=\D+\d)(?=.*[a-z])(?=.*[A-Z])[0-9a-zA-Z]{8,16}$/.test(value);// 下标为2时，第三个文本框，我们认为是电话，简单写的正则，只限定了1开头后面跟10位数字case 2:return /^1\d{10}$/.test(value);}}</script>
