代码收藏（六）JavaScript表单提交信息验证_javascript制作个人信息表-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_36486067/article/details/105928206

<!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>