Quelles sont les précautions à prendre pour utiliser la validation de formulaire personnalisé vux-ui dans Vue ?

Cette fois, je vais vous proposer la personnalisation de Vue à l'aide de vux-uiVérification du formulaireQuelles sont les précautionsVoici un cas pratique, jetons un coup d'œil.

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 :

Une explication détaillée des étapes d'utilisation d'Angular route guard

Gestion du routage React Une explication détaillée des étapes pour utiliser React Router

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!