Element UI 中文英文混合字符长度校验

场景

当我们需要使用 element-ui 来校验长度的时候，可以在前端用其内置的 max、min 属性来限制。但是我们知道——由于数据库的编码格式的不同，一个汉字在数据库中需要占 2-3 个字节。

假如有一个 name 字段，数据库中设置的长度为64。在 element-ui 中如果用 max:64 的方法对字段进行限制，那么输入64个汉字时，数据库中实际的长度就是 192 ，这显然不是我们想要的。所以，我们需要自定义一个函数，可以满足中英文字符的混合校验，精准地对字段的长度进行限制。

实现

const validLength = function (rule, value, callback) {
    function getStrLength(str) {
        // 当数据库编码为一个汉字占3个字节时，把字符中的每个汉字都替换成'xxx'再得出长度
        return str.replace(/[^x00-xff]/g, 'xxx').length;
    }
    if (!value) {
        callback();
    } else if (getStrLength(value) <= 64) {
        callback();
    } else {
        return callback(new Error('不能超过 64 个字符'))
    }
}