JS正则表达式实现简单的表单验证(账号,密码,手机号)

首先有三个文本框,和一个提交按钮,第一个输入账号,第二个密码,第三个手机号
我们的需求:判断3个文本框是否全部输入正确,当我们点击提交时,如果有一个输入错误则不能提交,全部输入正确则提交成功;

在这里插入图片描述
下面直接上代码
表单代码

 <form action="http://www.taobao.com">
        <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);
                    // 将返回的布尔值赋值给bool
                    var 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错误返回false
                    arr[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>
已标记关键词 清除标记
相关推荐
©️2020 CSDN 皮肤主题: 1024 设计师:白松林 返回首页