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

秒速五厘米 2022-10-05 13:00 33阅读 0赞

## 数据格式 ##

*  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()
    		}
    	}
    }

发表评论取消回复

表情：

评论列表（有 0 条评论，33人围观）

还没有评论，来说两句吧...

相关阅读

相关多选下拉框（select 下拉多选）

选项1</option><option value="2">选项1</option><option value="3">选项1</option><option value...

古城微笑少年丶/ 2024年05月02日 20:21/ 0 赞/ 218 阅读

相关 EasyExcel 实现自定义单选下拉框

目录 1 Maven依赖 2 SpinnerModel 3 CustomSpinnerHandler 4 调试代码 5 调试结果注： -------------

谁践踏了优雅/ 2023年10月07日 17:18/ 0 赞/ 136 阅读

相关 LayUI # 多选下拉框

我的项目中使用的是formSelects-v4.js，但是现在以及对此引用停止更新了。现在提供一下学习网址：[https://hnzzmsf.github.io/examp

迈不过友情╰/ 2023年06月24日 08:10/ 0 赞/ 133 阅读

相关 Jquery限制SQL命令limit条目数

点击验证和限制SQL条目数limit $("data-preview-btn").click(function(){ var checkText = $(

忘是亡心i/ 2023年05月22日 10:26/ 0 赞/ 48 阅读

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

数据格式 tags默认设置为为\[\] dataForm: { id: 0, tags: [], }, rules:

秒速五厘米/ 2022年10月05日 13:00/ 0 赞/ 34 阅读

相关 elementUI el-select allow-create属性创建新条目时限制输入字符长度

el-select允许输入创建新tag，限制新tag输入字符长度 [官方文档][Link 1] 思路：自定义验证规则，循环遍历绑定数组，逐个判断是否满足。

喜欢ヅ旅行/ 2022年08月30日 15:50/ 0 赞/ 58 阅读

相关 HTML下拉框多选

HTML下拉框多选 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://

谁践踏了优雅/ 2022年08月20日 12:09/ 0 赞/ 868 阅读

相关自定义SwipeLayout--仿QQ侧滑条目

自定义SwipeLayout–仿QQ侧滑条目先看动图 ![这里写图片描述][20160519163327745] 看布局文件 activity\_main.xml

清疚/ 2022年07月24日 09:28/ 0 赞/ 303 阅读

相关 ListView多条目加载

在现实的项目开发中，listView往往会加载不同类型的数据，这就要求我们要对listView进行多条目的加载，对数据类型进行判断，怎么判断呢？主要在适配器里面进行类型的判断。

落日映苍穹つ/ 2022年06月08日 01:19/ 0 赞/ 300 阅读

相关下拉列表默认选中指定条目的实现

适用场景：搜索条件的回显下拉列表： <select name="category" id="category"> <option value=

秒速五厘米/ 2022年05月24日 05:18/ 0 赞/ 217 阅读