Ausführliche Erläuterung zur Verwendung des benutzerdefinierten Schlüsselwort-Eingabefelds von iview

Dieses Mal erkläre ich Ihnen ausführlich, wie Sie das benutzerdefinierte Eingabefeld für Verifizierungsschlüsselwörter verwenden. Was sind die Vorsichtsmaßnahmen für das benutzerdefinierte Eingabefeld für Verifizierungsschlüsselwörter? .

1. Verifizierungsanforderungen

Entsprechend dem konfigurierten Schlüsselwort-Eingabefeld lauten die Verifizierungsanforderungen wie folgt:

1. Die Gesamtzahl der Wörter darf 7.000 nicht überschreiten; 2. Entfernen Sie die konfigurierten Schlüsselwort-Sondersymbole und die Anzahl der erhaltenen Schlüsselwortgruppen darf 300 nicht überschreiten die Sonderzeichen, und es gibt 5 Gruppen)

3. Die Länge eines einzelnen Schlüsselworts darf 20 nicht überschreiten (z. B.: aaaaa&(bbb|ccc)). Wenn die Länge von aaaaa 20 überschreitet, wird dies der Fall sein prompt)

2. Lösung Fügen Sie ein Prop-Attribut zu

hinzu, das dem Schlüsselwort entspricht Eingabe, die als Überprüfungsfeld verwendet werden soll; beachten Sie, dass das FormItem im Formular enthalten ist ;

FormItem

Regelüberprüfung im Formular hinzufügen

Da iview die Leer- und Gesamtlänge

Verifizierungsregeln

direkt definieren kann, schreibe ich hier nur die anderen beiden. Der Code lautet wie folgt:

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

Benutzerdefinierte Verifizierungsregelmethode :

//验证高级配置关键词 规则
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;
},

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Für weitere spannende Inhalte achten Sie bitte auf andere verwandte Artikel auf der chinesischen PHP-Website!

Empfohlene Lektüre:

Detaillierte Erläuterung der Schritte zur globalen Einführung von bass.scss in Vue

JS-Deduplizierung und -Optimierung von numerischen Arrays

Das obige ist der detaillierte Inhalt vonAusführliche Erläuterung zur Verwendung des benutzerdefinierten Schlüsselwort-Eingabefelds von iview. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!