@@ -62,7 +71,7 @@ import { useRoute, useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import 'element-plus/theme-chalk/src/message.scss'
-import { login, register } from '@/management/api/auth'
+import { getPasswordStrength, login, register } from '@/management/api/auth'
import { refreshCaptcha as refreshCaptchaApi } from '@/management/api/captcha'
import { CODE_MAP } from '@/management/api/base'
import { useUserStore } from '@/management/stores/user'
@@ -89,6 +98,55 @@ const formData = reactive
({
captchaId: ''
})
+// 每个滑块不同强度的颜色,索引0对应第一个滑块
+const strengthColor = reactive([
+ {
+ Strong: '#67C23A',
+ Medium: '#ebb563',
+ Weak: '#f78989'
+ },
+ {
+ Strong: '#67C23A',
+ Medium: '#ebb563',
+ Weak: '#2a598a'
+ },
+ {
+ Strong: '#67C23A',
+ Medium: '#2a598a',
+ Weak: '#2a598a'
+ }
+])
+
+// 密码内容校验
+const passwordValidator = (_: any, value: any, callback: any) => {
+ if (!value) {
+ callback(new Error('请输入密码'))
+ passwordStrength.value = undefined
+ return
+ }
+
+ if (value.length < 6 || value.length > 16) {
+ callback(new Error('长度在 6 到 16 个字符'))
+ passwordStrength.value = undefined
+ return
+ }
+
+ if (!/^[a-zA-Z0-9!@#$%^&*()_+\-=[\]{};':"\\|,.<>/?]+$/.test(value)) {
+ callback(new Error('只能输入数字、字母、特殊字符'))
+ passwordStrength.value = undefined
+ return
+ }
+ passwordStrengthHandle(value)
+ callback()
+}
+
+const passwordStrengthHandle = async (value: string) => {
+ const res: any = await getPasswordStrength(value)
+ if (res.code === CODE_MAP.SUCCESS) {
+ passwordStrength.value = res.data
+ }
+}
+
const rules = {
name: [
{ required: true, message: '请输入账号', trigger: 'blur' },
@@ -100,11 +158,8 @@ const rules = {
}
],
password: [
- { required: true, message: '请输入密码', trigger: 'blur' },
{
- min: 8,
- max: 16,
- message: '长度在 8 到 16 个字符',
+ validator: passwordValidator,
trigger: 'blur'
}
],
@@ -128,6 +183,7 @@ const pending = reactive({
const captchaImgData = ref('')
const formDataRef = ref(null)
+const passwordStrength = ref<'Strong' | 'Medium' | 'Weak'>()
const submitForm = (type: 'login' | 'register') => {
formDataRef.value.validate(async (valid: boolean) => {
@@ -258,5 +314,16 @@ const refreshCaptcha = async () => {
}
}
}
+
+ .strength {
+ display: inline-block;
+ width: 20%;
+ height: 6px;
+ border-radius: 8px;
+ background: red;
+ &:not(:first-child) {
+ margin-left: 10px;
+ }
+ }
}