vue.js+ElementUI实现进度条提⽰密码强度效果
要求⼀：判断输⼊的字符串是否包含数字、⼩写字母、⼤写字母以及特殊字符四种内容的8-20位字符
通过搜索了解到可以使⽤?=这个正则语法判断字符串中是否含有多种内容。(?=)这个语法结构在正则⾥表⽰“设定后⾯是”的意思，举下⾯⼏个例⼦进⼀步了解?=这个语法：(?=.*[a-zA-Z])  这句的意思就是后⾯必须有⼀位⼤写或⼩写字母
(?=.*[1-9]) 这句的意思是后⾯必须有⼀位数字
(?=.*[\W]) 这句的意思是后⾯必须有⼀个⾮字母数字及下划线的特殊符号
(?!.*[\u4E00-\u9FA5]) 这句的意思是后⾯不能有汉字
. 表⽰匹配除“\n”之外的任何单个字符。若要匹配包括“\n”在内的任意字符，请使⽤诸如“[\s\S]”之类的模式。
* 表⽰零次或多次匹配前⾯的字符或⼦表达式。例如，to* 匹配“t”和“too”。* 等效于 {0,}。
得出正则表达式：(?=.*[a-z])(?=.*[A-Z])(?=.*[1-9])(?=.*[\W])(?!.*[\u4E00-\u9FA5]).{8,20}
使⽤if (value.match(/(?=.*[a-z])(?=.*[A-Z])(?=.*[1-9])(?=.*[\W])(?!.*[\u4E00-\u9FA5]).{8,20}/)==null) 判断即可
要求⼆：判断输⼊的字符串是否包含数字、⼩写字母、⼤写字母以及特殊字符四种中⾄少三种的8-20位字符
本次使⽤vue.js+ElementUI实现判断密码强度并⽤进度条样式进⾏提⽰强度是否符合
先编写界⾯代码：
<div>
<el-form :model="registerFormData" ref="registerForm" :rules="rules">
<el-form-item label="密码" :label-width="formLabelWidth" prop="password">
<el-input show-password type="password" v-model="registerFormData.password" autocomplete="off" placeholder="8-20位字符在数字、⼩写、⼤写字母以及特殊字符中四选三"></el-input>
<el-progress :percentage="passwordPercent" :format="passwordPercentFormat"></el-progress>
</el-form-item>
<el-form-item label="再次输⼊密码" :label-width="formLabelWidth" prop="comfirmPassword">
<el-input v-model="registerFormDatafirmPassword" autocomplete="off"></el-input>
</el-form-item>
</el-form>
</div>
然后在vue的data中定义需要⽤到的变量，编写并绑定密码和再次输⼊密码框的验证规则函数
data(){
const validatePassword = (rule, value, callback) => {
if (value === '') {
callback(new Error('请输⼊密码'));vue element admin
} else {
//6-20位包含字符、数字和特殊字符
var ls = 0;
if (isterFormData.password !== '') {
isterFormData.password.match(/([a-z])+/)){
ls++;
}
isterFormData.password.match(/([0-9])+/)){
ls++;
}
isterFormData.password.match(/([A-Z])+/)){
ls++;
}
isterFormData.password.match(/([\W])+/) && !isterFormData.password.match(/(![\u4E00-\u9FA5])+/)){  ls++;
}
isterFormData.password.length<6 || isterFormData.password.length>20 ){
callback(new Error('要求6-20位字符'));
ls=0;
}
isterFormData.password.match(/([\u4E00-\u9FA5])+/)){
callback(new Error('不能包含中⽂字符'));
ls=0;
}
switch (ls) {
case 0: this.passwordPercent = 0;callback(new Error('数字、⼩写字母、⼤写字母以及特殊字符中四选三'));break;
case 1: this.passwordPercent = 33;callback(new Error('数字、⼩写字母、⼤写字母以及特殊字符中四选三'));break;
case 2: this.passwordPercent = 66;callback(new Error('数字、⼩写字母、⼤写字母以及特殊字符中四选三'));break;
case 3:
case 4: this.passwordPercent = 100;break;
default: this.passwordPercent = 0;break;
}
}
callback();
}
};
const validateConfirmPassword = (rule, value, callback) => {
if (value === '') {
callback(new Error('请输⼊密码'));
} else {
if (isterFormDatafirmPassword !== isterFormData.password) {
callback(new Error('两次输⼊的密码不⼀致'));
// this.$refs.ruleForm.validateField('checkPass');
}
callback();
}
};
return{
passwordPercent:0,
//表单变量
registerFormData: {
password:'',
comfirmPassword: '',
},
formLabelWidth: '120px'
},
rules: {
password:[
{required: true, validator: validatePassword, trigger: ['blur', 'change'] },
],
comfirmPassword:[
{required: true, validator: validateConfirmPassword, trigger: ['blur', 'change'] }
],
},
}
接着编写，ElementUI中的进度条判断函数，即<el-progress :percentage="passwordPercent" :format="passwordPercentFormat">这句界⾯代码中format绑定的函数
passwordPercentFormat(percentage){
return percentage === 100 ? '符合' : `不符`;
}
最后可以通过css调整⼀下输⼊框的长度
<style scoped>
.el-form-item{
width: 500px;
}
</style>
这样就可以实现使⽤进度条提⽰密码强度的效果
附上：
判断字符串是否符合⼿机号码规范/^1[34578]\d{9}$/
ps：下⾯给⼤家分享vue + elementUi 实现密码校验
<el-form-item v-else label="密码" label-width='150px' prop="password">
<el-input :placeholder="info.password" v-model="info.password" ></el-input>
</el-form-item>
<el-form-item v-else label="确认密码" label-width='150px' prop="repassword">
<el-input :placeholder="password" v-model="password" ></el-input>
</el-form-item>
data() {
var validatePass2 = (rule, value, callback) => {
if (value === '') {
callback(new Error('请再次输⼊密码'))
} else if (value !== this.info.password) {
callback(new Error('两次输⼊密码不⼀致!'))
} else {
callback()
}
}
return {
info: {
},
rules: {
password: [
{ required: true, message: '请输⼊密码', trigger: 'blur' },
{ 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位，密码不能包含⽤户名，公司名称(lidian), 公司域    ],
repassword: [
{ required: true, validator: validatePass2, trigger: 'blur' }
]
}
}
},
总结
以上所述是⼩编给⼤家介绍的vue.js+ElementUI实现进度条提⽰密码强度效果，希望对⼤家有所帮助，如果⼤家有任何疑问请给我留⾔，⼩编会及时回复⼤家的。在此也⾮常感谢⼤家对⽹站的⽀持！
如果你觉得本⽂对你有帮助，欢迎转载，烦请注明出处，谢谢！

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。