欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

Elementui el-select创建条目的多选下拉框 自定义校验 新增条目时字符长度限制

程序员文章站 2022-07-14 08:49:03
...

数据格式

  • tags默认设置为为[]
dataForm: {
	id: 0,
	tags: [],
},
rules: {
	tags: [{
		type: 'array',
		trigger: 'change',
		validator: tagslength
	}]
},

验证规则

  • 多选value返回的是一个数组,需要循环去判断,我加了一个show,只要有标签长度超过时就改变状态去回调。
// 验证标签长度
let tagslength = (rule, value, callback) => {
	if (value.length == 0) {
		callback(new Error('至少输入一个标签'))
	} else {
		var show = true
		for (let i in value) {
			if (value[i].name == undefined) {
				var tempValue = value[i]
			} else {
				var tempValue = value[i].name
			}
			var len = 0;
			for (let j = 0; j < tempValue.length; j++) {
				var c = tempValue.charCodeAt(j);
				//单字节加1
				if ((c >= 0x0001 && c <= 0x007e) || (0xff60 <= c && c <= 0xff9f)) {
					len++;
				} else {
					len += 2;
				}
			}
			if (len > 20) {
				show = false
			}
		}
		if (!show) {
			callback(new Error('标签名长度不能超过10!'))
		} else {
			callback()
		}
	}
}