element-ui弱密码检测和再次输入检测

定义密码验证规则： 这些规则将用于el-form的rules属性

addRules: {userPwd: [{required: true, message: '不能为空', trigger: 'blur'},{message: '格式：包含英文、数字以及@$_特殊字符，长度8-16',pattern: /^(?![0-9@$_!#%^&*?]+$)(?![a-zA-Z@$_!#%^&*?]+$)[0-9A-Za-z@$_!#%^&*?]{8,16}$/},{ validator: (rule, value, callback) => {const minLength = 8; // 最小长度const hasUpperCase = /[A-Z]/.test(value); // 是否包含大写字母const hasLowerCase = /[a-z]/.test(value); // 是否包含小写字母const hasNumber = /[0-9]/.test(value); // 是否包含数字const hasSpecialChar = /[!@#$%^&*(),.?":{}|<>]/.test(value); // 是否包含特殊字符// 评估密码强度let strength = 0;if (value.length >= minLength) strength++;if (hasUpperCase) strength++;if (hasLowerCase) strength++;if (hasNumber) strength++;if (hasSpecialChar) strength++;// 根据强度返回结果if (strength >= 4) {callback();} else if (strength >= 2) {callback(new Error("密码较弱,请使用字母大小写、数字和特殊字符的组合"));} else {callback(new Error("密码较弱,请使用字母大小写、数字和特殊字符的组合"));}if (value === '') {callback(new Error('请再次输入密码'));} else if (value !== this.data.addForm.userPwd) {callback(new Error('两次输入密码不一致!'));} else {callback();}}, trigger: 'blur', required: true }],  userPwdv: [{required: true, message: '不能为空', trigger: 'blur'},{message: '格式：包含英文、数字以及@$_特殊字符，长度8-16',pattern: /^(?![0-9@$_!#%^&*?]+$)(?![a-zA-Z@$_!#%^&*?]+$)[0-9A-Za-z@$_!#%^&*?]{8,16}$/},{ validator: (rule, value, callback) => {if (value === '') {callback(new Error('请再次输入密码'));} else if (value !== this.data.addForm.userPwd) {callback(new Error('两次输入密码不一致!'));} else {callback();}}, trigger: 'blur', required: true }],
}

<el-form :model="form" :rules="addRules" ref="form"><el-form-item label="密码" prop="password"><el-row :gutter="30"><el-col :span="20"><el-form-item label="密码" prop="userPwd"><el-input v-model="form.userPwd" type="password" show-word-limitmaxlength="15"clearable show-password></el-input></el-form-item></el-col></el-row><el-row :gutter="30" style="padding-top: 2%;"><el-col :span="20"><el-form-item label="确认密码" prop="userPwdv"><el-input v-model="form.userPwdv" type="password" show-word-limitmaxlength="15"clearable show-password></el-input></el-form-item></el-col></el-row></el-form-item><!-- ... 其他表单项 --><el-form-item><el-button type="primary" @click="submitForm('form')">提交</el-button></el-form-item>
</el-form>