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!