vue elment-ui 密码强度提示的两种方式
第一种方法、
代码如下：
html:
<el-form-item>
<div class="input_span">
<span :style="{'background-color':(msgText > 1 || msgText == 1) ? '#FC5F76' : '#BBBBBB', 'color': (msgText > 1 || msgText == 1) ? '#FC5F76' : '#BBBBBB' }">弱</span>
<span :style="{'background-color':(msgText > 2 || msgText == 2) ? '#FF9900' : '#BBBBBB', 'color': (msgText > 2 || msgText == 2) ? '#FF9900' : '#BBBBBB'}">中</span>
<span :style="{'background-color':(msgText > 4 || msgText == 4) ? '#33CC00' : '#BBBBBB', 'color': (msgText > 4 || msgText == 4) ? '#33CC00' : '#BBBBBB'}">强</span>
</div>
</el-form-item>js :
data(){
return {
msgText: "",
}
},
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++; //特殊字符
// console.log("modes:", sValue.length, 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;
}
},
watch: {
'loginForm.password': {
handler(keyWord, oldname) {
// console.log("keyWord:", keyWord)
this.msgText = this.checkStrong(keyWord);
}
}
},
created() {
if (this.loginForm.password){
this.msgText = this.checkStrong(this.loginForm.password);
}
},
css：
.input_span{
height: 8px;
display: flex;
float: right;
width: 35%;
span{
display: inline-block;
width: 30%;
border-radius: 8px;
margin-right: 3px;
text-align: center;
margin-top: 3px;
}
}第二种方法、
这种使用了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>
js代码：
<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>
第三种方法、
判断规则用了这个密码强度判断规则（仿google）_erice的博客-CSDN博客
前面评分规则差不太多，后面评分等级作了修改：
小于10：密码强度不合格，10-25：弱，25-35：中，35以上：强
主要code：
<div class="passwordstrength">
<div class="level1" :style="{'background-color':(score>=10&&score<25)?'#FC5F76':((score>=25&&score<35)?'#FF9900':(score>=35?'#33CC00':'#BBBBBB'))}"></div>
<div class="level2" :style="{'background-color':((score>=25&&score<35)?'#FF9900':(score>=35?'#33CC00':'#BBBBBB'))}"></div>
<div class="level3" :style="{'background-color':score>=35?'#33CC00':'#BBBBBB'}"></div>
</div>
<input type="password" placeholder="请输入您的密码" v-model="newpassword" maxlength="16" @input="passwordcomplex()" />注解：
整体按照前面链接给出的判断规则来的，根据是否存在数字，是否存在大小写字母，是否存在特殊字符来进行打分，有连续的情况扣分，我还单独加了一个规则，如果整个密码都是连续的，分数直接扣为0。
接下来上js代码，函数返回的是最后的得分：
passwordcomplex(){
let passwordscore = 0
let pwdArr = this.newpassword.split('');
console.log(pwdArr);
// pwdLen长度
if(pwdArr.length>4&&pwdArr.length<=7){ //长度在4-7之间，加五分
passwordscore += 5
}else if(pwdArr.length>7){ //长度在7以上，加10分
passwordscore += 10
}
// letter字母
if(pwdArr.some(item => {return /^[a-z]$/.test(item)})){ //是否存在小写字母
if(pwdArr.some(item => {return /^[A-Z]$/.test(item)})){ //是否存在大写字母
passwordscore += 10 //大小写都有，加10，否则加5
}else{
passwordscore += 5
}
}else if(pwdArr.some(item => {return /^[A-Z]$/.test(item)})){
passwordscore += 5
}
//num数字
if(pwdArr.some(item => {return /^[0-9]$/.test(item)})){ //判断是否存在数字
let count = 0
pwdArr.forEach(item => { //判断数字出现的次数
if(/^[0-9]$/.test(item)){
count++
}
})
if(count>=3){ //出现大于等于3次，加10，否则加5
passwordscore += 10;
}else{
passwordscore += 5;
}
}
//special特殊字符
if(pwdArr.some(item => {return /^[\^%&'*.,;=+\-?@#!$\x22]$/.test(item)})){ //判断是否存在特殊字符
let count = 0
pwdArr.forEach(item => { //特殊字符出现次数
if(/^[\^%&'*.,;=+\-?@#!$\x22]$/.test(item)){
count++
}
})
console.log('count',count);
if(count>=2){
passwordscore += 15; //出现两次以上加15，否则加5
}else{
passwordscore += 5;
}
}
//是否连续
let isContinued = false;
let countinuedCount = 0;
for(let i =0;i<pwdArr.length;i++){
if(pwdArr[i+1]){
if((pwdArr[i].charCodeAt(0)+1==pwdArr[i+1].charCodeAt(0))||(pwdArr[i].charCodeAt(0)-1==pwdArr[i+1].charCodeAt(0))){ //如果相邻两个字符连续
isContinued = true; //开始记录连续
countinuedCount++ //记录连续次数
}else{
if(isContinued){
isContinued = false;
passwordscore -= countinuedCount //结束当前连续时，分数扣掉连续次数
countinuedCount = 0
}
}
}
}
console.log(isContinued,countinuedCount);
if(countinuedCount == pwdArr.length-1){
passwordscore = 0 //如果整个密码连续，分数为0
}else{
passwordscore -= countinuedCount
}
if(pwdArr.length<8){ //需求规定的，密码必须大于8位
passwordscore = 0
}
for(let i = 0;i<pwdArr.length;i++){ //如果整个密码由单一字符构成，分数为0
if(i ==pwdArr.length-1){
passwordscore = 0
}else if(pwdArr[i]!=pwdArr[i+1]){
break
}
}
console.log(passwordscore);
this.score = passwordscore
}最后为了方便大家的沟通与交流请加QQ群： 625787746
请进QQ群交流：【IT博客技术分享群①】：正在跳转
扫一扫
1585
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
