【‘极端’测试提的问题】输入栏填入表情图片需要进行异常处理

目录

一、问题描述

二、前端处理

三、效果显示

---

一、问题描述

         如上图，在其中输入‘类别名称’的测试中，有着明显的提示信息下，极端的测试员在测试时非要输入小表情图片，如：😀、👇、🐉等等。这种图片输入后，没有异常处理信息提示，而且直接通过，但是并没有新建出新类别。如此就有了这个问题了。

二、前端处理

        首先找到该页面的js文件，并且找到对应的处理函数位置。

        然后根据输入信息去判断内容中是否包含图片：

 

checkIsChEnNum(str) {
    //emjoy，通过校验
    // var pattern = /^[A-Za-z0-9\u4e00-\u9fa5\^%&',;=?$x22!@#*()_+=[{}/.><~……‖-]+$/gi;
    var pattern = /[\uD83C|\uD83D|\uD83E][\uDC00-\uDFFF][\u200D|\uFE0F]|[\uD83C|\uD83D|\uD83E][\uDC00-\uDFFF]|[0-9|*|#]\uFE0F\u20E3|[0-9|#]\u20E3|[\u203C-\u3299]\uFE0F\u200D|[\u203C-\u3299]\uFE0F|[\u2122-\u2B55]|\u303D|[\A9|\AE]\u3030|\uA9|\uAE|\u3030/ig;
    if (pattern.test(str))
      return true;
    else
      return false;
  },

这部分可以参考：前端&JS&小程序过滤emoji表情_chendong0008的博客-CSDN博客_js过滤emoji表情

        那么根据自己代码进行改动：我的代码是通过coffee生成的js文件的，其代码风格要匹配：

checkIsChEnNum: function(str) {
    //emjoy，通过校验
    // var pattern = /^[A-Za-z0-9\u4e00-\u9fa5\^%&',;=?$x22!@#*()_+=[{}/.><~……‖-]+$/gi;
    var pattern = /[\uD83C|\uD83D|\uD83E][\uDC00-\uDFFF][\u200D|\uFE0F]|[\uD83C|\uD83D|\uD83E][\uDC00-\uDFFF]|[0-9|*|#]\uFE0F\u20E3|[0-9|#]\u20E3|[\u203C-\u3299]\uFE0F\u200D|[\u203C-\u3299]\uFE0F|[\u2122-\u2B55]|\u303D|[\A9|\AE]\u3030|\uA9|\uAE|\u3030/ig;
    if (pattern.test(str))
        return true;
    else
        return false;
},

调用和判断：name为输入框中输入的内容

if (this.checkIsChEnNum(name)) {
    theEL.find("#name-error").parent().addClass("has-error");
    theEL.find("#name-error").html("类别名称不能含有字符以外的内容");
    theEL.find("#name-error").show();
    return false;
}

三、效果显示

        添加上面的代码后，再在输入框中输入表情图片后点击确认不会通过并且会有异常提示。