检测输入文本中的“凑数”字符并高亮显示

来自项目需求。销售给顾客打完电话后会输入一段文本为本次通话做记录,这个文本框要求要么什么也不输,要么输入最少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

发表评论

邮箱地址不会被公开。 必填项已用*标注

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据