在表单中经常些必填项目,如果用户没有输入则不允许提交表单。例如在注册用户时,必须填写用户名才能提交注册信息。验证用户是否输入时,通常需要先过滤再验证(如果用户输入的都是空格就相当于没有输入)。
我们通过使用正则表达式匹配空格
1 var regex = /\s+/g;
调用string的replace方法清除空格
1 string.replace(regex,'');
创建一个函数:
1 function regexEmpty(obj){2 obj.value = obj.value.replace(regex,'');3 }
具体代码如下:
HTML:
1 < div class= "main">2 < input id= "userName" type= "text" placeholder= "请输入用户名" >3 < input id= "rule" type= "button" value= "验证">4
css:
1 html,body ,div, input{ margin :0; padding:0 ;}2 .main{ width :400px ;height: auto;padding :0 15px; text-align:center; }3 .main input{ width :100% ;height: 35px; border:none ;margin-top: 20px; border-radius:5 px;}4 input[type ="text"] { text-align: left;padding-left :15px ;box-sizing: border-box;border :1px solid green; }5 input[type ="button"] { width: 50%; background:green; }
javascript:
1 var userName = document.getElementById('userName' ), 2 rule = document.getElementById( 'rule'), 3 deleteEmpty = null, 4 regex = /\s+/g; 5 deleteEmpty = function (obj){ 6 obj.value = obj.value.replace(regex,'' ); 7 if(! obj.value){ 8 alert( '用户名不能为空' ); 9 } else{10 alert('pass');11 }12 }13 rule. onclick = function (){14 deleteEmpty(userName);15 };