vue中使用iview自定义验证关键词输入框问题及解决方法


Posted in Javascript onMarch 26, 2018

一、验证需求

     对应配置的关键词输入框,验证要求如下:

    1、总字数不能超过7000个;

    2、去除配置的关键词特殊符号,得到的关键词组数不能超过300;(如:aaa&(bbb|ccc)|(!ddd|eee)),去掉特殊符号,有5组)

    3、单个关键词长度不能超过20;(如:aaaaa&(bbb|ccc)),如果aaaaa长度超过20则提示)

vue中使用iview自定义验证关键词输入框问题及解决方法

二、解决方法

     在关键词输入对应的FormItem中加入一个prop属性,作为验证字段使用;注意该FormItem是包含于Form的;

vue中使用iview自定义验证关键词输入框问题及解决方法

form表单中添加rules验证

vue中使用iview自定义验证关键词输入框问题及解决方法

由于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自定义验证关键词输入框问题及解决方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
Jquery 插件学习实例1 插件制作说明与tableUI优化
Apr 02 Javascript
Javascript 面向对象 重载
May 13 Javascript
Jquery之Ajax运用 学习运用篇
Sep 26 Javascript
JavaScript中的闭包(Closure)详细介绍
Dec 30 Javascript
JavaScript中Function()函数的使用教程
Jun 04 Javascript
JavaScript自定义分页样式
Jan 17 Javascript
js如何获取网页所有图片
May 12 Javascript
详解AngularJS1.6版本中ui-router路由中/#!/的解决方法
May 22 Javascript
node.js + socket.io 实现点对点随机匹配聊天
Jun 30 Javascript
vue2组件之select2调用的示例代码
Oct 12 Javascript
解决node.js含有%百分号时发送get请求时浏览器地址自动编码的问题
Nov 20 Javascript
js 压缩图片的示例(只缩小体积,不更改图片尺寸)
Oct 21 Javascript
Vue中v-show添加表达式的问题(判断是否显示)
Mar 26 #Javascript
使用Vue构建可重用的分页组件
Mar 26 #Javascript
基于jQuery实现Ajax验证用户名是否可用实例
Mar 25 #jQuery
jQuery实现的回车触发按钮事件功能示例
Mar 25 #jQuery
jQuery+Cookie实现切换皮肤功能【附源码下载】
Mar 25 #jQuery
Angular 组件之间的交互的示例代码
Mar 24 #Javascript
Vue中computed与methods的区别详解
Mar 24 #Javascript
You might like
用Php实现链结人气统计
2006/10/09 PHP
PHP聊天室技术
2006/10/09 PHP
mysql,mysqli,PDO的各自不同介绍
2012/09/19 PHP
PHP设计模式之迭代器模式的深入解析
2013/06/13 PHP
PHP判断数据库中的记录是否存在的方法
2014/11/14 PHP
Yii2如何批量添加数据
2016/05/17 PHP
几行代码轻松实现PHP文件打包下载zip
2017/03/01 PHP
PHP实现网页内容html标签补全和过滤的方法小结【2种方法】
2017/04/27 PHP
extJs 下拉框联动实现代码
2010/04/09 Javascript
JS弹出对话框返回值代码(asp.net后台)
2010/12/28 Javascript
Javascript跨域请求的4种解决方式
2013/03/17 Javascript
jquery滚动条插件jScrollPane的使用介绍
2013/11/08 Javascript
JQuery操作iframe父页面与子页面的元素与方法(实例讲解)
2013/11/20 Javascript
JavaScript编写带旋转+线条干扰的验证码脚本实例
2016/05/30 Javascript
BootStrap iCheck插件全选与获取value值的解决方法
2016/08/24 Javascript
Bootstrap提示框效果的实例代码
2017/07/12 Javascript
浅谈vuex之mutation和action的基本使用
2017/08/29 Javascript
JS返回顶部实例代码
2020/08/09 Javascript
详解如何实现一个简单的Node.js脚手架
2017/12/04 Javascript
通过vue提供的keep-alive减少对服务器的请求次数
2018/04/01 Javascript
js prototype深入理解及应用实例分析
2019/11/25 Javascript
vue实现输入一位数字转汉字功能
2019/12/13 Javascript
使用typescript快速开发一个cli的实现示例
2020/12/09 Javascript
Python制作爬虫抓取美女图
2016/01/20 Python
浅析Python中return和finally共同挖的坑
2017/08/18 Python
Python线程同步的实现代码
2018/10/03 Python
python实现石头剪刀布小游戏
2021/01/20 Python
对Python中TKinter模块中的Label组件实例详解
2019/06/14 Python
详解mac python+selenium+Chrome 简单案例
2019/11/08 Python
Django将默认的SQLite更换为MySQL的实现
2019/11/18 Python
pycharm进入时每次都是insert模式的解决方式
2021/02/05 Python
Vans奥地利官方网站:美国原创极限运动潮牌
2018/09/30 全球购物
跟单文员岗位职责
2014/01/03 职场文书
教师产假请假条
2014/04/10 职场文书
2014年话务员工作总结
2014/11/19 职场文书
放弃遗产继承公证书
2015/01/26 职场文书