场景
当我们需要使用 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 个字符'))
}
}