JS判断密码强度直接上代码截图
vue：
vue
JS：
JS
style：
style
最终效果图：
需要的小伙伴可以试一下，为了方便大家，再粘贴一下代码
<template>
<!-- 判断密码强度 -->
<div>
<a-input-password v-model="passord" @input="checkPasswordLevel(passord)" placeholder="input password" />
<div>{{ passwordLevelName}}</div>
<a-progress :percent="state.percent" :showInfo="false" :strokeColor="passwordLevelColor "/>
</div>
</template>
<script>
const levelNames = {
0: '弱',
1: '低',
2: '中',
3: '强'
};
const levelColor = {
0: '#ff0000',
1: '#ff0000',
2: '#ff7e05',
3: '#52c41a',
};
export default {
computed: {
passwordLevelName() {
return levelNames[this.state.passwordLevel]
},
passwordLevelColor() {
return levelColor[this.state.passwordLevel]
}
},
data(){
return{
passord:'123456',
state: {
passwordLevel: 0,
percent: 10,
progressColor: '#FF0000'
},
}
},
created(){
},
methods:{
checkPasswordLevel(value) {//验证密码强度
let level = 0;
// 判断这个字符串中有没有数字
if (/[0-9]/.test(value)) {
level++
}
// 判断字符串中有没有字母
if (/[a-zA-Z]/.test(value)) {
level++
}
// 判断字符串中有没有特殊符号
if (/[^0-9a-zA-Z_]/.test(value)) {
level++
}
this.state.passwordLevel = level;
this.state.percent = level * 30;
},
}
}
</script>
<style scoped lang="less">
/deep/.ant-progress-outer{
width:111px !important;
}
/deep/.ant-progress-inner{
border-radius: 0px;
div{
border-radius: 0px !important;
}
}
</style>
网友评论