注册界面经常会用到的密码强度验证动画
- html标签部分(这里用到了element的ui里的表单组件,方便进行表单的非空,格式验证那些)
<el-form-item key="password" prop="password">
<el-input
id="inputStrength"
type="password"
v-model="ruleForm.password"
autocomplete="off"
placeholder="输入登录密码"
show-password
clearable
></el-input>
<div class="strength">
<span ref="span" v-for="item in 3" :key="item"></span>
</div>
</el-form-item>
<style lang="scss">
.el-input__inner {
width: 528px;
height: 50px;
}
</style>
<style lang="scss" scoped>
.strength {
text-align: left;
width: 528px;
margin: 0 auto;
span {
width: 60px;
height: 5px;
border: 1px solid #ccc;
margin-left: 5px;
display: inline-block;
}
}
</style>
<script>
export default {
name: '',
mounted() {
this.onStrength();
},
methods: {
onStrength() {
let input = this.$el.querySelector("#inputStrength");
let span = this.$refs.span;
input.oninput = function () {
for (let i = 0; i < span.length; i++) {
span[i].style.background = "";
if (i < a(this.value)) {
span[i].style.background = "#005BFF";
}
}
};
const a = (e) => {
let num = 0;
if (e.match(/\d/g)) {
num++;
}
if (e.match(/[a-z]/gi)) {
num++;
}
if (
e.match(
"[`~!@#$^&*()=|{}':;',\\[\\].<>《》./~!@#¥……&*()——|{}【】‘;:”“'。,、? ]"
)
) {
num++;
}
return num;
};
},
}
}
</script>