英文、数字和汉字、日文的字符判断 英文占1个字符，中文汉字占2个字符 el-form表单验证规则

需求：输入框输入如果是中文或者日文，表单验证长度需要除以2，如果是英文或者数字，则正常
需求奇葩，还要国际化可烦死我了，菜鸟又不敢跟产品顶嘴，哭了
捣鼓捣鼓总算好了，对字符限制做了一个封装

1、第一步：创建一个validate.js文件在指定位置.我个人放在了('src/utils/validate’)中

/**
 * （英文占1个字符，中文汉字占2个字符）
 */
export function checkName(rule, value, callback) {
  var len = 0;
  if (value == null) {
    value = ''
  }
  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;
    }
  }
  //这是传进来的需要提示的名字，和限制的字符长度
  const {
    name,
    number
  } = rule;
  if (len > number) {
    //填写提示的文字
    callback(new Error(name));
  } else {
    // 通过
    callback();
  }
};

1、第二步：在使用的html界面引进checkName并使用

 import { checkName } from "@/utils/validate";
 export default {
  data() {
    return {
    codeRules: {
        codeClass: [
          {
            required: true,
            message: "请输入编码阶级",
            trigger: "change",
          },
        ],
        clientName: [
          {
            required: true,
            message: "请输入客户名称",
            trigger: "change",
          },
          {
            validator: checkName,
            trigger: "blur",
            //这样可以把name 和number传过去
            name: "字符长度不能超过",
            number: 40,
          },
             ]
           ]
           }
         }
      }

html使用场景

 <el-form
        ref="formAddCode"
        label-width="120px"
        :model="addCode"
        :rules="codeRules"
      >
      <!--rules="codeRules" 是element表单验证规则-->:
        <el-row>
          <el-col :span="12">
          <el-form-item
              :label="$t('materialCode.codeClass')"
              prop="codeClass"
               :rules="codeRules.codeClass"
            >
             <!--如果想指定验证规则 则在el-form-item中指定  :rules="codeRules.codeClass"-->:
              <el-select
                v-model="addCode.codeClass"
                :placeholder="$t('materialCode.please_select_codeClass')"
                style="width: 100%"
                clearable
                @change="selectClass"
              >
                <el-option
                  v-for="item in addOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
         </el-row>
   </el-form>
          

菜鸟记录,感谢各位大哥指导!