Explication détaillée de l'implémentation Vue.js du code du formulaire de connexion configurable

Cet article présente principalement l'exemple de code détaillé de Vue.js pour implémenter le formulaire de connexion configurable. L'article présente également l'exemple de code de vue.js pour tout sélectionner et tout désélectionner. Les amis qui en ont besoin peuvent s'y référer

.

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, connectez-vous Lors de l'appel de la validation du formulaire à l'intérieur du sous-composant, obtenez enfin l'interface d'appel de données 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 ：

vue.js Exemple de code 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
      }
    }
  }
})

Ce qui précède est ce que j'ai compilé pour vous, j'espère qu'il vous sera utile. à l'avenir.

Articles connexes :

Exemple d'implémentation JS de l'algorithme de mise en cache

Comment utiliser le swiper du plug-in d'emballage React-Native

Méthode de configuration d'utilisation de sass dans le projet vue

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!