Probleme und Lösungen bei der Verwendung von iview zum Anpassen des Eingabefelds für Bestätigungsschlüsselwörter in Vue

Dieser Artikel stellt hauptsächlich das Problem und die Lösung der Verwendung von iview zum Anpassen des Eingabefelds für Bestätigungsschlüsselwörter in Vue vor. Dieser Artikel stellt Ihnen die Lösung anhand von Beispielen in Kombination mit Code vor

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

Regelvalidierung im Formular hinzufügen

Da iview Validierungsregeln für Null und Gesamtlänge 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 Überprüfungsregelmethode:

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

Das Obige habe ich für alle zusammengestellt und hoffe, dass es in Zukunft für alle hilfreich sein wird.

Verwandte Artikel:

Angular-Beispiel für die Verwendung des Operationsereignisbefehls ng-click zum Übergeben mehrerer Parameter

JavaScript-Code zum Hochladen von TXT Vorschaufunktion für Dateien

AngularJS-Zusammenfassung von Beispielen für Kommunikationsmethoden zwischen Controllern

Das obige ist der detaillierte Inhalt vonProbleme und Lösungen bei der Verwendung von iview zum Anpassen des Eingabefelds für Bestätigungsschlüsselwörter in Vue. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!