Technology stack: vue3 + Bootstrap

Difficulty: encapsulating functions

Details: regular expressions, vue3 declaration cycle, changing Bootstrap class names to indirectly change styles, ref and v-model

Preview:

 

 

1. Install and use Bootstrap (use vue-cli to build the project first)

vue-cli: Refer to my other article, detailed steps are attached~~

// Download using package management tools
// npm install bootstrap
// yarn install bootstrap

Because Bootstrap is based on jQuery, we also need to install jQuery

We need to import dependencies in the main.js culture, import jQuery and then Bootstrap, and then import Bootstrap's css and js files.

// Introduce jQuery, bootstrap
import $ from "jquery";
import "bootstrap";
// Introduce bootstrap style
import "bootstrap/dist/css/bootstrap.min.css";
import "bootstrap/dist/js/bootstrap.min.js";

Then we can use Bootstrap to set the class names 'is-valid' (legal) and 'is-invalid' (invalid) for input,

Set different (class name) styles according to the judged results

2. Implement the function of verification

1. Regular expression:

We need to define some different regular rules for different input forms (username, password, email, phone number):

// regular rules
let regName = /^[a-zA-Z0-9]{3,9}$/;
let regPassword = /^[a-zA-Z0-9|!|?|.|@|%|]{6,9}$/;
let regEmail = /^[a-zA-Z0-9]{6,14}@[a-z]{3,6}.com$/;
let regPhone = /^1[1|3|5-9]{2}[0-9]{8}$/;

A brief introduction to regular expressions, taking regName as an example,

.

2. Bind the data

1. To call this method, you need to pass in a regular expression and a node element, bind the value in the input box through v-model of vue3, and bind the input node itself with ref

How to bind as follows:

<!-- Name -->
    <div class="input-group mb-3">
      <div class="input-group-prepend">
        <span class="input-group-text" id="basic-addon1">Name:</span>
      </div>
      <input
        ref="usernameIpt" -- ref bind node,
        v-model="username" -- v-model bind node
        placeholder="Please enter your username"
        type="text"
        class="form-control" -- Add a new class name here and it will change the style
        aria-label="Username"
        aria-describedby="basic-addon1"
      />
    </div>

2. Use setAttribute to set different styles by judging if the detection result is true

Use Bootstrap to set input class names 'is-valid' (valid) and 'is-invalid' (not valid)

Preview valid styles: is-valid

Illegal: is-invalid

  

3. Encapsulate a regular method regMethods() to judge and modify the style

1. The function needs to pass in a corresponding regular expression, the corresponding node

For example, pass in the regName regular expression, and pass in the usernameIpt node.

// Encapsulation regular judgment method
const regMethods = (thisReg, ele) => {
  if (thisReg.test(ele.value.value)) {
    // setAttribute changes the class name bootstrap changes the style
    ele.value.setAttribute("class", "form-control is-valid");
  } else {
    ele.value.setAttribute("class", "form-control is-invalid");
  }
};

2. How to determine which regular judgment group to pass in? 

We know that the input node has onfocus and defocus onblur events,

The case here is chosen to judge when we lose focus

So we need to encapsulate a function regRun that contains the respective valid functions of each input node we need to verify. The two parameters required by regMethods are also passed in in this step

// Regular effective function
const regRun = () => {
  // Out of focus calling method 1. Username
  usernameIpt.value.onblur = () => {
    regMethods(regName, usernameIpt); // Call the judgment method and pass parameters
  };
  // 2. Password
  passwordIpt.value.onblur = () => {
    regMethods(regPassword, passwordIpt); // Call the judgment method and pass parameters
  };
  // 3. Mailbox
  emailIpt.value.onblur = () => {
    regMethods(regEmail, emailIpt); // Call the judgment method and pass parameters
  };
  // 4. Mobile phone number
  phoneIpt.value.onblur = () => {
    regMethods(regPhone, phoneIpt); // Call the judgment method and pass parameters
  };
};

4. Run this function after all nodes are mounted, and the data response of vue will be re-judged (recall regRun)

Run this function (regRun) in vue's life cycle onMounted to ensure that all DOM elements are rendered.

<script setup> // vue3 combined api
 
// Import dependencies onMounted, ref
import { onMounted, ref } from "vue";

***

onMounted(() => {
  // call regular function
  regRun();
});

</script>

Thanks for browsing!