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
    }
});

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

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值