修改密码加入低中高强度校验 (630ea071) · Commits · 首开风险隐患双控平台 / BCDH-APP · GitLab

src/views/my/resetPas.vue

+191 −103

Original line number	Original line	Diff line number	Diff line
	@@ -25,6 +25,7 @@
	type="password"		type="password"
	name="newPassword"		name="newPassword"
	label="新密码"		label="新密码"
			@input="checkPassword()"
	placeholder="请输入新密码"		placeholder="请输入新密码"
	:rules="[		:rules="[
	{ required: true, message: '请填写密码' },		{ required: true, message: '请填写密码' },
	@@ -36,6 +37,20 @@
	},		},
	]"		]"
	/>		/>
			<!-- 密码等级提示 -->
			<van-cell-group>
			<div class="intensity">
			<div style="width: 8.2em; margin-right: 0.32rem;"></div>
			<div>
			<div class="pass-level">
			<span class="psdText">密码强度</span>
			<span class="line" :class="[level.includes('low') ? 'low' : '']"></span>
			<span class="line" :class="[level.includes('middle') ? 'middle' : '']" ></span>
			<span class="line" :class="[level.includes('high') ? 'high' : '']" ></span>
			</div>
			</div>
			</div>
			</van-cell-group>
	<van-field		<van-field
	required		required
	v-model="form.confirm"		v-model="form.confirm"
	@@ -79,6 +94,7 @@ export default {
	newPassword: "",		newPassword: "",
	confirm: "",		confirm: "",
	},		},
			level : []
	};		};
	},		},
	mounted() {		mounted() {
	@@ -95,14 +111,13 @@ export default {
	loadingType: "spinner",		loadingType: "spinner",
	duration: 0,		duration: 0,
	});		});
	postFun("/mobile/resetPwd", this.obj2formdata(val))		postFun("/mobile/resetPwd", this.obj2formdata(val)).then((data) => {
	.then((data) => {
	if (data.code == 0) {		if (data.code == 0) {
	this.$toast.clear();		this.$toast.clear();
	this.$toast.success('密码修改成功!');		this.$toast.success("密码修改成功!");
	this.$router.back()		this.$router.back();
	}		}
	})		});
	},		},
	obj2formdata(data) {		obj2formdata(data) {
	console.log(data, "fasfasdfsd");		console.log(data, "fasfasdfsd");
	@@ -114,9 +129,82 @@ export default {
	}		}
	return fd;		return fd;
	},		},

			// 密码等级校验
			checkPassword() {
			this.level = [];
			// 校验是数字
			const regex1 = /^\d+$/;
			// 校验字母
			const regex2 = /^[A-Za-z]+$/;
			// 校验符号
			const regex3 =
			/^[`~!@#$%^&()_\-+=<>?:"{}\|,.\/;'\\[\]·~！@#￥%……&（）——\-+={}\|《》？：“”【】、；‘'，。、]+$/;

			if (regex1.test(this.form.newPassword)) {
			this.level.push("low");
			} else if (regex2.test(this.form.newPassword)) {
			this.level.push("low");
			} else if (regex3.test(this.form.newPassword)) {
			this.level.push("low");
			} else if (/^[A-Za-z\d]+$/.test(this.form.newPassword)) {
			this.level.push("low");
			this.level.push("middle");
			} else if (
			/^[`~!@#$%^&()_\-+=<>?:"{}\|,.\/;'\\[\]·~！@#￥%……&（）——\-+={}\|《》？：“”【】、；‘'，。、\d]+$/.test(
			this.form.newPassword
			)
			) {
			this.level.push("low");
			this.level.push("middle");
			} else if (
			/^[`~!@#$%^&()_\-+=<>?:"{}\|,.\/;'\\[\]·~！@#￥%……&（）——\-+={}\|《》？：“”【】、；‘'，。、A-Za-z]+$/.test(
			this.form.newPassword
			)
			) {
			this.level.push("low");
			this.level.push("middle");
			} else if (
			/^[`~!@#$%^&()_\-+=<>?:"{}\|,.\/;'\\[\]·~！@#￥%……&（）——\-+={}\|《》？：“”【】、；‘'，。、A-Za-z\d]+$/.test(
			this.form.newPassword
			)
			) {
			this.level.push("low");
			this.level.push("middle");
			this.level.push("high");
			}
			},
	},		},
	};		};
	</script>		</script>

	<style>		<style lang="less" scoped>
			.intensity {
			display: flex;
			padding: 0.26667rem 0.42667rem;
			line-height: 0.64rem;
			.psdText {
			font-size: 14px;
			margin-right: 10px;
			}

			.line {
			display: inline-block;
			width: 48px;
			height: 4px;
			background: #d8d8d8;
			border-radius: 3px;
			margin-right: 8px;
			}
			.low {
			background: #f4664a;
			}
			.middle {
			background: #ffb700;
			}
			.high {
			background: #2cbb79;
			}
			}

	</style>		</style>
			No newline at end of file