标签个数与长度的验证

今天被测试提了一个有趣的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变量来存储错误信息，避免在遍历中被覆盖。虽然写的有点多，不过功能还是杠杠的。

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