来自项目需求。销售给顾客打完电话后会输入一段文本为本次通话做记录,这个文本框要求要么什么也不输,要么输入最少10个字符。然而你懂得,很多时候都是被拒,这种时候其实不需要输入的,而是有一栏专门为被拒准备的按钮,比如“立马挂断”“别再打给我”“打错了”等等,选一个点一下就行。有的销售不知道,还是要在输入框里输入“立马挂断”,然后点保存又提示长度不够,于是就接着输入一堆垃圾字符,比如一长串句号,就像我们在论坛回复“谢谢楼主分享。。。。”一样。
实现也简单,就是正则匹配,以及一个非常简单好用的setSelectionRange方法。
// ...
var cdc = $('#cdc').val().trim();
var ban = /[^\w\d\s\u4e00-\u9fa5]{3,}/g; // 检测连续非字母、数字、空格、中文汉字的字符
if (cdc.length > 0) {
if (cdc.length > 9) {
if (ban.test(cdc)) { // 有非法字符
var matched = cdc.match(ban);
var first = matched[0]; // 取出第一段,因为最多只能选中高亮显示一段
var l = cdc.indexOf(first); // 开头位置
var r = l + first.length; // 结尾位置
$('#cdc').addClass('wrong-input').focus(); // 注意首先要使输入框处于focus
document.querySelector('#cdc').setSelectionRange(l, r); // 选中
$.notify({message:'Illegal characters!'},{type:'danger'});
return;
}
params['cdc'] = cdc; // OK,添加到api发送参数中
} else {
$.notify({message:'Please input at least 10 characters.'},{type:'warning'});
$('#cdc').addClass('wrong-input').focus();
return;
}
}
// ...
顺便推荐一下这个网站:RegExr,写一个正则表达式,下面会有样本文本用来测试匹配,以及对表达式中每一部分的解释,左侧还有小抄、参考文档,非常好的playground。
参考:https://stackoverflow.com/questions/3085446/selecting-part-of-string-inside-an-input-box-with-jquery