Verwenden Sie async-validator, um Formularkomponenten zu schreiben

In diesem Artikel wird hauptsächlich die Methode zur Verwendung von Async-Validator zum Schreiben von Formularkomponenten vorgestellt. Der Herausgeber findet sie recht gut, daher werde ich sie jetzt mit Ihnen teilen und als Referenz verwenden. Folgen wir dem Herausgeber, um einen Blick darauf zu werfen. Ich hoffe, es kann allen helfen.

In der Frontend-Entwicklung ist die Formularüberprüfung eine sehr häufige Funktion. Einige UI-Bibliotheken wie ant.design und Element ui haben Formularkomponenten mit Überprüfungsfunktionen implementiert. async-validator ist eine Bibliothek, die eine asynchrone Überprüfung von Daten durchführen kann. Sowohl die Form-Komponente von ant.design als auch Element ui verwenden async-validator. In diesem Artikel wird kurz die grundlegende Verwendung von Async-Validator vorgestellt und diese Bibliothek verwendet, um eine einfache Formularkomponente mit Überprüfungsfunktion zu implementieren.

1. Grundlegende Verwendung des Async-Validators

Die Funktion des Async-Validators besteht darin, zu überprüfen, ob die Daten legal sind, und umgehend Informationen gemäß den Verifizierungsregeln bereitzustellen.

Im Folgenden wird die grundlegendste Verwendung von async-validator veranschaulicht.

import AsyncValidator from 'async-validator'
// 校验规则
const descriptor = {
 username: [
 {
  required: true,
  message: '请填写用户名'
 },
 {
  min: 3,
  max: 10,
  message: '用户名长度为3-10'
 }
 ]
}
// 根据校验规则构造一个 validator
const validator = new AsyncValidator(descriptor)
const data = {
 username: 'username'
}
validator.validate(model, (errors, fields) => {
 console.log(errors)
})

Wenn die Daten nicht den Verifizierungsregeln entsprechen, können Sie die entsprechende Fehlermeldung in der Rückruffunktion von validator.validate erhalten.

Wenn die allgemeinen Überprüfungsregeln im Async-Validator die Anforderungen nicht erfüllen können, können wir eine benutzerdefinierte Überprüfungsfunktion schreiben, um die Daten zu überprüfen. Eine einfache Prüffunktion sieht wie folgt aus.

function validateData (rule, value, callback) {
 let err
 if (value === 'xxxx') {
  err = '不符合规范'
 }
 callback(err)
}
const descriptor = {
 complex: [
  {
  validator: validateData
  }
 ]
}
const validator = new AsyncValidator(descriptor)

async-validator unterstützt die asynchrone Überprüfung von Daten. Wenn Sie also eine benutzerdefinierte Überprüfungsfunktion schreiben, erfolgt der Rückruf in der Überprüfungsfunktion unabhängig davon, ob die Überprüfung erfolgreich ist oder nicht Alle müssen aufgerufen werden.

2. Formularkomponente und FormItem-Komponente schreiben

Da wir nun wissen, wie man Async-Validator verwendet, wie man diese Bibliothek mit der zu schreibenden Formularkomponente kombiniert.

Umsetzungsidee

Verwenden Sie ein Bild, um die Umsetzungsidee zu beschreiben.

Formularkomponente

Formularkomponente sollte ein Container sein, der eine unbegrenzte Anzahl von FormItem oder anderen Elementen enthält. Sie können die integrierte Slot-Komponente von Vue verwenden, um den Inhalt im Formular darzustellen.

Die Form-Komponente muss außerdem wissen, wie viele FormItem-Komponenten sie enthält, die überprüft werden müssen. Normalerweise wird die Kommunikation zwischen übergeordneten und untergeordneten Komponenten durch die Bindung von Ereignissen an die untergeordneten Komponenten erreicht. Wenn Sie hier jedoch den Slot verwenden, können die Ereignisse der untergeordneten Komponenten nicht überwacht werden. Hier können Sie Ereignisse über $on in der Form-Komponente abhören und das benutzerdefinierte Ereignis der Form-Komponente auslösen, bevor das FormItem gemountet oder zerstört wird.

Dieser Idee folgend schreiben wir zunächst die Form-Komponente.

<template>
 <form class="v-form">
  <slot></slot>
 </form> 
</template>
<script>
import AsyncValidator from &#39;async-validator&#39;
export default {
 name: &#39;v-form&#39;,
 componentName: &#39;VForm&#39;, // 通过 $options.componentName 来找 form 组件
 data () {
  return {
   fields: [], // field: {prop, el}，保存 FormItem 的信息。
   formError: {}
  }
 },
 computed: {
  formRules () {
   const descriptor = {}
   this.fields.forEach(({prop}) => {
    if (!Array.isArray(this.rules[prop])) {
     console.warn(`prop 为 ${prop} 的 FormItem 校验规则不存在或者其值不是数组`)
     descriptor[prop] = [{ required: true }]
     return
    }
    descriptor[prop] = this.rules[prop]
   })
   return descriptor
  },
  formValues () {
   return this.fields.reduce((data, {prop}) => {
    data[prop] = this.model[prop]
    return data
   }, {})
  }
 },
 methods: {
  validate (callback) {
   const validator = new AsyncValidator(this.formRules)
   validator.validate(this.formValues, (errors) => {
    let formError = {}
    if (errors && errors.length) {
     errors.forEach(({message, field}) => {
      formError[field] = message
     })
    } else {
     formError = {}
    }
    this.formError = formError
    // 让错误信息的顺序与表单组件的顺序相同
    const errInfo = []
    this.fields.forEach(({prop, el}, index) => {
     if (formError[prop]) {
      errInfo.push(formError[prop])
     }
    })
    callback(errInfo)
   })
  }
 },
 props: {
  model: Object,
  rules: Object
 },
 created () {
  this.$on(&#39;form.addField&#39;, (field) => {
   if (field) {
    this.fields = [...this.fields, field]
   }
  })
  this.$on(&#39;form.removeField&#39;, (field) => {
   if (field) {
    this.fields = this.fields.filter(({prop}) => prop !== field.prop)
   }
  })
 }
}
</script>

FormItem-Komponente

FormItem-Komponente ist viel einfacher. Zuerst müssen Sie die Form-Komponente finden, die sie enthält . Als nächstes können die entsprechenden Fehlerinformationen basierend auf formError berechnet werden.

<template>
 <p class="form-item">
  <label :for="prop" class="form-item-label" v-if="label">
   {{ label }}
  </label>
  <p class="form-item-content">
   <slot></slot>
  </p>
 </p>
</template>
<script>
export default {
 name: &#39;form-item&#39;,
 computed: {
  form () {
   let parent = this.$parent
   while (parent.$options.componentName !== &#39;VForm&#39;) {
    parent = parent.$parent
   }
   return parent
  },
  fieldError () {
   if (!this.prop) {
    return &#39;&#39;
   }
   const formError = this.form.formError
   return formError[this.prop] || &#39;&#39;
  }
 },
 props: {
  prop: String,
  label: String
 }
}
</script>

FormItem muss außerdem einige benutzerdefinierte Ereignisse der Form-Komponente in den Hooks „mounted“ und „beforeDestroy“ auslösen.

<script>
export default {
 // ...
 methods: {
  dispatchEvent (eventName, params) {
   if (typeof this.form !== &#39;object&#39; && !this.form.$emit) {
    console.error(&#39;FormItem必须在Form组件内&#39;)
    return
   }
   this.form.$emit(eventName, params)
  }
 },
 mounted () {
  if (this.prop) {
   this.dispatchEvent(&#39;form.addField&#39;, {
    prop: this.prop,
    el: this.$el
   })
  }
 },
 beforeDestroy () {
  if (this.prop) {
   this.dispatchEvent(&#39;form.removeField&#39;, {
    prop: this.prop
   })
  }
 }
}
</script>

Erstellen Sie abschließend eine neue index.js, um die geschriebene Komponente zu exportieren.

import VForm from './Form.vue'
import FormItem from './FormItem.vue'

export {
 VForm,
 FormItem
}

3. Verwendung

Die Validierungsfunktion des Formulars befindet sich in der Formularkomponente. Sie können über $ref auf die Formularkomponente zugreifen und die Validierungsfunktion aufrufen, um die entsprechenden Verifizierungsinformationen zu erhalten.

Die Verwendung ist wie folgt:

<template>
 <v-form :model="formData" :rules="rules" ref="form">
  <form-item label="手机号" prop="tel">
   <input type="tel" maxlength="11" v-model.trim="formData.tel"/>
  </form-item>
  <button @click="handleSubmit">保存</button>
 </v-form>
</template>
<script>
 import { VForm, FormItem } from &#39;./common/Form&#39;
 export default {
  data () {
   return {
    formData: {
     tel: &#39;&#39;
    },
    rules: {
     tel: [
      {required: true, message: &#39;您的手机号码未输入&#39;},
      {pattern: /^1[34578]\d{9}$/, message: &#39;您的手机号码输入错误&#39;}
     ]
    }
   }
  },
  methods: {
   handleSubmit () {
    this.$refs.form.validate(errs => {
     console.log(errs)
    })
   }
  },
  components: {
   VForm,
   FormItem
  }
 }
</script>

Klicken Sie hier für den vollständigen Code.

4. Zusammenfassung

Dieser Artikel stellt kurz die Verwendung von Async-Validator vor und implementiert eine Formularkomponente mit Verifizierungsfunktion. Das hier implementierte Formular weist viele Mängel auf: (1) Es wird nur überprüft, wenn das Formular eingereicht wird. (2) Die FormItem-Komponente sollte auch die Benutzeroberfläche basierend auf den Überprüfungsergebnissen anpassen und entsprechende Eingabeaufforderungen geben. Daher eignet sich die Form-Komponente besser für den Einsatz auf mobilen Endgeräten mit weniger Interaktion.

Basierend auf dieser Implementierungsidee können Sie je nach Anwendungsszenario individuellere Formularkomponenten schreiben.

Verwandte Empfehlungen:

Detaillierte Erläuterung von Vue und Vue-Validator zur Implementierung der Formularüberprüfungsfunktion

So schreiben Sie eine benutzerdefinierte BootstrapValidator-Überprüfungsmethode

Über die Verwendung des Formularvalidierungs-Plug-ins formValidator

Das obige ist der detaillierte Inhalt vonVerwenden Sie async-validator, um Formularkomponenten zu schreiben. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!