标签：style vue return trigger 强度 asc 密码 num blur
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>
标签：style,vue,return,trigger,强度,asc,密码,num,blur 来源： https://blog.csdn.net/wangyuiba1314/article/details/116840730
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。