I. Introduction
When using el-form, you will encounter password changes. At this time, you need to verify the password strength. This article mainly uses regular rules to verify the password strength.
2. Demand
Set password requirements: 8 to 16 characters, numbers, letters and symbols. Choose one of the three as weak mode, choose two as medium mode, choose three as strong mode
3. Specific code
html part
<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 part
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 part
.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;
}
}
4. Realize the effect
The above code uses three colors to determine password strength. The specific effect is as follows
5. Ending
The above pictures demonstrate the password strength judgment under different circumstances. They do not demonstrate the length verification, but the function has been implemented and can be verified by yourself.