diff --git a/src/lang/en.ts b/src/lang/en.ts index d9005b8..b9d2efa 100644 --- a/src/lang/en.ts +++ b/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', diff --git a/src/lang/zh-cn.ts b/src/lang/zh-cn.ts index 66a84c5..7046d64 100644 --- a/src/lang/zh-cn.ts +++ b/src/lang/zh-cn.ts @@ -16,6 +16,8 @@ export default { forgotPassword: '忘记密码?', pleaseInputName: '请输入姓名', nameLengthError: '姓名长度必须在 {min} 到 {max} 个字符之间', + passwordSpecial:'必须包含特殊符号', + passwordCase:'大小写字母与数字混合组合', pleaseInputEmail: '请输入邮箱', emailFormatError: '请输入正确的邮箱', pleaseInputPassword: '请输入密码', diff --git a/src/views/login/css/style.css b/src/views/login/css/style.css index 0c3170e..ac5ab87 100644 --- a/src/views/login/css/style.css +++ b/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 { diff --git a/src/views/login/less/style.less b/src/views/login/less/style.less index f4340fb..7dd85a3 100644 --- a/src/views/login/less/style.less +++ b/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; diff --git a/src/views/login/login.vue b/src/views/login/login.vue index f92b594..b92f419 100644 --- a/src/views/login/login.vue +++ b/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' }], - password: [{ validator: validatePass, trigger: 'blur' }], + email: [{ validator: validateEmail, trigger: 'change' }], + password: [ + { + min: 6, + max: 12, + message: t('Login.passwordLengthError', { min: 6, max: 12 }), + trigger: 'change' + } + ], privacy: [{ validator: validatePrivacy, trigger: 'change' }] }) const isVisible = ref(false) diff --git a/src/views/login/password-tip.vue b/src/views/login/password-tip.vue new file mode 100644 index 0000000..0ca3f14 --- /dev/null +++ b/src/views/login/password-tip.vue @@ -0,0 +1,60 @@ + + + + + diff --git a/src/views/login/register.vue b/src/views/login/register.vue index 178961b..d873ebb 100644 --- a/src/views/login/register.vue +++ b/src/views/login/register.vue @@ -24,12 +24,15 @@ /> + @@ -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' }], - email: [{ validator: validateEmail, trigger: 'blur' }], - password: [{ validator: validatePass, trigger: 'blur' }], + name: [{ validator: validateName, trigger: 'change' }], + email: [{ validator: validateEmail, trigger: 'change' }], + password: [{ validator: validatePass, trigger: 'change' }], privacy: [{ validator: validatePrivacy, trigger: 'change' }] }) const isVisible = ref(false) + const showPasswordTip = ref(false) const formData = reactive({ name: '', email: '', diff --git a/src/views/login/retrieve-password.vue b/src/views/login/retrieve-password.vue index 0ecbe51..5ac4a92 100644 --- a/src/views/login/retrieve-password.vue +++ b/src/views/login/retrieve-password.vue @@ -23,12 +23,15 @@ /> +
@@ -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' }], - password: [{ validator: validatePass, trigger: 'blur' }] + email: [{ validator: validateEmail, trigger: 'change' }], + password: [{ validator: validatePass, trigger: 'change' }] }) const isVisible = ref(false) + const showPasswordTip = ref(false) const formData = reactive({ email: '', password: '' diff --git a/src/views/login/tools.js b/src/views/login/tools.js index b97754d..1638d45 100644 --- a/src/views/login/tools.js +++ b/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) { - str = t('Login.pleaseInputPassword') - } else if (value.length < 6 || value.length > 20) { + if (validateLength(value)) { 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) }