Vue.js implémente un formulaire de connexion personnalisé

Cette fois, je vais vous présenter Vue.js pour implémenter un formulaire de connexion personnalisé. Quelles sont les précautions pour que Vue.js implémente un formulaire de connexion personnalisé. Ce qui suit est un cas pratique, prenons un. regarder.

Le formulaire Z est un composant courant dans les activités de projets 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 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 connexion. La méthode 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 son propre vérification de formulaire. Méthodes, grâce à la combinaison, vous pouvez terminer rapidement la connexion, l'inscription, la récupération du mot de passe, etc. Composants du formulaire. 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 ：

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 php chinois !

Lecture recommandée :

Explication détaillée de la façon dont vue emballe les noms de domaine en fonction des méthodes de paramètres

Conversion de chaîne avec des balises HTML Pour les balises HTML

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!