注册密码格式校验

src/lang/en.ts

@@ -15,6 +15,8 @@ export default {
 		forgotPassword: 'Forget password?',
 		pleaseInputName: 'Please input the name',
 		nameLengthError: 'Name length must be between {min} and {max} characters',
+		passwordSpecial:'Must contain special characters',
+		passwordCase:'Mix of uppercase, lowercase and numbers',
 		pleaseInputEmail: 'Please input the email',
 		emailFormatError: 'Please input the email again',
 		pleaseInputPassword: 'Please input the password',

src/lang/zh-cn.ts

@@ -16,6 +16,8 @@ export default {
 		forgotPassword: '忘记密码？',
 		pleaseInputName: '请输入姓名',
 		nameLengthError: '姓名长度必须在 {min} 到 {max} 个字符之间',
+		passwordSpecial:'必须包含特殊符号',
+		passwordCase:'大小写字母与数字混合组合',
 		pleaseInputEmail: '请输入邮箱',
 		emailFormatError: '请输入正确的邮箱',
 		pleaseInputPassword: '请输入密码',

src/views/login/css/style.css

@@ -126,8 +126,23 @@
 .retrieve-password > .right > .box:deep(.el-form) .el-form-item,
 .register > .right > .box:deep(.el-form) .el-form-item,
 .login > .right > .box:deep(.el-form) .el-form-item {
+  position: relative;
   margin-bottom: 2rem;
 }
+.retrieve-password > .right > .box:deep(.el-form) .el-form-item__content,
+.register > .right > .box:deep(.el-form) .el-form-item__content,
+.login > .right > .box:deep(.el-form) .el-form-item__content {
+  position: relative;
+}
+.retrieve-password > .right > .box:deep(.el-form) .password-tip,
+.register > .right > .box:deep(.el-form) .password-tip,
+.login > .right > .box:deep(.el-form) .password-tip {
+  position: absolute;
+  z-index: 10;
+  top: -1rem;
+  right: 0;
+  transform: translateY(-100%);
+}
 .retrieve-password > .right > .box:deep(.el-form) .el-form-item__label,
 .register > .right > .box:deep(.el-form) .el-form-item__label,
 .login > .right > .box:deep(.el-form) .el-form-item__label {

src/views/login/less/style.less

@@ -107,9 +107,22 @@
 				font-family: Regular;
 
 				.el-form-item {
+					position: relative;
 					margin-bottom: 2rem;
 				}
 
+				.el-form-item__content {
+					position: relative;
+				}
+
+				.password-tip {
+					position: absolute;
+					z-index: 10;
+					top: -1rem;
+					right: 0;
+					transform: translateY(-100%);
+				}
+
 				.el-form-item__label {
 					color: #252727;
 					font-size: 1.8rem;

src/views/login/login.vue

@@ -71,11 +71,20 @@
 	import OtherLogin from './other-login.vue'
 	import VisibleCode from './visible-code.vue'
 	import { useUserInfoStore } from '@/stores'
+	import { useI18n } from 'vue-i18n'
+	const { t } = useI18n()
 	const userInfoStore = useUserInfoStore()
 	const router = useRouter()
 	const ruleForm = reactive({
-		email: [{ validator: validateEmail, trigger: 'blur' }],
+		email: [{ validator: validateEmail, trigger: 'change' }],
-		password: [{ validator: validatePass, trigger: 'blur' }],
+		password: [
+			{
+				min: 6,
+				max: 12,
+				message: t('Login.passwordLengthError', { min: 6, max: 12 }),
+				trigger: 'change'
+			}
+		],
 		privacy: [{ validator: validatePrivacy, trigger: 'change' }]
 	})
 	const isVisible = ref(false)

src/views/login/password-tip.vue

@@ -0,0 +1,60 @@
+<template>
+	<div class="password-tip">
+		<div>
+			<el-icon>
+				<CloseBold v-if="validateLength(value)" />
+				<Select v-else />
+			</el-icon>
+			<span>{{ $t('Login.passwordLengthError', { min: 6, max: 20 }) }}</span>
+		</div>
+		<div>
+			<el-icon>
+				<CloseBold v-if="validateSpecial(value)" />
+				<Select v-else />
+			</el-icon>
+			<span>{{ $t('Login.passwordSpecial') }}</span>
+		</div>
+		<div>
+			<el-icon>
+				<CloseBold v-if="validateCase(value)" />
+				<Select v-else />
+			</el-icon>
+			<span>{{ $t('Login.passwordCase') }}</span>
+		</div>
+	</div>
+</template>
+
+<script setup lang="ts">
+	import { computed, reactive, ref } from 'vue'
+	import { Select, CloseBold } from '@element-plus/icons-vue'
+	import { validateLength, validateSpecial, validateCase } from './tools'
+	const props = defineProps({
+		value: {
+			type: String,
+			default: ''
+		}
+	})
+</script>
+
+<style lang="less" scoped>
+	.password-tip {
+		background: #404040;
+		color: #fff;
+		font-size: 1.4rem;
+		padding: 2rem;
+		border-radius: 2rem;
+		line-height: normal;
+
+		> div {
+			display: flex;
+			align-items: center;
+			margin-bottom: 0.5rem;
+			&:last-child {
+				margin-bottom: 0;
+			}
+			> .el-icon {
+				margin-right: 1rem;
+			}
+		}
+	}
+</style>

src/views/login/register.vue

@@ -24,12 +24,15 @@
 							/>
 						</el-form-item>
 						<el-form-item :label="$t('Login.password')" prop="password">
+							<password-tip :value="formData.password" v-show="showPasswordTip" />
 							<el-input
 								name="password"
 								v-model="formData.password"
 								:placeholder="$t('Login.enterPassword')"
 								type="password"
 								show-password
+								@blur="showPasswordTip = false"
+								@focus="showPasswordTip = true"
 							/>
 						</el-form-item>
 						<el-form-item :label="$t('Login.email')" prop="email">
@@ -73,16 +76,18 @@
 	import { validateName, validateEmail, validatePass, validatePrivacy } from './tools'
 	import OtherLogin from './other-login.vue'
 	import VisibleCode from './visible-code.vue'
+	import PasswordTip from './password-tip.vue'
 	import { useUserInfoStore } from '@/stores'
 	const userInfoStore = useUserInfoStore()
 	const router = useRouter()
 	const ruleForm = reactive({
-		name: [{ validator: validateName, trigger: 'blur' }],
+		name: [{ validator: validateName, trigger: 'change' }],
-		email: [{ validator: validateEmail, trigger: 'blur' }],
+		email: [{ validator: validateEmail, trigger: 'change' }],
-		password: [{ validator: validatePass, trigger: 'blur' }],
+		password: [{ validator: validatePass, trigger: 'change' }],
 		privacy: [{ validator: validatePrivacy, trigger: 'change' }]
 	})
 	const isVisible = ref(false)
+	const showPasswordTip = ref(false)
 	const formData = reactive({
 		name: '',
 		email: '',

src/views/login/retrieve-password.vue

@@ -23,12 +23,15 @@
 							/>
 						</el-form-item>
 						<el-form-item :label="$t('Login.password')" prop="password">
+							<password-tip :value="formData.password" v-show="showPasswordTip" />
 							<el-input
 								v-model="formData.password"
 								:placeholder="$t('Login.enterPassword')"
 								type="password"
 								show-password
 								name="password"
+								@blur="showPasswordTip = false"
+								@focus="showPasswordTip = true"
 							/>
 						</el-form-item>
 						<br />
@@ -61,14 +64,16 @@
 	import { validateEmail, validatePass } from './tools'
 	import OtherLogin from './other-login.vue'
 	import VisibleCode from './visible-code.vue'
+	import PasswordTip from './password-tip.vue'
 	import { useUserInfoStore } from '@/stores'
 	const userInfoStore = useUserInfoStore()
 	const router = useRouter()
 	const ruleForm = reactive({
-		email: [{ validator: validateEmail, trigger: 'blur' }],
+		email: [{ validator: validateEmail, trigger: 'change' }],
-		password: [{ validator: validatePass, trigger: 'blur' }]
+		password: [{ validator: validatePass, trigger: 'change' }]
 	})
 	const isVisible = ref(false)
+	const showPasswordTip = ref(false)
 	const formData = reactive({
 		email: '',
 		password: ''

src/views/login/tools.js

@@ -19,12 +19,21 @@ export const validateEmail = (rule, value, callback) => {
 	}
 	callback(str ? new Error(str) : undefined)
 }
+// 检查长度
+export const validateLength = (v, min = 6, max = 20) => (v.length < 6 || v.length > 20);
+//检查特殊字符
+export const validateSpecial = (v) => (!/[!@#$%^&*()_+\-=\[\]{};':"\\|,.<>\/?]/.test(v));
+//检查大小写字母和数字
+export const validateCase = (v) => (!/[a-z]/.test(v) || !/[A-Z]/.test(v) || !/\d/.test(v));
+// 检查密码
 export const validatePass = (rule, value, callback) => {
 	var str = ''
-	if (!value) {
+	if (validateLength(value)) {
-		str = t('Login.pleaseInputPassword')
-	} else if (value.length < 6 || value.length > 20) {
 		str = t('Login.passwordLengthError', { min: 6, max: 20 })
+	} else if (validateSpecial(value)) {
+		str = t('Login.passwordSpecial')
+	} else if (validateCase(value)) {
+		str = t('Login.passwordCase')
 	}
 	callback(str ? new Error(str) : undefined)
 }