Vue two fields joint verification to achieve the password modification function
1. IntroductionThis article is the previous article "Vue Element-ui form validation rules, which ones do you know? 》Typical application for multi-field joint verification. When changing a password, you generally need to confirm that the password is consistent twice, involving two attribute fields. Similar situations involving two attribute fields are:
The characteristic is that both attribute values are variable. This paper uses the consistency application of verifying two passwords to provide a typical solution for the joint verification between two fields of variable attribute values. 2. Solution Implementation2.1 Implementation CodeFirst give the form code:
<template>
<div id="contentwrapper">
<h5 class="heading" align=left>User Management/Change Password</h5>
<!-- Separator -->
<el-divider></el-divider>
<el-form ref="form" :model="form" :rules="rules" label-width="100px">
<el-form-item label="Original password:" prop="oldPasswd">
<el-input v-model="form.oldPasswd" :type="password">
<!-- To add an icon to input, you must have the slot="suffix" attribute, otherwise the icon cannot be displayed-->
<i slot="suffix" :class="icon" @click="showPassword"></i>
</el-input>
</el-form-item>
<el-form-item label="New Password:" prop="newPasswd">
<el-input v-model="form.newPasswd" :type="password">
<i slot="suffix" :class="icon" @click="showPassword"></i>
</el-input>
</el-form-item>
<el-form-item label="Confirm Password:" prop="confirmPasswd">
<el-input v-model="form.confirmPasswd" :type="password">
<i slot="suffix" :class="icon" @click="showPassword"></i>
</el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" style="width:160px" size="small" @click="submit()">OK</el-button>
<el-button type="primary" style="width:160px" size="small" @click="cancel()">Cancel</el-button>
</el-form-item>
</el-form>
</div>
</template>
<script>
import {passwordValidator} from '@/common/validator.js'
export default {
data() {
// Compare two passwords to see if they are the same const comparePasswdValidator = (rule, value, callback) => {
// Get the method to get values var getvaluesMethod = rule.getValuesMethod;
//Call the getvaluesMethod method to get the object value var formData = getvaluesMethod();
// One is empty, maybe no value has been entered, no comparison at this time if (formData.newPasswd == '' || formData.confirmPasswd == ''){
return callback();
}
//==================================================================
// Compare two passwords // Both have values, compare if (formData.newPasswd == formData.confirmPasswd){
// The new password is consistent with the confirmed password // First clear the verification warning prompts of the two passwords. Currently, clear the inconsistent prompt of the other password this.$refs['form'].clearValidate(['newPasswd','confirmPasswd']);
callback();
}else{
callback(new Error('The two passwords do not match'));
}
}
return {
form : {
oldPasswd : '',
newPasswd : '',
confirmPasswd: ''
},
//Used to change the Input type password: "password",
//Used to replace the icon in Input icon: "el-input__icon el-icon-view",
// Verification rule configuration rules: {
oldPasswd: [
{required: true, message: "Password cannot be empty", trigger: 'blur'}
],
newPasswd: [
{required: true, message: "New password cannot be empty", trigger: 'blur'},
{min: 6, max: 18, message: "New password 6-18 digits", trigger: 'blur'},
{validator: passwordValidator, trigger: 'blur'},
{validator: comparePasswdValidator, trigger: 'blur', 'getValuesMethod': this.getValuesMethod},
],
confirmPasswd: [
{required: true, message: "Confirm password cannot be empty", trigger: 'blur'},
{min: 6, max: 18, message: "Confirm password 6-18 digits", trigger: 'blur'},
{validator: passwordValidator, trigger: 'blur'},
{validator: comparePasswdValidator, trigger: 'blur', 'getValuesMethod': this.getValuesMethod},
],
},
}
},
methods: {
// Method for getting values, use getValuesMethod() for all validators that require multi-field joint validation {
return this.form;
},
//Hide and display passwordshowPassword(){
//Click the icon to hide or display the password if( this.password=="text"){
this.password="password";
//Change icon this.icon="el-input__icon el-icon-view";
}else {
this.password="text";
this.icon="el-input__icon el-icon-stopwatch";
}
},
//Submit submit(){
let _this = this;
this.$refs['form'].validate(valid => {
// If the verification is passed, it is true; if one fails, it is false
if (valid) {
_this.instance.changePasswd(_this.$baseUrl,_this.form).then(res => {
if (res.data.code == _this.global.SucessRequstCode){
// Prompt that the modification is successful alert("Password reset has been successful!");
// Jump to the home page this.$router.push({
path: '/home',
});
}else{
if (!_this.commonFuncs.isInterceptorCode(res.data.code)){
alert(res.data.message);
}
}
}).catch(error => {
console.log(error);
});
}
})
},
//Cancel cancel(){
// Jump to the home page this.$router.push({
path: '/home',
});
}
}
}
</script>The imported external validator passwordValidator is in the /src/common/validator.js file. The code is as follows:
/* Password verification */
export function passwordValidator(rule, value, callback) {
const reg = /^[_a-zA-Z0-9@.#%&*!\-\$^]+$/;
if(value == '' || value == undefined || value == null){
callback();
} else {
if (!reg.test(value)){
callback(new Error('The password consists of English letters, numbers and the following characters: @.#%&*!_-$^'));
} else {
callback();
}
}
}2.2 Code Description2.2.1. Rule configuration:
// Verification rule configuration rules: {
oldPasswd: [
{required: true, message: "Password cannot be empty", trigger: 'blur'}
],
newPasswd: [
{required: true, message: "New password cannot be empty", trigger: 'blur'},
{min: 6, max: 18, message: "New password 6-18 digits", trigger: 'blur'},
{validator: passwordValidator, trigger: 'blur'},
{validator: comparePasswdValidator, trigger: 'blur', 'getValuesMethod': this.getValuesMethod},
],
confirmPasswd: [
{required: true, message: "Confirm password cannot be empty", trigger: 'blur'},
{min: 6, max: 18, message: "Confirm password 6-18 digits", trigger: 'blur'},
{validator: passwordValidator, trigger: 'blur'},
{validator: comparePasswdValidator, trigger: 'blur', 'getValuesMethod': this.getValuesMethod},
],
},The focus is on the newPasswd and confirmPasswd attributes. The same rule set is configured for both, and the validation rules are:
These rules work together. All rules must pass the check before the attribute check passes, and the detection order is executed in the order of the array. In the validation rules, both newPasswd and confirmPasswd attributes are configured with the same comparePasswdValidator because the attribute values of both fields are variable. comparePasswdValidator is the last rule, which means it needs to satisfy the previous validation rules first. 2.2.2, getValuesMethod method
// Method for getting values, use getValuesMethod() for all validators that require multi-field joint validation {
return this.form;
},The getValuesMethod method returns the form data object in data. This is a very sharp operation, which is equivalent to providing a global data probe. The form data object of data can be accessed in the validator, and due to the v-modal model of the form, the real-time nature of the data is ensured, that is, there is no need to worry about not being able to obtain the latest values of other attributes. The getValuesMethod method provides an alternative idea for data binding. 2.2.3. comparePasswdValidator
// Compare two passwords to see if they are the same const comparePasswdValidator = (rule, value, callback) => {
// Get the method to get values var getvaluesMethod = rule.getValuesMethod;
//Call the getvaluesMethod method to get the object value var formData = getvaluesMethod();
// One is empty, maybe no value has been entered, no comparison at this time if (formData.newPasswd == '' || formData.confirmPasswd == ''){
return callback();
}
//==================================================================
// Compare two passwords // Both have values, compare if (formData.newPasswd == formData.confirmPasswd){
// The new password is consistent with the confirmed password // First clear the verification warning prompts of the two passwords. Currently, clear the inconsistent prompt of the other password this.$refs['form'].clearValidate(['newPasswd','confirmPasswd']);
callback();
}else{
callback(new Error('The two passwords do not match'));
}
}Because the configured custom rule attribute 'getValuesMethod' is a method pointing to this.getValuesMethod, the attribute can be called as a method:
// Get the method to get values var getvaluesMethod = rule.getValuesMethod;
//Call the getvaluesMethod method to get the object value var formData = getvaluesMethod();The result of calling the method attribute returns a data object pointing to this.form, so you can access the attributes of the object at will. Before comparing the two, if one is found to be empty, it is returned. Because after the current attribute is entered, the other end's attribute may not have entered a value yet, so comparison should not be done at this time.
// One is empty, maybe no value has been entered, no comparison at this time if (formData.newPasswd == '' || formData.confirmPasswd == ''){
return callback();
}Two password comparisons:
//==================================================================
// Compare two passwords // Both have values, compare if (formData.newPasswd == formData.confirmPasswd){
// The new password is consistent with the confirmed password // First clear the verification warning prompts of the two passwords. Currently, clear the inconsistent prompt of the other password this.$refs['form'].clearValidate(['newPasswd','confirmPasswd']);
callback();
}else{
callback(new Error('The two passwords do not match'));
}Compare the two passwords. If the two passwords are the same, an alarm will be output. If they are consistent, you need to clear the warning prompt on the other end first, because at this time the other end may prompt "the two passwords are inconsistent". // First clear the verification warning prompts of the two passwords. Currently, clear the inconsistent prompt of the other password this.$refs['form'].clearValidate(['newPasswd','confirmPasswd']); The clearValidate method is an element-form method that clears exception prompts for one or more validation rule attributes. At this time, will "accidental killing" occur? That is, the clearing operation will also clear other abnormal prompts on the other end. Considering that the two passwords are the same and the verification rules of the two are the same, since this verification rule is ranked last, it is executed last in terms of the detection order, that is, when this verifier is executed, other checks have passed. Therefore, this kind of "accidental killing" will not happen. The actual implementation effect is the same. In addition, it should be noted that the following code cannot be used to replace the above clearValidate call statement:
// Perform peer verification if (rule.field == 'newPasswd')
{
// If the current attribute is newPasswd
this.$refs['form'].validateField('confirmPasswd');
}else{
this.$refs['form'].validateField('newPasswd');
}Because verification is being performed at this time, calling the peer verification again will cause the peer to call comparePasswdValidator. The peer verification result shows that the two passwords are consistent, so the peer (the peer of the peer, that is, itself) will be called again for verification, thus forming an infinite loop, causing the call stack to overflow. Therefore, in the validator code, try not to call the validateField method again. 2.3 Verification resultsHere are some renderings: Initial state:
Modify the confirmation password and leave the input focus:
Enter the new password input box, leave the input focus without entering any information:
Modify the confirmation password, delete the last character "8", leave the input focus, and it will return to the initial state. This is the end of this article about a typical example of Vue two-field joint verification - changing the password. For more relevant Vue password modification content, please search 123WORDPRESS.COM's previous articles or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future! You may also be interested in:
|
<<: Implementation of Docker deployment of ElasticSearch and ElasticSearch-Head
>>: MySQL 8.0.16 compressed version download and installation tutorial under Win10 system
Recommend
Analysis of the use and principle of Docker Swarm cluster management
Swarm Cluster Management Introduction Docker Swar...
How to solve the problem of automatic package update in Debian system
I don't know when it started, but every time ...
How to enable the root account in Ubuntu 20.04
After Ubuntu 20.04 is installed, there is no root...
MySQL uses binlog logs to implement data recovery
MySQL binlog is a very important log in MySQL log...
Implementation of code optimization for Vue2.x project performance optimization
Table of contents 1 Use of v-if and v-show 2. Dif...
MySQL 5.7.18 Archive compressed version installation tutorial
This article shares the specific method of instal...
MySQL transaction autocommit automatic commit operation
The default operating mode of MySQL is autocommit...
Share some key interview questions about MySQL index
Preface An index is a data structure that sorts o...
MySQL loop inserts tens of millions of data
1. Create a test table CREATE TABLE `mysql_genara...
Detailed explanation of the implementation principle of Vue2.0/3.0 two-way data binding
The implementation principle of Vue2.0/3.0 two-wa...
MYSQL implements ranking and querying specified user ranking function (parallel ranking function) example code
Preface This article mainly introduces the releva...
How to use Javascript to generate smooth curves
Table of contents Preface Introduction to Bezier ...
Native js to implement 2048 game
2048 mini game, for your reference, the specific ...
How to hide and forge version number in Nginx
1. Use curl command to access by default: # curl ...
Implementation of vite+vue3.0+ts+element-plus to quickly build a project
Table of contents vite function Use Environment B...