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

数据格式

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 = truefor (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);//单字节加1if ((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()}}
}

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

antd select多选_antd多选下拉框一行展示的实现方式
我们都知道antd的select多选时,如果下拉框宽度不足,则自动浮动到下一行将下拉框撑大,但是这回影响到页面的整体布局. 我们期望的效果是,下拉框只显示一行的值,超出一行的部分自动隐藏. 下面有2种 ...
select实现---多选下拉框
select列表多选下拉框注意:formSelects v4的一些操作: https://blog.csdn.net/zyc050707/article/details/109809503 1.引入 ...
Angular实现虚拟滚动多选下拉框笔记
要求: 实现一个angular多选下拉框组件,当有超过2000个选项时,滑动/挑选/全选均不卡. 正篇: 为了方便,这里不考虑扩展性,所以规定下拉框展开只显示7行数据,行高27px 约定:input为 ...
layui多选下拉框，多选，使用xm-select插件
1. layui的多选下拉框可以使用 xm-select 插件实现.使用步骤如下:1. 下载 xm-select 插件,并在页面中引入: html <link rel="stylesh ...
html css 多选下拉框,jQuery多选下拉框插件
jquery.multi-select.js是一款jQuery多选下拉框插件.该插件可以将select元素转换为带checkbox的多选下拉框,非常实用. 使用方法在页面中引入下面的文件. lt;l ...
jquery --- 多选下拉框的移动(穿梭框)
效果如下: 几个注意地方: 1.多选下拉框需要添加 multiple 2.获取选中的元素KaTeX parse error: Expected 'EOF', got '#' at position 3 ...
HTML多选mysql,html多选下拉框 | 学步园
一个jquery ui,实现html的多选下拉框,在下拉里面加checkbox,不改变页面的提交特性,只是动态的改变select选中的多选数据. jsp页面例子: pageEncoding=" ...
jquery easyui 多选下拉框的实现
为什么80%的码农都做不了架构师?>>> jquery easyui 多选下拉框的实现修改官方提供的demo实例,本来是单选的,让她编程多选,完成了勾选和去勾选的所有功能. ...
bootstrap-multiselect.js多选下拉框初始化时默认选中初始值
bootstrap-multiselect.js多选下拉框默认值设置一.案例数据格式二.HTML代码 <select id="msgRoles" multiple=&q ...

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

数据格式

验证规则

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

最新文章

热门文章

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

数据格式

验证规则

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

最新文章

热门文章

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

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