Detailed explanation of Vue.js implementation of configurable login form code

This article mainly introduces the detailed example code of Vue.js to implement configurable login form. The article also introduces the example code of vue.js to select all and deselect all. Friends who need it can refer to it

Form is a common component in back-end project business. This time, the login function has been reconstructed to meet the needs of configurable login methods. I will record and share it here.

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, and 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 the form element as the granularity, the components of mobile phone number, password, and SMS verification code are separated. Each of them has its own form verification method, which can be combined Quickly complete form components such as login, registration, and password retrieval. 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, data assembly, and interface calling:

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 7d427e22129094dbbdee82a7e6c7d93a.

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

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

Examples of JS implementation of caching algorithms

How to use the react-native encapsulation plug-in swiper

Configuration method of using sass in vue project

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