一、前言
在使用el-form的过程中会遇到密码修改的时候,此时需要对密码强度进行校验,本篇文章主要使用正则来对密码强度进行校验
二、需求
设置密码要求:8~16位,数字、字母和符号,三种选一种为弱模式,选两种为中模式,选三种为强模式
三、具体代码
html部分
<el-form ref="psdform" :model="form" :rules="rules" label-width="120px">
<el-form-item label="新密码:" prop="newPassword">
<el-input
:type="newPsdtype"
v-model="form.newPassword"
placeholder="8-16位密码,区分大小写"
>
<span slot="suffix" class="show_pwd" @click="showPwd">
<svg-icon
:icon-class="newPsdtype == 'password' ? 'eye' : 'eye-open'"
/>
</span>
</el-input>
<div class="intensity">
<span class="psdText">密码强度</span>
<span
class="line"
:class="[level.includes('low') ? 'low' : '']"
></span>
<span
class="line"
:class="[level.includes('middle') ? 'middle' : '']"
></span>
<span
class="line"
:class="[level.includes('high') ? 'high' : '']"
></span>
<div class="warningtext">
密码应由8-16位数字、字母、符号组成。请不要使用容易被猜到的密码
</div>
</div>
</el-form-item>
<el-form-item label="确认密码:" prop="confirmPassword">
<el-input
:type="confirmPsdtype"
v-model="form.confirmPassword"
placeholder="确认密码"
>
<span slot="suffix" class="show_pwd" @click="showconfirmPwd">
<svg-icon
:icon-class="confirmPsdtype == 'password' ? 'eye' : 'eye-open'"
/> </span
></el-input>
</el-form-item>
<el-form>
js部分
data() {
return {
form: {
newPassword: '',
confirmPassword: ''
},
rules: {
newPassword: [
{ required: true, validator: this.checkPassword, trigger: 'change' }
],
confirmPassword: [
{
required: true,
validator: this.checkConfirmPassword,
trigger: 'blur'
}
],
},
level: []
}
},
methods: {
//点击小眼睛
showPwd() {
if (this.newPsdtype === 'password') {
this.newPsdtype = ''
} else {
this.newPsdtype = 'password'
}
},
//点击小眼睛
showconfirmPwd() {
if (this.confirmPsdtype === 'password') {
this.confirmPsdtype = ''
} else {
this.confirmPsdtype = 'password'
}
},
// 校验密码
checkPassword(rule, value, callback) {
this.level = []
if (!value) {
return callback('密码不能为空')
}
if (value.length < 8) {
return callback('密码不少于8位')
}
if (value.length > 16) {
return callback('密码不大于16位')
}
// 校验是数字
const regex1 = /^\d+$/
// 校验字母
const regex2 = /^[A-Za-z]+$/
// 校验符号
const regex3 =
/^[`~!@#$%^&*()_\-+=<>?:"{}|,.\/;'\\[\]·~!@#¥%……&*()——\-+={}|《》?:“”【】、;‘',。、]+$/
if (regex1.test(value)) {
this.level.push('low')
} else if (regex2.test(value)) {
this.level.push('low')
} else if (regex3.test(value)) {
this.level.push('low')
} else if (/^[A-Za-z\d]+$/.test(value)) {
this.level.push('low')
this.level.push('middle')
} else if (
/^[`~!@#$%^&*()_\-+=<>?:"{}|,.\/;'\\[\]·~!@#¥%……&*()——\-+={}|《》?:“”【】、;‘',。、\d]+$/.test(
value
)
) {
this.level.push('low')
this.level.push('middle')
} else if (
/^[`~!@#$%^&*()_\-+=<>?:"{}|,.\/;'\\[\]·~!@#¥%……&*()——\-+={}|《》?:“”【】、;‘',。、A-Za-z]+$/.test(
value
)
) {
this.level.push('low')
this.level.push('middle')
} else if (
/^[`~!@#$%^&*()_\-+=<>?:"{}|,.\/;'\\[\]·~!@#¥%……&*()——\-+={}|《》?:“”【】、;‘',。、A-Za-z\d]+$/.test(
value
)
) {
this.level.push('low')
this.level.push('middle')
this.level.push('high')
}
return callback()
},
// 确认密码
checkConfirmPassword(rule, value, callback) {
if (!value) {
return callback('请输入确认密码')
}
if (value != this.form.newPassword) {
return callback('两次密码输入不一致,请重新输入')
}
},
css部分
.show_pwd {
cursor: pointer;
user-select: none;
padding-right: 5px;
}
.intensity {
.psdText {
font-size: 14px;
margin-right: 10px;
}
.line {
display: inline-block;
width: 48px;
height: 4px;
background: #d8d8d8;
border-radius: 3px;
margin-right: 8px;
&.low {
background: #f4664a;
}
&.middle {
background: #ffb700;
}
&.high {
background: #2cbb79;
}
}
.level {
margin: 0 16px 0 8px;
}
.warningtext {
color: #5a5a5a;
font-size: 12px;
margin-top: 5px;
}
}
四、实现效果
以上代码是使用三种颜色来判断密码强度,具体效果如下
五、尾声
上面图片分别演示了不同情况下的密码强度判断,并未演示长度校验,但功能已经实现,可自行验证