element 表单中英文混合输入长度校验

由于数据库的编码格式的不同，一个汉字在数据库中需要占 2-3 个字节。
但英文和数字还是占一个，此时前端如果给表单输入的内容做长度校验
就需要考虑汉字长度和字母长度在数据库中的字节比例了。下边以一个中文代表5个字节为例
1.
为form表单绑定rules属性

      <el-form :rules="rules">
      </el-form>

给表单项绑定需要校验的字段prop

             <el-form-item prop="accountName">
                <el-input
                  v-model="ruleForm.accountName"
                  placeholder="用户名"
                ></el-input>
              </el-form-item>

3.在data中定义rules校验规则，这里需要自定义校验规则validator，将自定义的校验规则写在data下方即可

data() {
    const reg = /^[\u4e00-\u9fa5]$/
    var validatePass = (rule, value, callback) => {
      let len = 0
      for(let i = 0; i < value.length; i++) {
        let word= value.charAt(i)  //获取指定位置的字符
        if(!reg.test(word)) {    //再用正则判断这个字符是否是中文
        //非中文单字节加1
            len++
        } else {
          //中文单字节加5
            len+= 5
        }
      }
      if((len < 1 && len > 0) || len > 30) {
        callback(new Error('名称长度为1-30个字符，一个中文字等于5个字符'));
      } else {
        callback()
      }
      }
return {
	rules: {
        accountName: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
          { validator: validatePass, trigger: 'blur' }
        ]
      }
}
}

这里主要是遍历每个字符串进行判断是否是中文然后声明一个变量进行递增最后来判断长度是否符合标准。