Heim > Artikel > Web-Frontend > So passen Sie die Formularvalidierung mit vux-ui an
Dieses Mal zeige ich Ihnen, wie Sie mit vux-ui die Formularüberprüfung anpassen und welche Vorsichtsmaßnahmen für die Verwendung von vux-ui zum Anpassen der Formularüberprüfung gelten Ein praktischer Fall.
Einsteiger, die das Framework vue mit vux verwenden, finden, dass diese UI-Bibliothek etwas inkompetent ist. Lassen Sie uns über die beiden Nachfrageprobleme sprechen, auf die ich während des Formularüberprüfungsprozesses gestoßen bin, und darüber, wie ich sie lösen kann.
1. Anhand der x-Eingabekomponente können wir sehen, dass der Beamte nur drei Arten von Validatoren vom Typ is bereitstellt, nämlich: E-Mail, China-Name, China-Mobile und andere sind erforderlich. Wie schreibe ich einen benutzerdefinierten Validator? Lösung: Passen Sie den IS-Typ-Validator an (Sie können nach dem Testen die reguläre Überprüfung verwenden)
<x-input type="number" v-model="code" placeholder="请输入验证码" :is-type="codeValue" /> export default { data() { return{ code: '', codeValue: function(value){ return { valid: value.length === 4, msg: "验证码有误!" } } } } }
2. Erst nachdem der Formularinhalt korrekt ausgefüllt wurde, kann die Schaltfläche zum Absenden des Formulars verwendet werden ausgelöst werden (Wie im Bild gezeigt)
Lösung: Verwenden Sie das @on-change-Ereignis der x-Eingabekomponente und das Ref-Attribut
<x-input type="number" v-model="code" placeholder="请输入验证码" :is-type="codeValue" ref="refcode" @on-change="keyDown" /> <x-button action-type="submit" :disabled="disabled">完成</x-button> export default { data() { return{ code: '', disabled: true, codeValue: function(value){ return { valid: value.length === 4, msg: "验证码有误!" } } } }, methods: { keyDown(){ if(this.$refs.refcode.valid == true && this.code != ''){ this.disabled = false; }else{ this.disabled = true; } } } }
Ich glaube, Sie haben den Fall in diesem Artikel gelesen. Nachdem Sie die Methode gemeistert haben, lesen Sie bitte andere verwandte Artikel auf der chinesischen PHP-Website, um weitere spannende Inhalte zu erhalten!
Empfohlene Lektüre:
So verwenden Sie Route Guards im Angular-RoutingSo implementieren Sie die Anmeldung im React-Router mit Validierungskontrolle reagierenDas obige ist der detaillierte Inhalt vonSo passen Sie die Formularvalidierung mit vux-ui an. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!