Problems and solutions using iview to customize the verification keyword input box in vue-JS Tutorial-php.cn

Problems and solutions using iview to customize the verification keyword input box in vue

亚连

Release： 2018-05-29 09:39:47

Original

2684 people have browsed it

This article mainly introduces the problem and solution of using iview to customize the verification keyword input box in vue. This article introduces the solution to you through examples and code. Friends who need it can refer to it

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 the form

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

//高级配置验证
validateAdvancedFormItem: {
 name: [
 {required: true, message: &#39;任务名称不能为空&#39;, trigger: &#39;blur&#39;},
 {type: &#39;string&#39;, max: 20, message: &#39;不能超过20个字符&#39;, trigger: &#39;blur&#39;},
 {validator: validNameExist, trigger: &#39;blur&#39;}
 ],
 groupId: [
 {type: &#39;string&#39;, required: true, message: &#39;请选择任务分组&#39;, trigger: &#39;change&#39;}
 ],
 keywords: [
 {required: true, message: &#39;关键词不能为空&#39;, trigger: &#39;blur&#39;},
 {type: &#39;string&#39;, max: 7000, message: &#39;不能超过7000个字符&#39;, trigger: &#39;blur&#39;},
 {validator: validKeyWordsRule, trigger: &#39;blur&#39;}
 ],
 /* chooseSiteGroupList: [//todo 暂时注释掉网站分组
  { required: true, type: &#39;array&#39;, min: 1, message: &#39;请选择网站分组&#39;, trigger: &#39;change&#39; },
 ],*/
 chooseInfoTypeList: [
 {required: true, type: &#39;array&#39;, min: 1, message: &#39;请选择信息类型&#39;, trigger: &#39;change&#39;},
 ],
 warnNum: [
 {required: true, message: &#39;请填写预警增量&#39;},
 ],
 warnUserList: [
 {required: true, type: &#39;array&#39;, message: &#39;请选择预警人员&#39;, validator: validatewarnUser, trigger: &#39;change&#39;},
 ],
},

Copy after login

Custom verification rule method:

//验证高级配置关键词 规则
const validKeyWordsRule = (rule, value, callback) => {
 var isExceedTwitenty = this.getAdvancedKeyWords();
 var isExceedThreeHundreand = this.getAdvancedKeyWords();
 if(isExceedTwitenty == 1) {
 callback(new Error(&#39;配置单个关键词长度不能超过20&#39;))
 } else if(isExceedThreeHundreand == 2) {
 callback(new Error(&#39;配置关键词个数不能超过300&#39;))
 } else {
 callback();
 }
};
//处理关键词
getAdvancedKeyWords: function () {
 var flag = -1;
 if(this.dailyTaskItem.keywords != &#39;&#39; && this.dailyTaskItem.keywords.trim() != &#39;&#39;) {
 //判断单个配置的关键词长度是否大于20
 var str = &#39;&#39;;
 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;
},

Copy after login

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future. helpful.

Angular uses the operation event command ng-click to pass multiple parameters Example

JavaScript code to upload txt files Preview function

Angularjs summary of examples of communication methods between controllers

The above is the detailed content of Problems and solutions using iview to customize the verification keyword input box in vue. For more information, please follow other related articles on the PHP Chinese website!