elementui表单密码强度自定义验证

密码强度如上图片
涉及到的相关正则表达式：

export const PASSOWRD_REG_WEEK = /^[0-9]{6,8}$|^[A-Z]{6,8}$|^[a-z]{6,8}$|^[\W_!@#$%^&*`~()-+=]{6,8}$/;
// eslint-disable-next-line no-control-regex
export const PASSOWRD_REG_MIDDLE = /^(?!\d+$)(?![a-zA-Z]+$)[\da-zA-Z]{8,10}$|^(?!\d+$)(?![\x00-\xff]+$)[\d\x00-\xff]{8,10}$|^(?!a-zA-Z+$)(?![\x00-\xff]+$)[a-zA-Z\x00-\xff]{8,10}$/;
export const PASSOWRD_REG_POWER = /^(?=.*[a-zA-Z])(?=.*[\W_!@#$%^&*`~()-+=])(?=.*\d)[^]{10,16}$|^(?=.*[a-zA-Z])(?=.*[\W_!@#$%^&*`~()-+=])[^]{10,16}$|^(?=.*\d)(?=.*[\W_!@#$%^&*`~()-+=])[^]{10,16}$|^(?=.*[a-zA-Z])(?=.*\d)[^]{10,16}$/;

vue 页面相关js部分

data() {
const validatePassword = (rule, value, callback) => {if (this.activeName === 'first') {if (value.length < 6 || value.length > 16) {this.$refs.tip.style.display = 'none'callback(new Error('密码位数为6位 ~ 16位'));} else if (value === '') {callback(new Error('请输入新密码'));} else if (validate.PASSOWRD_REG_WEEK.test(value)) {this.$refs.level.innerText = '弱'this.$refs.tip.style.display = 'block'callback();} else if (validate.PASSOWRD_REG_MIDDLE.test(value)) {this.$refs.level.innerText = '中'this.$refs.tip.style.display = 'block'callback();} else if (validate.PASSOWRD_REG_POWER.test(value)) {this.$refs.level.innerText = '强'this.$refs.tip.style.display = 'block'callback();}} else {if (value.length < 6 || value.length > 16) {this.$refs.tip2.style.display = 'none'callback(new Error('密码位数为6位 ~ 16位'));} else if (value === '') {callback(new Error('请输入新密码'));} else if (validate.PASSOWRD_REG_WEEK.test(value)) {this.$refs.level2.innerText = '弱'this.$refs.tip2.style.display = 'block'callback();} else if (validate.PASSOWRD_REG_MIDDLE.test(value)) {this.$refs.level2.innerText = '中'this.$refs.tip2.style.display = 'block'callback();} else if (validate.PASSOWRD_REG_POWER.test(value)) {this.$refs.level2.innerText = '强'this.$refs.tip2.style.display = 'block'callback();}}}return {loginRules: {userPassword: [{ required: true, message: '请输入新密码', trigger: 'blur' },{ validator: validatePassword }],},}
}

html部分

<el-form-item prop="userPassword"><span class="svg-container"><svg-icon icon-class="password" />span><el-input:key="passwordType"ref="userPassword"v-model="resetForm.userPassword":type="passwordType"placeholder="请输入新密码"name="userPassword"tabindex="2"auto-complete="on"@blur="clearLevel"/><span class="el-form-item__error" ref="tip2" style="display:none;color:#666;">密码安全等级：<span ref="level2">span>span>
el-form-item>

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！