标签个数与长度的验证

今天被测试提了一个有趣的BUG，需要对标签输入框内输入的标签做验证，要求如下：

1.标签用中文逗号（，），英文逗号（,）以及空格分割。

2.每个标签长度不能超过10

3.总标签个数不能超过5

于是我开动脑筋，写了以下一段代码

// 发表视频标签验证JS

      var text = ''; //创建一个空文本
      $(document).on('input ','#video-desc',function(){
          console.log('开始验证输入框')
        var txt = $('#video-desc').val();//获取输入框的值
        txt.split(/,|，| /).forEach(function(v,i){//用,和，和空格分割并遍历
           //text += v.substr(0,10);
           console.log(i);
           if(v.length > 10){//如果标签字数大于10，显示提示信息
              $('.tip.fz-black-third').text("标签最大长度10个字符").css("color","#e4393a");
           }else if(i>4){//如果标签数大于5,显示提示信息
             $('.tip.fz-black-third').text("最多定义5个标签").css("color","#e4393a");
           }
           else{//还原提示信息
              $('.tip.fz-black-third').text("选填，建议3-5个标签，实体名词为主，现象级动词次之，避免形容词、语气词等；按空格、逗号分隔多个标签，回车保存").css("color","#999");
           }
        })
      })

拿来验证了一下输入框，确实能用，长度和标签数都能取到

不过还是有瑕疵，写好的标签改动时验证不了最大长度。

虽然实际中也没人先写后面的标签再写前面的，不过咱还是要想办法修补的

脑补了一遍代码逻辑，发现是遍历后面的验证会把前面的覆盖住，于是呼把代码改成下面这个样子

// 发表视频标签验证JS

      var text = ''; //创建一个空文本
      var error1 = 0;
      var error2 = 0
      $(document).on('input ','#video-desc',function(){
          console.log('开始验证输入框')
        var txt = $('#video-desc').val();//获取输入框的值
        txt.split(/,|，| /).forEach(function(v,i){//用,和，和空格分割并遍历
           //text += v.substr(0,10);
           console.log(i);
           if(v.length > 10){//如果标签字数大于10，显示提示信息
             error1 = 1
           }else if(i>4){//如果标签数大于5,显示提示信息
             error2 = 1
           }else{
             error2 = 0
           }
        })
        if(error1 == 0&&error2 == 0){
            $('.tip.fz-black-third').text("选填，建议3-5个标签，实体名词为主，现象级动词次之，避免形容词、语气词等；按空格、逗号分隔多个标签，回车保存").css("color","#999");
        }else if(error1 == 1){
            $('.tip.fz-black-third').text("标签最大长度10个字符").css("color","#e4393a");
            error1 = 0;
        }else if(error2 == 1){
            $('.tip.fz-black-third').text("最多定义5个标签").css("color","#e4393a");
        }else{
            return;
        }
      })

其中用了2个error变量来存储错误信息，避免在遍历中被覆盖。虽然写的有点多，不过功能还是杠杠的。

好了，现在能完美实现这个验证功能了