How to elegantly implement the mobile login and registration module in vue3

Preface

The mobile project developed recently directly uses Vue3. The new feature composition API has indeed brought a brand new development experience. When using these features, developers can put highly coupled states and methods together for unified management, and can encapsulate highly reusable logic code separately according to specific circumstances, which is very helpful to improve the robustness of the overall code architecture.

Nowadays, almost every newly launched mobile project contains a registration and login module. In this practice, we have made some experience summaries on the form controls in the login and registration process, and improved the maintainability and development efficiency of the code by extracting common codes.

Next, take a look at the pictures provided by the art students.

Registration Page

Login Page

Forgot Password Page

Change password page

By observing the product pictures above, we can clearly see that the core component of the entire login and registration module is the input box. As long as the input box component is fully developed, other pages can directly reference it.

After the input box is developed, only the static page display is realized. In addition, we also need to design a common data validation solution to be applied to the form controls in each page.

Input box component

From the above analysis, we can see that the input box component is the core content of the entire login and registration module. Let's first look at the UI forms of the input box component.

Form 1

There is text +86 on the left, an input box in the middle, and a cross icon on the right if data is detected in the input box. If there is no data, it is empty and the icon is hidden.

Form 2

There is only one input box on the left and text on the right. The content of the text may be a verification code or a countdown text displayed after clicking the verification code.

Form Three

There is still only one input box on the left. If the input box on the right is detected to have content, a cross icon will be displayed. If the content is empty, the icon will be hidden.

layout

Based on the above observations, we can divide this input component into three parts: left, middle, and right. The left side may contain text or be empty. The middle is an input box. The right side may contain text or a cross icon.

The template content is as follows:

<template>
 <div class="input">
  <!--Left side, lt is the left content-->
   <span class="left-text">
   {{ lt }}
   </span>
  
  <!--Middle-->
  <input class="content" v-bind="$attrs" :value="value" @input="onChange" /> 
  
  <!--On the right, the rt judgment end is a verification code or a cross icon-->
   <div v-if="rt == 'timer'" class="right-section">
    {{ timerData.content }} <!--It may be a 'verification code' or a countdown -->
   </div>
   <div
   v-else-if="rt == 'close'"
   class="right-section"
   >
   <van-icon name="close" /> <!--Fork icon-->
   </div>
 </div> 
</template>

In the layout, the left, middle and right parent elements are set to display:flex, and the three child elements are all set to display:inline-block inline block mode, so that the left and right sides can adapt to their own content, and the middle input is set to flex:1 to fill the remaining width.

In theory, such a layout is feasible, but problems were found in practice.

The demo effect is as follows:

When the width of the right side continues to increase, the middle input overflows on the right side due to the default width, which is not what we want.

The solution to this problem is very simple. Just set the width of the middle input to 0. The following will achieve the desired effect.

v-model

The component structure of the above package referenced by the external page is as follows:

 <InputForm
  lt="+86" <!--+86 is displayed on the left--> 
  rt="close" <!--The cross icon is displayed on the right-->
  placeholder="Please enter your mobile number"
 />

The external page creates a form data form_data as follows, but it is hoped that the data of form_data can be bound to the value of the child component input box in a two-way manner through v-model.

 const form_data = reactive({
  number_number: '', //usernamepassword: '', //passwordppassword: '', //repeat passwordcaptcha: '', //verification code})

It is very easy to implement v-model in vue3. Use v-model:xx in the parent component to complete the binding. Here xx corresponds to the state name to which the child component is bound, as shown below.

 <InputForm
    lt="+86" <!--+86 is displayed on the left--> 
    rt="close" <!--The cross icon is displayed on the right-->
    placeholder="Please enter your mobile number"
    v-model:value="form_data.password"
 />

Next, in the child component, first declare the attribute value to be bound and listen to the oninput event of the input box. The code is as follows:

<template>
  <div class="input">
    ...
      <input class="content" v-bind="$attrs" :value="value" @input="onChange" /> 
    ...
  </div> 
</template>
export default defineComponent({
 props: {
  lt:String,
  rt: String,
  value: String
 },
 setup(props, context) {
  const onChange = (e:KeyboardEvent) => {
   const value = (e.target as HTMLInputElement).value;
    context.emit("update:value",value);
  };
  return {
    onChange
  }
 }
 })

The callback function of the oninput event returns the obtained value using context.emit("update:value",value).

The first part of update:value is a fixed wording, and the state name to be two-way bound is filled in the latter. In this way, the binding of v-model is easily completed.

Data Verification

Generally speaking, as long as there are form controls (such as input boxes) on the page, data validation should be performed on the corresponding values. If the original method is followed, when the user clicks the button, js receives the response and obtains the value of each form item in turn for validation.

This approach can certainly achieve the function, but it is not efficient and concise. Because many pages need to be verified, a lot of verification logic is written repeatedly.

Next, we will design a universal verification solution to encapsulate the reusable logic codes and quickly apply them to each page to improve development efficiency.

Taking the registration page as an example, the template code is as follows. Create four input box components: mobile phone number, mobile phone verification code, password and confirm password. Finally, place a registration button. (In order to make it look clearer, the following code deletes all ts types)

 <Form ref="form" :rules="rules">
 
   <InputForm
    lt="+86"
    rt="close"
    v-model:value="form_data.number_number"
    placeholder="Please enter your mobile number"
    propName="number_number"
   />
   
   <InputForm
    rt="timer"
    v-model:value="form_data.captcha"
    placeholder="Please enter the mobile verification code"
    propName="captcha"
   />

   <InputForm
    rt="close"
    v-model:value="form_data.password"
    placeholder="Please enter your password"
    type="password"
    propName="password"
   />

   <InputForm
    rt="close"
    v-model:value="form_data.ppassword"
    placeholder="Please enter the confirmation password"
    type="password"
    propName="ppassword"
   />

   <Button text="Register" @sub="onSubmmit" /> <!--Register button-->

  </Form>

After learning from the form practices of some other excellent frameworks, we first added a component Form in the outermost layer, and then added a property propName to each input box component. This property is used together with rules. Rules are manually defined validation rules. When it is passed to the Form component, the child component (input box component) can get its validation rules through the propName property.

The overall implementation idea can be connected from the beginning. First, the front-end developer defines the validation rules of the current page and passes it to the Form component. After receiving it, the Form component distributes the validation rules to each of its subcomponents (input box components). After the subcomponent gets the validation rules, it can perform corresponding data validation on the value of the input box.

When the user clicks the register button, the click event will get the instance of the Form component and run its validate method. At this time, the Form component will perform a round of data validation on each of its subcomponents. Once all validations are successful, the validate method returns true. If there is a validation that fails, the validate method returns false and pops up an error message.

The registration page logic is as follows:

export default defineComponent({
 components:
  InputForm, //Input boxButton, //Registration buttonForm, //Form component},
 setup(props) {
 
  const form_data = ...; // omitted const rules = ...;
  
  //Get the instance of the outermost Form component const form = ref(null);
  
  const onSubmit = ()=>{
   if (!form.value || !form.value.validate()) {
     return false;
   }
   //The verification passed, you can request the registration interface}

  return {
   form,
   rules,
   onSubmit,
   form_data
  };
 },
});

Define a variable form and use it to get the instance of the Form form. In the template <Form ref="form" :rules="rules">, just add a ref attribute.

The user clicks the register button to trigger the onSubmit function. Because form is a variable created using ref, you need to call .value to get the value. Run the form.value.validate() function to start executing the validation logic for each subcomponent under the Form form. If all pass, true will be returned, and if one fails, false will be returned.

From the above analysis, we can see that the Form control only exposes a validate function, and by calling this function, we can know whether the validation is passed. So how does validate know what rules to use for validation? So we need to design a set of validation rules first, pass it to the Form component, and then its internal validate function can use the rules to perform validation.

rules design

rules is an object. For example, the rules of the registration page above are defined as follows:

const rules = {
   number_number:[{
        type: 'required',
        msg:"Please enter a valid phone number" 
      }
        "phone"
      ],
   captcha:[
    {
     type: 'required',
     msg: 'Verification code cannot be empty'
    }
   ],
   password: [
    {
     type: 'required',
     msg: 'Please enter your password',
    },
    {
     type: 'minLength',
     params: 6,
     msg: 'The password length cannot be less than 6 characters',
    },
   ],
   ppassword:[
    {
     type: 'custome',
     callback() {
      if (form_data.password !== form_data.ppassword) {
       return {
        flag: false,
        msg: 'The two passwords you entered do not match',
       };
      }
      return {
       flag: true,
      };
     },
    },
   ]
  }

The rules we defined are an object in the form of key-value pairs. The key corresponds to the propName of each input box component on the template, and the value is an array corresponding to the rules that the input box component must follow.

Now let's take a closer look at the composition of the values ​​under each object. The values ​​are organized into arrays because this allows you to add multiple rules to the input box. Rules correspond to two forms, one is an object and the other is a string.

Strings are easy to understand. For example, the number_number attribute above corresponds to the string phone. The meaning of this rule is that the value of the input box must comply with the rules of mobile phone numbers. Of course, if the string is filled with email, it must be verified as an email address.

If the rule is an object, it contains the following properties:

 {
  type, // type msg, // custom error message params, // parameter value passed in, for example {type:'minLength',params:6}, the minimum length of the value cannot be less than 6 digits callback // custom validation function}

type is the validation type. If it is filled with required, it means it is a required field. If the user does not fill it in, an error message defined by msg will be reported when clicking the registration button to submit.

In addition, type can also fill in minLength or maxLength to limit the length of the value. How many digits can be limited? This can be passed through params.

Finally, type can also be filled in as custome, which allows the developer to define the validation logic function callback of the input box. The function is required to return an object with a flag attribute at the end. The attribute flag is a Boolean value, which tells the validation system whether the validation is successful or failed.

Form

After the rules are defined, they are passed to the Form component. The Form component needs to distribute the validation logic to its subcomponents. Let each of its subcomponents be responsible for generating its own validation function.

<!-- Form component -->
<template>
 <div class="form">
  <slot></slot>
 </div>
</template>

<script lang="ts">
import { ref, provide } from "vue";
export default defineComponent({
 name: "Form",
 props:{
  rules:Object
 },
 setup(props) {
  
  ...//Omit provide("rules", props.rules); // Distribute the validation rules const validate = ()=>{
   //Exposed verification function}
  
  return {
   validate
  } 
 }
 }) 
</script>  

As can be seen from the above structure, the Form component template provides a slot function, uses provide in the logic code to pass the validation rules to the descendants, and exposes a validate function.

Subcomponent generates validation function

This time we return to the core component InputForm of the login and registration module. Now we need to add validation logic to the input box component.

import { inject, onMounted } from "vue";
...

setup(props, context) {

 const rules = inject("rules");
 
 const rule = rules[props.propName]; // Get the validation rule through propName const useValidate = () => {
      const validateFn = getValidate(rule); // Get validation function const execValidate = () => { 
        return validateFn(props.value); //Execute the validation function and return the validation result};
      onMounted(() => {
        const Listener = inject('collectValidate');
        if (Listener) {
         Listener(execValidate);
        }
      });  
 };
 
 useValidate(); //Initialize validation logic...
}

The structure of rules is similar to the following. Through inject and propName, we can get the rule that Form distributes to the input box to be executed.

{
  captcha:[{
   type: 'required',
   msg: 'Verification code cannot be empty'
  }],
  password:[{
   type: 'required',
   msg: 'Please enter your password', 
  }]
}

Then pass the rule rule to the getValidate function (described later) to get the validation function validateFn. The validation function validateFn passes the value of the input box and returns the validation result. Here, validateFn is encapsulated and given to execValidate for external use.

In the above code, we also see the logic code wrapped in onMounted. When the component is mounted, use inject to get a function Listener passed down by the Form component, and pass the validation function execValidate as a parameter to execute.

Let's go back to the Form component in the code below and see what kind of function Listener is.

setup(props) {

const list = ref([]); //define an array const listener = (fn) => {
 list.value.push(fn);
};

provide("collectValidate", listener); //Distribute the listening function //Verification function const validate = (propName) => {
  const array = list.value.map((fn) => {
    return fn();
  });
  const one = array.find((item) => {
    return item.flag === false;
  });
  if (one && one.msg) {
    //Verification failed Alert(one.msg); //Popup error message return false;
  } else {
    return true;
  }
};
...

As can be seen above, the Form component distributes the listener function. In the onMounted lifecycle hook, the subcomponent obtains the distributed listener function and passes the validation function execValidate defined in the subcomponent as a parameter to execute.

This ensures that each subcomponent will pass its validation function to the list collection in the Form component once it is mounted. The validate method of the Form component only needs to loop through the list to execute the validation function of each subcomponent in turn. If all the validations pass, true is returned to the external page. If one fails, an error message pops up and false is returned.

At this point, the entire validation process has been completed. Form first distributes validation rules to subcomponents, and subcomponents obtain the rules to generate their own validation functions, and then return the validation functions to Form for collection after they are mounted. At this time, the validate function exposed by the Form component can implement data validation for all form controls.

The next and final step is to study how subcomponents can generate their own validation functions through rules.

check

First, write a class Validate to manage validation logic. The code is as follows. We can continue to expand the methods of this class according to new requirements, such as adding email or maxLength methods.

class Validate {

 constructor() {}

 required(data) { //Check if it is required const msg = 'This information is required'; //Default error message if (data == null || (typeof data === 'string' && data.trim() === '')) {
   return {
    flag:false,
    msg
   }
  }
  return {
    flag:true
  }
 }
 
 // Check if it is a mobile phone number phone(data) { 
  const msg = 'Please fill in the correct mobile phone number'; //Default error message const flag = /^1[3456789]\d{9}$/.test(data);
  return {
   msg,
   flag
  }
 }
 
 // Check the minimum length of the data minLength(data, { params }) {
  
    let minLength = params; // minimum length if (data == null) {
     return {
      flag:false,
      msg: "Data cannot be empty"
     }
    }

    if (data.trim().length >= minLength) {
     return {flag:true};
    } else {
     return {
      flag:false,
      msg:`The minimum length of data cannot be less than ${minLength} bits`
     }
    } 
  }

}

In all methods defined by the Validate class, the first parameter data is the value to be validated, and the second parameter is the rule defined in each rule on the page. For example, {type: 'minLength', params: 6, msg: 'The password length cannot be less than 6 characters'}.

The data structure returned by each method in the Validate class is in the form of {flag:true,msg:""}. In the result, flag indicates whether the validation is passed, and msg is the error message.

The validation class Validate provides a variety of validation methods. Next, a singleton pattern is used to generate an instance of this class and the instance object is applied to the actual validation scenario.

 const getInstance = (function(){
  let _instance;
  return function(){
     if(_instance == null){
      _instance = new Validate();
     }
     return _instance;
   }
 })()

By calling the getInstance function, you can get the singleton Validate instance object.

The input box component can return the validation function required by the component by passing a rule to the getValidate function. Next, let's see how the getValidate function generates the validation function through the rule. The code is as follows:

/**
 * Generate verification function */
export const getValidate = (rule) => {
  const ob = getInstance(); //Get the instance object of the Validate class const fn_list = []; //Collect all the validation functions //Traverse the rule array, get the validation method in the Validate class according to its type and put it into fn_list to collect rule.forEach((item) => {
   if (typeof item === 'string') { // string type fn_list.push({
     fn: ob[item], 
    });
   } else if (isRuleType(item)) { // Object type fn_list.push({
     //If item.type is a custom type, the verification function directly uses callback. Otherwise, get item from the ob instance. 
     fn: item.type === 'custome' ? item.callback : ob[item.type],
    });
   }
  });
  //The verification function that needs to be returned const execuate = (value) => {
   let flag = true,
    msg = '';
   for (let i = 0; i < fn_list.length; i++) {
    const item = fn_list[i];
    const result = item.fn.apply(ob, [value, item]); //item.fn corresponds to the validation method defined by the Validate class if (!result.flag) {
     //Verification failed flag = false;
     msg = item.msg ? item.msg : result.msg; //Whether to use the default error message or user-defined message break;
    }
   }
   return {
    flag,
    msg,
   };
  };
  return execute;
};

The data structure of rule is similar to the following code. When rule is passed to getValidate function, it will determine whether it is an object or a string, and then get the validation function corresponding to its type from ob instance and store it in fn_list.

 [
  {
   type: 'required',
   msg: "Please enter your phone number"
  },
  "phone"
 ]

The getValidate function finally returns the execute function, which is also the validation function obtained by the input box component. The input box value can be obtained in the input box component. If the value is passed to the execute method call, the method will traverse the previously cached validation function list fn_list, pass the value to each validation method to run, and then get the validation result of the input box component for the current value and return it.

The above verification logic has been implemented. Next, whether you are developing a login page, a page for forgetting passwords or changing passwords, you only need to use the Form component and the InputForm component to organize the page structure and write a set of rules for the current page. All the remaining verification details and interactive actions are handled internally by Form and InputForm, which will greatly improve development efficiency.

Final result

Summarize

This is the end of this article about how to elegantly implement the mobile login and registration module in vue3. For more relevant vue3 mobile login and registration module content, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!