Use Vue.js to create a configurable login form

This time I will bring you how to use Vue.js to make a configurable login form and use Vue.js to make a configurable login form. What are the things to note?The following is a practical case, let’s take a look one time.

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

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:

How to use Vue.js form control

How to use js to transfer Json between front and backend

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