Detailed explanation on the use of iview custom verification keyword input box

This time I will bring you a detailed explanation of the use of iview's custom verification keyword input box. What are the precautions for iview's custom verification keyword input box? Here is a practical case, let's take a look.

1. Verification requirements

Corresponding to the configured keyword input box, the verification requirements are as follows:

1. The total number of words cannot exceed 7,000;

2. Remove the configured keyword special symbols, and the number of keyword groups obtained cannot exceed 300; (such as: aaa&(bbb|ccc)|(!ddd|eee)), remove the special symbols, and there are 5 groups)

3. The length of a single keyword cannot exceed 20; (such as: aaaaa&(bbb|ccc)), if the length of aaaaa exceeds 20, it will prompt)

2. Solution

Add a prop attribute to the FormItem corresponding to the keyword input and use it as a verification field; note that the FormItem is Contained in Form;

Add rules verification in form form

Since iview can directly check the empty space and total length Define Verification Rules, so I will only write the other two here. The code is as follows:

//高级配置验证
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'},
 ],
},

Custom verification rule method:

//验证高级配置关键词 规则
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(/[\&|\||\!|\(|\)|\"]/, &#39; &#39;);
 }
 var keywordArr = str.split(&#39; &#39;);
 var resultArr = [];
 for(var i in keywordArr) {
  if(keywordArr[i] != &#39;&#39;) {
  resultArr.push(keywordArr[i])
  if(keywordArr[i].trim().length > 20) {
   flag = 1;
   break
  }
  }
 }
 //.关键词一共300个
 if(resultArr.length > 300) {
  flag = 2;
 }
 }
 return flag;
},

I believe you have read the case in this article After mastering the method, please pay attention to other related articles on the php Chinese website for more exciting content!

Recommended reading:

Detailed explanation of the steps to globally introduce bass.scss into Vue

js deduplication and optimization of numerical arrays

The above is the detailed content of Detailed explanation on the use of iview custom verification keyword input box. For more information, please follow other related articles on the PHP Chinese website!