技術標籤：JavaScriptjavascriptcsshtmlhtml5

很多頁面都會有表單提交，驗證表單資料是否正確，是要把表單提交到服務端，跟資料庫進行比對。然而有些簡單的事情，其實前端就可以先驗證一下，比如字元格式，輸入長度等資訊，通過JS對錶單基本情況進行驗證，避免每次都要去請求服務端，提高網頁效能。
驗證的正則表示式根據自己的需求可以自行修改。
簡單的寫了四個驗證，分別是使用者名稱、密碼、手機和郵箱。

• 以下是html結構
  span裡面的提示資訊設定了隱藏，不符合規則時顯示，符合規則後隱藏

<form>
        <label>
            <
 
b>使用者名稱：</b><input type="text" class="username">
            <span>使用者名稱不符合規則</span>
        </label>
        <label>
            <b>密 碼：</b><input type="text" class="password">
            <span>密碼不符合規則</
 
span>
        </label>
        <label>
            <b>手機號：</b><input type="text" class="telphone">
            <span>手機號不符合規則</span>
        </label>
        <label>
            <b>郵 箱：</b><input type="text"
 
 class="email">
            <span>郵箱不符合規則</span>
        </label>
        <button>登入</button>
    </form>

• 以下是CSS樣式

* {
            margin: 0;
            padding: 0;
        }

        b {
            font-weight: 400;
            width: 80px;
            display: inline-block;
        }

        form {
            width: 500px;
            margin: 100px auto;
            display: flex;
            flex-direction: column;
            border: 1px solid #ccc;
            padding: 20px;
        }

        label {
            margin: 5px;
        }

        input {
            outline: none;
        }

        span {
            color: red;
            display: none;
        }

        button {
            margin-top: 5px;
        }
		// label有error類名時，input的樣式
        label.error > input {
            border: 1px solid red;
        }
		// label有error類名時，span的樣式
        label.error > span {
            display: inline;
        }

• 以下是JS程式碼
  首先獲取需要繫結事件的元素，以及把正則組合為一個物件

	var inps = document.querySelectorAll('input')
        // 正則組合物件
        var regObj = {
        	// 使用者名稱規則：6-12位數字字母下劃線，開頭不能是下劃線
            username: /^[0-9a-z]\w{5,11}$/i,
            // 密碼規則：6-12位數字字母下劃線
            password: /^\w{6,12}$/,
            // 手機號規則：+86開頭可有可無，手機號133或者135或者188號段開頭
            telphone: /^(\+86)?(133|135|188)\d{8}$/,
            email: /^[0-9a-z]\w{5,11}@(qq|163)\.(com|cn)$/
        }

單個輸入框驗證。實時驗證，每次輸入都會檢測一次。
驗證不通過，給label加類名error，顯示提示資訊。驗證通過，則去掉error類名，提示資訊也隱藏。
將處理事件函式提出來單獨寫，也可以放進監聽器裡寫的，這裡為了讓程式碼更清晰。

		// 輸入框繫結事件
        inps.forEach(function (item) {
            item.addEventListener('input',handler)
        })
        // 輸入框處理事件函式----驗證函式
        function handler () {
        	//獲取到輸入的值
            var text = this.value
            // 輸入框的類名與正則的對應成員名取成一樣，方便調取
            var reg = regObj[this.className]
            // 驗證不通過
            if (!reg.test(text)) {
                // label新增error類名
                this.parentNode.classList.add('error')
                // 給input取消識別符號
                //驗證不通過把input的自定義屬性pass刪除（後續表單提交驗證會用到）
                this.removeAttribute('pass')
                return
            }
            // 驗證通過
            // label移除error類名
            this.parentNodinpute.classList.remove('error')
            // 給input設定識別符號
            // 驗證通過後給input新增一個自定義屬性pass值為1（後續表單提交驗證會用到）
            this.setAttribute('pass',1)
        }

點選表單的提交按鈕，驗證表單中是否所有輸入框都符合規則。
前面有給驗證通過的input新增自定義屬性pass，可以通過檢測含有pass屬性的input個數，來確認是否可以提交表單到伺服器。

var form = document.querySelector('form')
        form.addEventListener('submit',function (e){
        	// 處理事件物件相容
            e = e || window.event
            // 處理取消表單預設事件相容
            if(e.preventDefault) {
                e.preventDefault()
            } else {
                e.returnValue = false
            }
			// 自定義一個計數器，記錄含有pass屬性的input個數
            var count = 0

            inps.forEach(function (item) {
                var res = item.getAttribute('pass')
                // 沒有pass屬性，即沒有通過驗證，或者沒有書寫
                if (!res) {
                	// 他的父親類名新增error，
                    item.parentNode.classList.add('error')
                    // 否則就是通過了，計數器+1
                } else {
                    count++
                }
            })
			//計數器等於輸入框的數量時，才說明每條輸入框都通過了驗證
			// 不等於即至少有一個不沒有通過驗證，或者沒有寫入資訊
            if (count !== inps.length) {
                alert('請您輸入完整的表單')
                return
            } 

            alert('提交成功')
        })