Utilisez Vue.js pour créer un formulaire de connexion configurable

Cette fois, je vais vous présenter comment utiliser Vue.js pour créer un formulaire de connexion configurable. Quelles sont les précautions concernant l'utilisation de Vue.js pour créer un formulaire de connexion configurable. cas. Jetons un coup d'oeil une fois.

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 effectuer 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, 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 :

Comment utiliser le contrôle de formulaire Vue.js

Comment utiliser js pour transférer Json entre front et back-end

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!