1. Password Validation Rule

---

The password must include upperacse letters, lowercase letters, numbers, and special characters, with a length of 8 to 20 chraacters.

var validatePassword = (rule, value, callback) => {
    let pattern = 
        /^(?=.*[A-Za-z])(?=.*\d)(?=.*[`~!@#$%^&*()_+<>?:"{},.\/\\;'[\]])[A-Za-z\d`~!@#$%^&*()_+<>?:"{},.\/\\;'[\]]{8,20}$/;
    if (!value) {
        callback(new Error('Password cannot be empty'));
    } else if (!pattern.test(value)) {
        callback(new Error('Password must contain uppercase, lowercase, numbers, and special characters, length 8-20'));
    } else {
        callback();
    }
};

2. Confirm Password Validation Rule

---

Both password fields must match exactly.

var validateConfirmPassword = (rule, value, callback) => {
    var pattern = 
      /^(?=.*[A-Za-z])(?=.*\d)(?=.*[`~!@#$%^&*()_+<>?:"{},.\/\\;'[\]])[A-Za-z\d`~!@#$%^&*()_+<>?:"{},.\/\\;'[\]]{8,20}$/;
    if (!value) {
        callback(new Error('Please confirm your password'));
    } else if (value !== this.formData.password) {
        callback(new Error('Passwords do not match'));
    } else if (!pattern.test(value)) {
        callback(new Error('Password must contain uppercase, lowercase, numbers, and special characters, length 8-20'));
    } else {
        callback();
    }
};

3. HTML Form Template

---

<el-form-item prop="password">
    <i class="required">*</i>
    <el-input :show-password="true" type="password" v-model="formData.password" placeholder="Enter password" auto-complete="new-password">
    </el-input>
</el-form-item>
<el-form-item prop="confirmPassword">
    <i class="required">*</i>
    <el-input :show-password="true" type="password" v-model="formData.confirmPassword" placeholder="Confirm password" auto-complete="new-password">
    </el-input>
</el-form-item>

4. Validation Rules Configuration

---

rules: {    
    password: [{
        required: true,
        validator: validatePassword,
    }],
    confirmPassword: [{
        required: true,
        validator: validateConfirmPassword,
    }],
},