javascript 的输入框输入多条英文逗号分隔记录触发 ajax 的技巧

我们有的时候会让用户在一个 html 是 textarea 的空间中输入很多记录,如:员工的编号。随着记录是输入需要和后台进行交互。但是我们希望交互的次数是合理的,减少后台系统的压力。

场景举例:我们有一个 web 页面需要用户在textarea输入人员的手机号码,可以输入多个号码使用英文逗号分隔,在textarea的键盘 keyup 事件中我们希望用户输入手机号码(一般最短的是11位,可能加上前面的国际编号+86等手机号码会超过11位的长度),当输入的内容大于等于11的时候想后台发起一次请求。如果用户在这个号码之后继续输入英文分隔符,不发起后台请求,继续当输入的内容大于等于11的时候想后台发起一次请求。依次循环检查输入内容的合法性,向后台发起请求。我们要求请求数量尽可能的少。

我这里假设使用的是 jquery 框架,代码如下:

$('#textareaId').bind('keyup', function() {
    var teamMembersEmpIdsRegex = /^(?:\d{11,},?)+$/;
    var val = $.trim($(this).val());
    var size = val.length;
    var postion = val.lastIndexOf(',');
    var flag = (postion == size -1); //发现逗号作为字符串的结尾
    // teamMembersEmpIdsRegex 正则表达式中指定了触发的字符串长度
    // 字符串结尾是英文逗号的时候,不出发 ajax 请求
    if (teamMembersEmpIdsRegex.test(val) && !flag) {
        debug('hello11==world ', val,' flag:',flag,'  val.lastIndexOf(','):',val.lastIndexOf(',') ,'  val.length:',val.length); // TODO
        // ajax code here
    }
});

重点在两处:正则表达式和对最后结尾是英文逗号的判断。 

相关推荐