Analysis of Vue.js configuration login form code steps

This time I will bring you an analysis of the steps of configuring the login form code in Vue.js. What are the precautions for configuring the login form code in Vue.js? Here is a practical case, 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:

vue environment passing parameters packaging different domain name code analysis

How Vue operates html field string conversion For HTML tags

The above is the detailed content of Analysis of Vue.js configuration login form code steps. For more information, please follow other related articles on the PHP Chinese website!