Comment personnaliser le code du formulaire de connexion dans Vue.js

Cette fois, je vais vous montrer comment personnaliser le code du formulaire de connexion dans Vue.js. Quelles sont les précautions pour personnaliser le code du formulaire de connexion dans Vue.js ? Voici un cas pratique, jetons un œil.

Le formulaire est un composant courant dans les activités de projet backend. Cette fois, la fonction de connexion a été reconstruite pour répondre aux besoins des méthodes de connexion configurables. Je vais l'enregistrer et la partager ici.

Scénario commercial

Dans le passé, le projet ne prenait en charge que la connexion avec un numéro de téléphone portable + un mot de passe, et le formulaire était rédigé directement sur le front-end.Plus tard, il y a eu des clients que j'espère prendre en charge la connexion par code de vérification. Certains clients espèrent également avoir une méthode de connexion par numéro de téléphone portable + code de vérification + mot de passe... Par conséquent, la flexibilité de la méthode de connexion nécessite une prise en charge de formulaire configurable, j'ai donc divisé le composant de connexion.

En prenant l'élément de formulaire comme granularité, les composants du numéro de téléphone mobile, du mot de passe et du code de vérification SMS sont séparés. Chacun d'eux a sa propre méthode de vérification de formulaire, qui. peuvent être combinés. Complétez rapidement les composants du formulaire tels que la connexion, l'enregistrement et la récupération du mot de passe. Cohésion élevée et faible couplage, cohésion élevée et faible couplage... répétez-le dix fois ~

.
├ common
├ captcha.vue
|  ├ password.vue
|  └ phone.vue
├ login
|  └ index.vue
├ register
|  └ index.vue
└ resetPassword
  └ index.vue

Ici, nous utilisons la connexion comme composant parent, lisons la configuration de connexion renvoyée par le serveur et effectuons un rendu conditionnel dans le modèle, connexion La validation du formulaire à l'intérieur du sous-composant est appelée, et enfin l'interface d'appel de données est obtenue via Vuex. La logique de l'ensemble du formulaire de connexion configurable est Jiangzi, et le code est le suivant.

Code

Demander les données de configuration du serveur :

/* 参数说明：
 * 'password': 密码登录 
 * 'captcha': 短信验证码登录
 * 'password_or_captcha': 密码或短信登录 
 * 'password_with_captcha': 密码+短信登录
 */
config: {
 login_methods: 'password'
}

Code de rendu principal (pug) du composant de connexion :

.login-card
 .login-header
   h3 登录
 .login-content
  phone(ref="phone")
  password(
   v-if="isPasswordMode"
   ref="password"
  )
  captcha(
   v-if="isCaptchaMode"
   ref="captcha"
  )  
  template(v-if="isPasswordWithCaptchaMode")
   captcha(ref="captcha")
   password(ref="password")
  
  template(v-if="isPasswordOrCaptchaMode")
   ...
  el-button(@click="login") 登录

La connexion nécessite trois étapes : la vérification du formulaire, l'assemblage des données et l'appel de l'interface :

async login () {
 if (!this.validate()) return
 const loginData = this.getLoginData()
 await this.postLogin(loginData)
 ...
}

La vérification du formulaire de connexion est en fait un jugement logique sur la méthode validate() de tous les composants de la méthode de connexion actuelle :

validate () {
 const phone = this.$refs.phone.validate()
 let isPass = false
  
 if (this.isPasswordMode) {
  if (this.$refs.password) isPass = this.$refs.password.validate()
 }
  
 if (this.isCaptchaMode) {
  if (this.$refs.captcha) isPass = this.$refs.captcha.validate()
 }
  
 if (this.isPasswordWithCaptchaMode) ...
  
 if (this.isPasswordOrCaptchaMode) ...
  
 isPass = phone && isPass
 return isPass
}

Chaque sous-composant est un formulaire complet, et la vérification est également complétée par elle-même. Modèle de composant de mot de passe :

.login-password
 el-form(
  :model="form"
  :rules="rules"
  ref="form"
  @submit.native.prevent=""
 )
  el-form-item(prop="password")
   el-input(
    v-model="form.password"
    type="password"
    name="password"
   )

W3C : lorsqu'il n'y a qu'une seule ligne. champ de saisie de texte dans un formulaire, l'agent utilisateur doit accepter Saisir dans ce champ comme demande de soumission du formulaire.

Il convient de noter que selon les normes du W3C, lorsqu'il n'y a qu'une seule zone de saisie dans un formulaire élément, dans la zone de saisie. Appuyer sur Entrée soumettra automatiquement le formulaire. Ce comportement par défaut peut être évité en ajoutant @submit.native.prevent à .

Vérification du formulaire du composant de mot de passe :

validate () {
 let res = false
 this.$refs.form.validate((valid) => {
  res = valid
 })
 return res
}

Enfin, récupérez toutes les données du formulaire de Vuex et assemblez-les :

computed: {
 ...mapState('login', {
  phone: state => state.phone,
  password: state => state.password,
  captcha: state => state.captcha
 }), 
},
methods: {
 ... 
 getLoginData () {
  let mode = ''
  const phone = this.phone
  ...
  const data = { phone }
  
  if (this.isPasswordMode) {
   mode = 'password'
   data.password = password
  }
  if (this.isCaptchaMode) {
   mode = 'captcha'
   data.captcha = captcha
  } 
  if (this.isPasswordWithCaptchaMode) ...  
  if (this.isPasswordOrCaptchaMode) ...  
  data.mode = mode
  return data
 }
}

Supplément ：

exemple de code vue.js pour tout sélectionner et tout désélectionner

new Vue({
  el: '#app',
  data: {
    checked: false,
    checkedNames: [],
    checkedArr: ["Runoob", "Taobao", "Google"]
  },
  methods: {
    changeAllChecked: function() {
      if (this.checked) {
        this.checkedNames = this.checkedArr
      } else {
        this.checkedNames = []
      }
    }
  },
  watch: {
    "checkedNames": function() {
      if (this.checkedNames.length == this.checkedArr.length) {
        this.checked = true
      } else {
        this.checked = false
      }
    }
  }
})

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article Veuillez payer. attention pour des choses plus excitantes. Autres articles connexes sur le site Web chinois php !

Lecture recommandée :

Résumé de la méthode de rendu angulaire côté serveur

vue2 implémente la sélection d'adresse de panier

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!