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

喜欢ヅ旅行 2022-08-30 15:50 57阅读 0赞

## el-select允许输入创建新tag，限制新tag输入字符长度 ##

*  [官方文档][Link 1]
 *  思路：自定义验证规则，循环遍历绑定数组，逐个判断是否满足。

## 核心代码 验证部分 ##

// 验证标签长度
    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;
    				}
    			}
    			// console.log(len)
    			if (len > 20) {
    				show = false
    			}
    		}
    		if (!show) {
    			callback(new Error('标签名长度不能超过10！'))
    		} else {
    			callback()
    		}
    	}
    }

## 全部代码 ##

<template>
    	<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
    	  <el-form-item label="文章标签" prop="tags">
    		  <el-select
    		    v-model="ruleForm.tags"
    		    multiple
    		    filterable
    		    allow-create
    		    default-first-option
    		    placeholder="请选择文章标签">
    		    <el-option
    		      v-for="item in options"
    		      :key="item.value"
    		      :label="item.label"
    		      :value="item.value">
    		    </el-option>
    	  	</el-select>
    	  </el-form-item>
    	<el-form>
    </template>
    
    <script>
      export default {
        data() {
    	    // 验证标签长度
    		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;
    						}
    					}
    					// console.log(len)
    					if (len > 20) {
    						show = false
    					}
    				}
    				if (!show) {
    					callback(new Error('标签名长度不能超过10！'))
    				} else {
    					callback()
    				}
    			}
    		}
          return {
            options: [{
              value: 'HTML',
              label: 'HTML'
            }, {
              value: 'CSS',
              label: 'CSS'
            }, {
              value: 'JavaScript',
              label: 'JavaScript'
            }],
           ruleForm: {
    		tags: [], //注意这里是个数组
    	},
    	rules: {
    		tags: [{
    			required: true,
    			type: 'array',
    			trigger: 'change',
    			validator: tagslength
    		}]
    	},
          }
        }
      }
    </script>

[Link 1]: https://element.eleme.cn/#/zh-CN/component/select