摘要:
今天在项目中遇到一个需求,验证一个文本输入字符串的格式,要求是输入的内容前后不能出现空格符,而字符串中间可以出现一个空格(只能一个,不能连续输入两个空格)。
解决方案:
(1)可以利用trim()方法去除字符串的首尾空格;
(2)利用正则\s{2,}
获取连续出现两个空格的位置,替换成一个空格;
(3)使用onkeyup事件。
实现代码:
html代码:
<input type="text" id="roleid" name="roleName" class="layui-input" onclick="verifyInput()">
js代码:
//文本验证事件
function verifyInput(){
document.onkeyup=function(){
// 合并两个空格为一个空格
String.prototype.ResetBlank=function(){
var regEx = /\s{2,}/g;
return this.replace(regEx, ' ');
};
var str = $("#roleid").val();//获取文本框的值
//重置文本框
$("#roleid").val(str.ResetBlank().trim());//trim()去除首尾空格
}
}
实现效果:
注意:
可能有的人想着,不是可以在中间输入空格吗?那我输入一个不是空格的字符,然后输入一个空格,再继续输入不是空格的字符,这样好像也是可以的。答案是不可行的。
由于使用了trim()去除了字符串的首尾空格,所以你输完一个不是空格的字符之后,鼠标光标的位置就是相当于最后一个位置,所以如果要想在字符串中间加空格,只能输完后再回头加空格,不能直接在一边输入一边在最后一个字符加空格,然后继续输入,这样是不可行的。