feat: 在输入错误时显示正确的格式

ZiqiangStudio · Aug 24, 2023 · 46ab1f9 · 46ab1f9
1 parent e673dc1
commit 46ab1f9
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 0 deletions.
diff --git a/components/z-input.vue b/components/z-input.vue
@@ -15,6 +15,7 @@
           :maxlength="maxlength"
           :minlength="minlength"
           :pattern="pattern"
+          :title="title"
           @input="onChange"
         />
         <div class="icon">
@@ -61,6 +62,10 @@ const props = defineProps({
     type: String,
     required: false,
   },
+  title: {
+    type: String,
+    required: false,
+  },
   customRule: {
     type: Function as PropType<(value: string) => string>,
     required: false,

diff --git a/pages/login.vue b/pages/login.vue
@@ -7,6 +7,7 @@
         maxlength="16"
         minlength="4"
         pattern="[a-zA-Z0-9_\-]+"
+        title="只能包含英文大小写、数字、_和-"
         label="用户名/手机号/学号"
         required
         placeholder="请输入用户名"
@@ -21,6 +22,7 @@
         maxlength="18"
         minlength="6"
         pattern="[a-zA-Z0-9_\-]+"
+        title="只能包含英文大小写、数字、_和-"
         type="password"
         required
         placeholder="请输入密码"

diff --git a/pages/register.vue b/pages/register.vue
@@ -9,6 +9,7 @@
         maxlength="16"
         minlength="4"
         pattern="[a-zA-Z0-9_\-]+"
+        title="只能包含英文大小写、数字、_和-"
         placeholder="请输入用户名"
         :custom-rule="usernameRule"
       >
@@ -25,6 +26,7 @@
         maxlength="11"
         type="tel"
         pattern="1[3-9]\d+"
+        title="请输入正确的11位手机号"
         placeholder="请输入手机号"
       >
         <template #prefix>
@@ -39,6 +41,7 @@
         type="number"
         required
         pattern="[0-9]+"
+        title="请输入正确的6位数字验证码"
         placeholder="请输入验证码"
       >
         <template #prefix>
@@ -58,6 +61,7 @@
         maxlength="18"
         minlength="6"
         pattern="[a-zA-Z0-9_\-]+"
+        title="只能包含英文大小写、数字、_和-"
         placeholder="请输入密码"
       >
         <template #prefix>
@@ -72,6 +76,7 @@
         maxlength="18"
         minlength="6"
         pattern="[a-zA-Z0-9_\-]+"
+        title="只能包含英文大小写、数字、_和-"
         placeholder="请再次输入密码"
         :custom-rule="confirmedPasswordRule"
       >