Heim > Web-Frontend > js-Tutorial > Hauptteil

Welche Vorsichtsmaßnahmen sind für die Verwendung der benutzerdefinierten Formularvalidierung von vux-ui in Vue zu beachten?

php中世界最好的语言
Freigeben: 2018-05-22 11:34:38
Original
2134 Leute haben es durchsucht

Dieses Mal werde ich Ihnen die Anpassung von Vue mit vux-ui vorstellenFormularüberprüfungWas sind die Vorsichtsmaßnahmen Das Folgende ist ein praktischer Fall, schauen wir uns das an.

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: "验证码有误!"
        }
      }
    }
  }
}
Nach dem Login kopieren

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;
        }
      }
    }
  }
Nach dem Login kopieren

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:

Eine detaillierte Erklärung der Schritte zur Verwendung von Angular Route Guard


React Routing Management Eine detaillierte Erklärung der Schritte zur Verwendung von React Router

Das obige ist der detaillierte Inhalt vonWelche Vorsichtsmaßnahmen sind für die Verwendung der benutzerdefinierten Formularvalidierung von vux-ui in Vue zu beachten?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage