vue + ElementUI实现密码强度判断

vue + ElementUI实现密码强度判断

代码仅供参考，如有更好的想法请多多指教

代码如下

<el-form :model="form" style="margin-top:10px">
	<el-form-item label="密码" label-width="120px" prop="userPassword">
             <el-input show-password type="password" v-model="form.userPassword" placeholder="8-20位字符在数字、小写、大写字母以及特殊字符" autocomplete="off" onkeyup="value=value.replace(/[\u4e00-\u9fa5/\s+/]/ig,'')">
             </el-input>
             <el-progress :percentage="passwordPercent" :format="passwordPercentFormat" :show-text="true" :text-inside="true" :stroke-width="15" :color="pwdColorF">
             </el-progress>
    </el-form-item>
</el-form>

第二步

data(){
	const validatePassword = (rule, value, callback) => {
            if (value === '') {
                callback(new Error('请输入密码'));
            } else {
                //6-20位包含字符、数字和特殊字符
                var ls = 0;
                if (this.form.userPassword !== '') {
                    if (this.form.userPassword.match(/([a-z])+/)) {
                        ls++;
                    }
                    if (this.form.userPassword.match(/([0-9])+/)) {
                        ls++;
                    }
                    if (this.form.userPassword.match(/([A-Z])+/)) {
                        ls++;
                    }
                    if (this.form.userPassword.match(/([\W])+/) && !this.form.userPassword.match(/(![\u4E00-\u9FA5])+/)) {
                        ls++;
                    }
                    if (this.form.userPassword.length < 6 || this.form.userPassword.length > 20) {
                        callback(new Error('要求6-20位字符'));
                        ls = 0;
                    }
                    if (this.form.userPassword.match(/([\u4E00-\u9FA5])+/)) {
                        callback(new Error('不能包含中文字符'));
                        ls = 0;
                    }
                    switch (ls) {
                        case 0: this.passwordPercent = 0; callback(new Error('数字、小写字母、大写字母以及特殊字符')); break;
                        case 1: this.passwordPercent = 30; callback(new Error('数字、小写字母、大写字母以及特殊字符')); break;
                        case 2: this.passwordPercent = 60; callback(new Error('数字、小写字母   、大写字母以及特殊字符')); break;
                        case 3:
                        case 4: this.passwordPercent = 100; break;
                        default: this.passwordPercent = 0; break;
                    }
                }
                callback();
            }
        };
	return{
	    form: {
               	userAccount: "",
               	userPassword: "",
               	userDesc: "",
               	ozId: "",
               	enabled: "1",
               	roleId: "",
              },
         rules: {
                userPassword: [
                    { required: true, validator: validatePassword, trigger: ['blur', 'change'] },
                    { pattern: /^(?![a-zA-Z]+$)(?![A-Z0-9]+$)(?![A-Z\W_]+$)(?![a-z0-9]+$)(?![a-z\W_]+$)(?![0-9\W_]+$)[a-zA-Z0-9\W_]{8,30}$/, message: '密码为数字，小写字母，大写字母，特殊符号 至少包含三种，长度为 8 - 30位' }
                ]
            },
	     }
}

第三步

methods:{
		passwordPercentFormat(percentage) {
            return percentage == 30 ? '弱' : percentage == 60 ? '中' : percentage == 100 ? '强' : '弱'
        },
        pwdColorF(percentage) {
            return percentage == 30 ? '#FF5340' : percentage == 60 ? '#FFB640' : percentage == 100 ? '#25DC1B' : '#FF5340'
        },
	}