美文网首页
Element UI 中文英文混合字符长度校验

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

作者: 鹤仔z | 来源:发表于2021-01-15 10:22 被阅读0次

场景

当我们需要使用 element-ui 来校验长度的时候,可以在前端用其内置的 maxmin 属性来限制。但是我们知道——由于数据库的编码格式的不同,一个汉字在数据库中需要占 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 个字符'))
    }
}

相关文章

网友评论

      本文标题:Element UI 中文英文混合字符长度校验

      本文链接:https://www.haomeiwen.com/subject/kqviaktx.html