hookehuyr

style(登录页面): 为手机号和密码输入框添加必填标记和占位符

为提升用户体验,在手机号和密码输入框前添加红色星号标记表示必填项,并添加占位符提示用户输入格式
...@@ -19,7 +19,7 @@ ...@@ -19,7 +19,7 @@
19 <form class="space-y-6" @submit.prevent="handleSubmit"> 19 <form class="space-y-6" @submit.prevent="handleSubmit">
20 <div> 20 <div>
21 <label for="mobile" class="block text-sm font-medium text-gray-700"> 21 <label for="mobile" class="block text-sm font-medium text-gray-700">
22 - 手机号 22 + 手机号 <span class="text-red-500">*</span>
23 </label> 23 </label>
24 <input 24 <input
25 id="mobile" 25 id="mobile"
...@@ -30,6 +30,7 @@ ...@@ -30,6 +30,7 @@
30 required 30 required
31 pattern="^1[3-9]\d{9}$" 31 pattern="^1[3-9]\d{9}$"
32 maxlength="11" 32 maxlength="11"
33 + placeholder="请输入手机号"
33 @input="mobile = $event.target.value.replace(/\D/g, '')" 34 @input="mobile = $event.target.value.replace(/\D/g, '')"
34 @focus="handleInputFocus" 35 @focus="handleInputFocus"
35 class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-green-500 focus:border-green-500" 36 class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-green-500 focus:border-green-500"
...@@ -38,7 +39,7 @@ ...@@ -38,7 +39,7 @@
38 39
39 <div> 40 <div>
40 <label for="password" class="block text-sm font-medium text-gray-700"> 41 <label for="password" class="block text-sm font-medium text-gray-700">
41 - 密码 42 + 密码 <span class="text-red-500">*</span>
42 </label> 43 </label>
43 <input 44 <input
44 id="password" 45 id="password"
...@@ -47,6 +48,7 @@ ...@@ -47,6 +48,7 @@
47 type="password" 48 type="password"
48 autocomplete="current-password" 49 autocomplete="current-password"
49 required 50 required
51 + placeholder="请输入6位密码"
50 class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-green-500 focus:border-green-500" 52 class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-green-500 focus:border-green-500"
51 /> 53 />
52 </div> 54 </div>
......