技術標籤：javascript

首先有三個文字框，和一個提交按鈕，第一個輸入賬號，第二個密碼，第三個手機號
我們的需求：判斷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>