Detailed explanation of the steps to implement a configurable login form with Vue.js

This time I will bring you a detailed explanation of the steps to implement a configurable login form in Vue.js. What are the precautions for implementing a configurable login form in Vue.js? Here are practical cases, let’s take a look.

Business Scenario

In the past, the project only supported login with mobile phone number and password, and the form was written directly on the front end. Later, some customers hoped It can support verification code login. Some customers also hope to have a login method with mobile phone number verification code and password... Therefore, the flexibility of the login method requires configurable form support, so I split the login component. .

With form elements as the granularity, the components of mobile phone number, password, and SMS verification code are separated. They all have their own Form verificationMethod, through combination, you can quickly complete login, registration, password retrieval, etc. Form components. High cohesion and low coupling, high cohesion and low coupling... repeat it ten times~

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

Here we use login as the parent component, read the login configuration returned by the server and do conditional rendering in the template, and call it when logging in Form verification inside the subcomponent, and finally get the data calling interface through Vuex. The logic of the entire configurable login form is Jiangzi, and the code is next.

Code

Request server configuration data:

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

Core rendering code (pug) of the login component:

.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") 登录

Login Three steps are required: form verification, assembling data, and calling the interface:

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

The login form verification is actually a logical judgment on the validate() method of all components in the current login method:

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
}

Each subcomponent is a complete form, and verification is also completed by itself. Password component template:

.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: When there is only one single-line text input field in a form, the user agent should accept Enter in that field as a request to submit the form.

It should be noted that according to W3C standards, when there is only one input box in a form element, pressing Enter in the input box will automatically submit the form. This default behavior can be prevented by adding @submit.native.prevent to .

Form verification of password component:

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

Finally get all the form data from Vuex and assemble it:

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
 }
}

Supplement:

vue.js Example code for selecting all and deselecting all

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
      }
    }
  }
})

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the PHP Chinese website !

Recommended reading:

Detailed explanation of the steps for Vue to convert html strings into HTML

Detailed explanation of Koa2 file upload and download cases

The above is the detailed content of Detailed explanation of the steps to implement a configurable login form with Vue.js. For more information, please follow other related articles on the PHP Chinese website!