style(登录页面): 为手机号和密码输入框添加必填标记和占位符
为提升用户体验,在手机号和密码输入框前添加红色星号标记表示必填项,并添加占位符提示用户输入格式
Showing
1 changed file
with
4 additions
and
2 deletions
| ... | @@ -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> | ... | ... |
-
Please register or login to post a comment