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

最新推荐文章于 2025-08-01 20:34:38 发布

原创最新推荐文章于 2025-08-01 20:34:38 发布 · 452 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#ui #vue.js #javascript

定义密码验证规则：这些规则将用于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-limit
                           maxlength="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-limit
                           maxlength="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>