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

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

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:

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!