需求是要限制用户输入的名称,最多二十个中文字,也就是40个字符。但我们平时使用str.length来限制都是获取到字符串的长度而已,并不能获取到具体的字符。这里使用正则来解决。
一个汉字=2字节=2字符
一个字母、数字=1字节=1字符
匹配单个字节
/[\x00-\xff]/
取反,即是匹配多字符的(中文汉字)
/^[\x00-\xff]/
// 函数
这里可能因为eslint的原因,不让使用\x00正则,可以直接在该行代码后面添加 // eslint-disable-line
// 控制字符串只能输入num个字符 ( 1参数:输入的值 2参数:要限制输入的字符个数)
export const limitstr = (strval, strnum) => {
let re = ''
const strleng = strval.length
// 返回字符串的总字节数
const byteleng = strval.replace(/[^\x00-\xff]/g, '**').length // eslint-disable-line
if (byteleng <= strnum) return strval
for (var i = 0, bytenum = 0; i < strleng; i++) {
var byte = strval.charAt(i)
if (/[\x00-\xff]/.test(byte)) { // eslint-disable-line
bytenum++// 单字节字符累加1
} else {
bytenum += 2// 非单字节字符累加2
}
if (bytenum <= strnum) { re += byte } else { return re }
}
}
// 调用
// 自定义验证规则
const validateName = (rule, value, callback) => {
if (value === '') {
callback(new Error(this.$t('placeholder.name_enter')))
} else {
if (value.replace(/[^\x00-\xff]/g, '**').length > 40) {// eslint-disable-line
callback(new Error(this.$t('placeholder.min_max_length', { min: 1, max: 40 })))
}
}
callback()
}
// 确认事件
confirmAddCategory() {
this.$refs.elForm.validate(valid => {
console.log(this.addForm.name)
if (valid) {
createAssistCategory({ name: this.addForm.name }).then(res => {
this.$message({
message: this.$t('message.add_success'),
type: 'success',
duration: 2000
})
this.getCategoryList()
this.addForm.name = ''
this.addModal = false
})
} else {
// 最大录入40个字符(20个中文字)
this.addForm.name = this.limitstr(this.addForm.name, 40)
return
}
})
},