vue中使用iview自定义验证关键词输入框问题及解决方法
时间:2019-04-13
本文章向大家介绍vue中使用iview自定义验证关键词输入框问题及解决方法,主要包括vue中使用iview自定义验证关键词输入框问题及解决方法使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
一、验证需求
对应配置的关键词输入框,验证要求如下:
1、总字数不能超过7000个;
2、去除配置的关键词特殊符号,得到的关键词组数不能超过300;(如:aaa&(bbb|ccc)|(!ddd|eee)),去掉特殊符号,有5组)
3、单个关键词长度不能超过20;(如:aaaaa&(bbb|ccc)),如果aaaaa长度超过20则提示)
二、解决方法
在关键词输入对应的FormItem
中加入一个prop属性,作为验证字段使用;注意该FormItem是包含于Form的;
form表单中添加rules验证
由于iview对空和总长度可以直接定义验证规则,所以这里就只自己写其余2个,代码如下:
//高级配置验证 validateAdvancedFormItem: { name: [ {required: true, message: '任务名称不能为空', trigger: 'blur'}, {type: 'string', max: 20, message: '不能超过20个字符', trigger: 'blur'}, {validator: validNameExist, trigger: 'blur'} ], groupId: [ {type: 'string', required: true, message: '请选择任务分组', trigger: 'change'} ], keywords: [ {required: true, message: '关键词不能为空', trigger: 'blur'}, {type: 'string', max: 7000, message: '不能超过7000个字符', trigger: 'blur'}, {validator: validKeyWordsRule, trigger: 'blur'} ], /* chooseSiteGroupList: [//todo 暂时注释掉网站分组 { required: true, type: 'array', min: 1, message: '请选择网站分组', trigger: 'change' }, ],*/ chooseInfoTypeList: [ {required: true, type: 'array', min: 1, message: '请选择信息类型', trigger: 'change'}, ], warnNum: [ {required: true, message: '请填写预警增量'}, ], warnUserList: [ {required: true, type: 'array', message: '请选择预警人员', validator: validatewarnUser, trigger: 'change'}, ], },
自定义验证规则方法:
//验证高级配置关键词 规则 const validKeyWordsRule = (rule, value, callback) => { var isExceedTwitenty = this.getAdvancedKeyWords(); var isExceedThreeHundreand = this.getAdvancedKeyWords(); if(isExceedTwitenty == 1) { callback(new Error('配置单个关键词长度不能超过20')) } else if(isExceedThreeHundreand == 2) { callback(new Error('配置关键词个数不能超过300')) } else { callback(); } }; //处理关键词 getAdvancedKeyWords: function () { var flag = -1; if(this.dailyTaskItem.keywords != '' && this.dailyTaskItem.keywords.trim() != '') { //判断单个配置的关键词长度是否大于20 var str = ''; for (var i = 0; i < this.dailyTaskItem.keywords.length; i++) { str = str + this.dailyTaskItem.keywords.substr(i, 1).replace(/[\&|\||\!|\(|\)|\"]/, ' '); } var keywordArr = str.split(' '); var resultArr = []; for(var i in keywordArr) { if(keywordArr[i] != '') { resultArr.push(keywordArr[i]) if(keywordArr[i].trim().length > 20) { flag = 1; break } } } //.关键词一共300个 if(resultArr.length > 300) { flag = 2; } } return flag; },
总结
以上所述是小编给大家介绍的vue中使用iview自定义验证关键词输入框问题及解决方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!
- 构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统(3)-漂亮系统登陆界面
- ASP.NET MVC5+EF6+EasyUI 后台管理系统(2)-easyui构建前端页面框架[附源码]
- 扬言毁灭人类的索菲亚再一次挑战了人类
- SQL Server 存储过程生成insert语句
- silverlight 背景透明
- .Net 转战 Android 4.4 日常笔记(1)--工具及环境搭建
- ASP.NET MVC5+EF6+EasyUI 后台管理系统(33)-MVC 表单验证
- 如何利用深度学习识别千万张图片?
- ASP.NET MVC5+EF6+EasyUI 后台管理系统(32)-swfupload多文件上传[附源码]
- ASP.NET MVC5+EF6+EasyUI 后台管理系统(31)-MVC使用RDL报表
- 43 Hot Flex and ActionScript 3.0 APIs, tips and tools for Autumn 2008
- 异步数据存储
- 谈谈基于SQL Server 的Exception Handling[中篇]
- C# AD(Active Directory)域信息同步,组织单位、用户等信息查询
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 第003课 linux入门命令详解
- 第004课 vi编辑器的使用详解
- 【前端JQ】jQuery赋值checked的几种写法,attr()方法不好使,建议使用prop()方法。
- 达梦数据库适配问题
- Angular Component UI单元测试的隔离策略
- 第005课 linux进阶命令(文件查找,文件解压操作详解)
- 没有这 29 款插件的 Chrome 是没有灵魂的
- 第006课 开发板熟悉与体验
- Angular Observable数据类型的单元测试数据准备
- 第007课 裸机开发步骤和工具使用(SourceInght NotePad++使用)
- Angular jasmine.expect单步调试
- 第008课 第1个ARM裸板程序及引申(点亮LED灯)
- SharedPreferences VS MMKV
- 第009课 gcc和arm-linux-gcc和Makefile
- Go 每日一库之 quicktemplate