element input 中验证字符串不多于4个汉子8个字母

<el-form
 :model="ruleForm"
  :rules="rules"
  ref="ruleForm"
  label-width="100px"
  class="demo-ruleForm"
>
  <el-form-item label="" prop="name" label-width="0">
    <el-input v-model="ruleForm.name" size="small"></el-input>
  </el-form-item>
</el-form>

data() {
    //这里就是整个checkName啦，就是方法一的使用
    var checkName = (rule, value, callback) => {
      var len = 0;
      for (var i = 0; i < value.length; i++) {
        var c = value.charCodeAt(i);
        //单字节加1
        if ((c >= 0x0001 && c <= 0x007e) || (0xff60 <= c && c <= 0xff9f)) {
          len++;
        } else {
          len += 2;
        }
      }
      if (len > 8) {
        //重点重点，下面就是填写提示的文字
        callback(new Error("主菜单名字不多于4个汉字或8个字母"));
      } else {
        callback();
      }
    };
    return {
      ruleForm: {},
      rules: {
        name: [
          { required: true, message: "请输主菜单名字", trigger: "blur" },
          { validator: checkName, trigger: "change" },
        ],
      },
    };
  },