用戶名不能為空

在表單中經常些必填項目，如果用戶沒有輸入則不允許提交表單。例如在注冊用戶時，必須填寫用戶名才能提交注冊信息。驗證用戶是否輸入時，通常需要先過濾再驗證（如果用戶輸入的都是空格就相當於沒有輸入）。

我們通過使用正則表達式匹配空格

var regex = /\s+/g;

調用string的replace方法清除空格

string.replace(regex,'');

創建一個函數：

function regexEmpty(obj){
     obj.value = obj.value.replace(regex,'');
}

具體代碼如下：

HTML:

< div class= "main">
           < input id= "userName" type= "text" placeholder= "請輸入用戶名" >
           < input id= "rule" type= "button" value= "驗證">
</ div>

 

css:

html,body ,div, input{margin :0; padding:0 ;}
            .main{width :400px ;height: auto;padding :0 15px; text-align:center; }
            .main input{width :100% ;height: 35px; border:none ;margin-top: 20px; border-radius:5 px;}
           input[type ="text"] {text-align: left;padding-left :15px ;box-sizing: border-box;border :1px solid green; }
            input[type ="button"] {width: 50%; background:green; }

javascript:

var userName = document.getElementById('userName' ),
                rule  = document.getElementById( 'rule'),
                deleteEmpty = null,
                regex    = /\s+/g;
            deleteEmpty = function (obj){
                obj.value = obj.value.replace(regex,'' );
                 if(! obj.value){
                     alert( '用戶名不能為空' );
                } else{
                        alert('pass');
                }
           }
           rule. onclick = function (){
                deleteEmpty(userName);
};

demo演示地址：點擊這里