vue密码强度提示的两种方式
第一种
附上代码
<el-form ref="passform" :model="passform" :rules="passrules" label-width="80px">
<el-form-item label="原密码" prop="password">
<el-input v-model="passform.password" type="password" placeholder="请输入原密码"/>
</el-form-item>
<el-form-item label="新密码" prop="newpassword">
<el-input v-model="passform.newpassword" id="inputValue" type="password" placeholder="请输入原密码"/>
</el-form-item>
<el-form-item label="密码强度">
<div class="input_span">
<span id="one"></span>
<span id="two"></span>
<span id="three"></span>
</div>
<div id="font">
<span>弱</span>
<span>中</span>
<span>强</span>
</div>
</el-form-item>
<el-form-item label="确认新密码" prop="checkpassword" label-width="120px">
<el-input v-model="passform.checkpassword" type="password" placeholder="请输入原密码"/>
</el-form-item>
</el-form>
<script>
export default {
data() {
const validatePassword = (rule, value, callback) => {
if (value !== this.passform.newpassword) {
callback(new Error('请确认新密码'))
} else {
callback()
}
}
return {
msgText: "",
passform: {
password: '',
newpassword: "",
checkpassword: ''
},
passrules: {
password: [
{required: true, message: '请输入原密码', trigger: 'blur'}
],
newpassword: [
{required: true, message: '请输入新密码', trigger: 'blur'},
{min: 4, max: 20, trigger: 'blur', message: '密码长度为4到20位'}
],
checkpassword: [
{required: true, message: '请输入新密码', trigger: 'blur'},
{validator: validatePassword}
]
}
}
},
watch: {
'passform.newpassword': {
handler(newname, oldname) {
this.msgText = this.checkStrong(newname);
if (this.msgText > 1 || this.msgText == 1) {
document.getElementById("one").style.background = "red";
} else {
document.getElementById("one").style.background = "#eee";
}
if (this.msgText > 2 || this.msgText == 2) {
document.getElementById("two").style.background = "orange";
} else {
document.getElementById("two").style.background = "#eee";
}
if (this.msgText == 4) {
document.getElementById("three").style.background = "#00D1B2";
} else {
document.getElementById("three").style.background = "#eee";
}
}
}
},
methods: {
checkStrong(sValue) {
var modes = 0;
//正则表达式验证符合要求的
if (sValue.length < 1) return modes;
if (/\d/.test(sValue)) modes++; //数字
if (/[a-z]/.test(sValue)) modes++; //小写
if (/[A-Z]/.test(sValue)) modes++; //大写
if (/\W/.test(sValue)) modes++; //特殊字符
//逻辑处理
switch (modes) {
case 1:
return 1;
break;
case 2:
return 2;
break;
case 3:
case 4:
return sValue.length < 4 ? 3 : 4;
break;
}
return modes;
},
}
}
</script>
第二种
这种使用了g2plot，所以使用时需要先安装
安装方式：npm install @antv/g2plot
附上代码
<el-form ref="form" :model="form" :rules="rules" label-width="120px">
<el-form-item label="原密码" prop="password">
<el-input v-model="form.password" type="password" placeholder="请输入原密码" />
</el-form-item>
<el-form-item label="新密码" prop="newpassword">
<el-input v-model="form.newpassword" type="password" placeholder="请输入原密码"
@input="newpasswordchange" />
</el-form-item>
<el-form-item label="强度">
<div id="container" style="height: 200px; width: 200px;"></div>
</el-form-item>
<el-form-item label="确认新密码" prop="checkpassword">
<el-input v-model="form.checkpassword" type="password" placeholder="请输入原密码" />
</el-form-item>
</el-form>
<script>
import { Gauge } from '@antv/g2plot';
export default {
data() {
const validatePassword = (rule, value, callback) => {
if (value !== this.form.newpassword) {
callback(new Error('请确认新密码'))
} else {
callback()
}
}
return {
num: 0,
gauge:null,
form: {
password: '',
newpassword: "",
checkpassword: ''
},
rules: {
password: [{
required: true,
message: '请输入原密码',
trigger: 'blur'
}],
newpassword: [{
required: true,
message: '请输入新密码',
trigger: 'blur'
},
{
min: 3,
max: 18,
trigger: 'blur',
message: '密码长度为3到18位'
}
],
checkpassword: [{
required: true,
message: '请输入新密码',
trigger: 'blur'
},
{
validator: validatePassword
}
]
}
}
},
mounted() {
const ticks = [0, 1 / 3, 2 / 3, 1];
const color = ['#F4664A', '#FAAD14', '#30BF78'];
this.gauge = new Gauge('container', {
percent: this.num,
innerRadius: 0.75,
type: 'meter',
// 自定义 meter 总步数 以及 step 占比
meter: {
steps: 100,
stepRatio: 1,
},
range: {
ticks: [0, 1],
color: ['l(0) 0:#F4664A 0.5:#FAAD14 1:#30BF78'],
},
indicator: {
pointer: {
style: {
stroke: '#D0D0D0',
},
},
pin: {
style: {
stroke: '#D0D0D0',
},
},
},
statistic: {
title: {
formatter: ({ percent }) => {
if (percent < ticks[1]) {
return '弱';
}
if (percent < ticks[2]) {
return '中';
}
return '优';
},
style: ({ percent }) => {
return {
fontSize: '20px',
lineHeight: 1,
color: percent < ticks[1] ? color[0] : percent < ticks[2] ? color[1] : color[2],
};
},
},
content: {
offsetY: 36,
style: {
fontSize: '24px',
color: '#4B535E',
},
formatter: () => '密码强度',
},
},
});
this.gauge.render();
},
methods: {
checkStrong(value) {
let q = 0;
let flag = false;
let lowerNum = 0;
for (let i in value) {
var asc = value.charCodeAt(i);
if ((asc >= 97 && asc <= 122)) {
if (!flag) {
q = q + 1;
flag = true;
}
lowerNum = lowerNum + 1;
}
}
flag = false;
let upperNum = 0;
for (let i in value) {
var asc = value.charCodeAt(i);
if ((asc >= 65 && asc <= 90)) {
if (!flag) {
q = q + 1;
flag = true;
}
upperNum = upperNum + 1;
}
}
flag = false;
let numberNum = 0;
for (let i in value) {
var asc = value.charCodeAt(i);
if ((asc >= 48 && asc <= 57)) {
if (!flag) {
q = q + 1;
flag = true;
}
numberNum = numberNum + 1;
}
}
flag = false;
let otherNum = 0;
for (let i in value) {
var asc = value.charCodeAt(i);
if (!(asc >= 48 && asc <= 57 || asc >= 65 && asc <= 90 || asc >= 97 && asc <= 122)) {
if (!flag) {
q = q + 1;
flag = true;
}
otherNum = otherNum + 1;
}
}
let rate = 0;
let num = 0;
switch (q) {
case 1:
num = 0;rate=33/20;
break;
case 2:
num =33;rate=50/20;
break;
case 3:
num =50;rate=66/20;
break;
case 4:
num = 66;rate=100/20;
break;
}
num = (num + ((lowerNum + upperNum + numberNum + otherNum) *rate )) / 100;
switch (q) {
case 1:
num > 0.33 ? num = 0.33 : num = num;
break;
case 2:
num > 0.50 ? num = 0.50 : num < 0.34 ? num = 0.34 : num = num;
break;
case 3:
num > 0.66 ? num = 0.66 : num < 0.51 ? num = 0.51 : num = num;
break;
case 4:
num > 1 ? num = 1 : num < 0.67 ? num = 0.67 : num = num;
break;
}
return num
},
newpasswordchange(e) {
this.num = this.checkStrong(e)
this.gauge.changeData(this.num);
},
}
}
</script>