<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form action="http://www.163.com">
<input type="text" /><span></span><br />
<input type="text" /><span></span><br />
<input type="text" /><span></span><br />
<input type="submit" />
</form>
<script type="text/javascript">
//1.获取表单from
//2.获取所有input的值并转为数组,将submit的属性删除
//3.以form为侦听对象创建input和submit侦听事件,在此form拥有冒泡的属性
//4.进入判断点击目标type的类型是input还是submit
//4.1 如果是input则利用数组查找当前所点击的目标,属性是为几
//创建函数,根据点击的属性设置填写条件,并以test返回false或者true
//根据返回值布尔值判断,设置span对应显示内容
//创建一个arr空数组,接受填写过后的布尔值
//4.2 如果是submit,则判断查找arr是否存在false值。
//如果存在,则禁止跳转
//如果不存在,则跳转。
var form = document.querySelector("form");
var list = Array.from(document.getElementsByTagName("input"));
list.pop(1);
console.log(list);
form.addEventListener("input", formChange);
form.addEventListener("submit", formChange);
var arr = [];
function formChange(e) {
if (e.type === "input") {
//console.log(e.target);//<input type="text" />
var index = list.indexOf(e.target);
//console.log(index);//0 1 2
var bool = getVerify(index, e.target.value);
if (bool) {
e.target.nextElementSibling.textContent = "输入正确";
} else {
e.target.nextElementSibling.textContent = "输入错误";
e.target.nextElementSibling.style.color = "red";
}
arr[index] = bool;
console.log(arr);
} else if (e.type === "submit") {
if (arr.indexOf(false) === -1) {
} else {
e.preventDefault();
console.log("请输入正确后再提价");
}
}
}
function getVerify(index, value) {
switch (index) {
case 0: return /^\w{8,16}$/.test(value);
case 1: return /^(?=\D+\d)(?=.*[a-z])(?=.*[A-Z])[a-zA-Z0-9]{8,16}$/.test(value);
case 2: return /^1\d{10}$/.test(value);
}
}
</script>
</body>
</html>
代码收藏(六)JavaScript表单提交信息验证
最新推荐文章于 2023-04-10 19:52:28 发布