Heim  >  Artikel  >  Web-Frontend  >  So passen Sie die Formularvalidierung mit vux-ui an

So passen Sie die Formularvalidierung mit vux-ui an

php中世界最好的语言
php中世界最好的语言Original
2018-05-30 14:39:243305Durchsuche

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-Routing


So implementieren Sie die Anmeldung im React-Router mit Validierungskontrolle reagieren

Das 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!

Stellungnahme:
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