Comment personnaliser la validation du formulaire à l'aide de vux-ui

Cette fois, je vais vous montrer comment utiliser vux-ui pour personnaliser la vérification de formulaire, et quelles sont les précautions pour utiliser vux-ui pour personnaliser la vérification de formulaire. cas pratiques.

Les débutants qui utilisent le framework vue avec vux trouvent que cette bibliothèque d'interface utilisateur est un peu incompétente. Parlons des deux problèmes d'exigences que j'ai rencontrés lors du processus de vérification du formulaire et de la manière de les résoudre.

1. En utilisant le composant x-input, nous pouvons voir que le responsable ne fournit que trois types de validateurs is-type , à savoir : email, china-name, china-mobile, autres. sont requis Comment écrire un validateur personnalisé ?

Solution : Personnalisez le validateur de type is (vous pouvez utiliser une vérification régulière dans valid après le test)

<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 Ce n'est qu'une fois le contenu du formulaire correctement rempli que le bouton de soumission peut être activé. le formulaire soit Trigger (comme indiqué dans l'image)

Solution : Utilisez l'événement @on-change du composant x-input et l'attribut ref

<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;
        }
      }
    }
  }

Je crois que vous l'avez vu. Vous maîtrisez la méthode dans le cas de cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Comment utiliser les gardes de route dans le routage angulaire

Comment implémenter la connexion dans React-Router avec Contrôle de validation React

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!