代码如下:
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;
### 最后
编程基础的初级开发者,计算机科学专业的学生,以及平时没怎么利用过数据结构与算法的开发人员希望复习这些概念为下次技术面试做准备。或者想学习一些计算机科学的基本概念,以优化代码,提高编程技能。这份笔记都是可以作为参考的。
**[开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/topics/618166371)**
![名不虚传!字节技术官甩出的"保姆级"数据结构与算法笔记太香了](https://img-blog.csdnimg.cn/img_convert/a3e940acdcd55765852a8bfe54482664.png)