使用JS正則表達式實現用戶名驗證

當注冊某網站用戶名時，需要根據網站定義的規則來進行填寫，比如：只能使用字母，數字以及下划線。

此規則適用正則表達式來定義

分析：

當用戶輸入的用戶名不符合規則時，頁面給出提示且不進行提交。

當用戶輸入的用戶名符合規則時，頁面提交給服務器。

 

實現：

1.當不符合規則時給出提示，使用css的display屬性，當display設置為none，提示信息被隱藏。所以用戶名輸入錯誤時，將display設置為block顯示給用戶即可。

2.可以根據事件的返回值，來判斷是否進行提交，當用戶名不符合規則，即不提交，返回false即可。

上述實現使用一個事件來完成。

事件代碼

function checkForm(){
            //1.定義正則
            var reg = /^[a-zA-Z0-9_-]{4,16}$/;
            
            //2.獲取輸入的用戶名的內容(獲取標簽的value值)
            var username = document.getElementById("username").value;
            alert(username);
            //3.進行校驗
            if (reg.test(username)) {
                return true;
            } else{
                //1.給出提示信息
                document.getElementById("namets").style.display = "block";
                //2.不提交
                return false;
            }
        }

注意：在標簽中使用函數的返回值，需要加上return