FatttSnake/oxygen-ui
1
0
Fork 0
Code Pull Requests Activity

Refactor(Form): Optimize form input experience

Browse Source 
Add placeholder. Optimize form validation. Hide ID input.
This commit is contained in:
Fat Snake
2024-04-22 18:09:42 +08:00
parent 81b170d944
commit 5d28f7d8d7
22 changed files with 213 additions and 130 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
src/pages/Sign/Forget.tsx
View File

@@ -155,8 +155,8 @@ const Forget = () => {
>
<AntdInput
prefix={<Icon component={IconOxygenEmail} />}
placeholder={'邮箱'}
disabled={isSending}
placeholder={'邮箱'}
/>
</AntdForm.Item>
<AntdForm.Item>
@@ -199,6 +199,7 @@ const Forget = () => {
name={'password'}
rules={[
{ required: true, message: '请输入密码' },
{ whitespace: true, message: '密码不能为空字符' },
{ min: 10, message: '密码至少为10位' },
{ max: 30, message: '密码最多为30位' }
]}
@@ -208,8 +209,8 @@ const Forget = () => {
addonBefore={
<span>新&nbsp;&nbsp;密&nbsp;&nbsp;码</span>
}
placeholder={'密码'}
disabled={isChanging}
placeholder={'密码'}
/>
</AntdForm.Item>
<AntdForm.Item
@@ -234,8 +235,8 @@ const Forget = () => {
<AntdInput.Password
id={'forget-password-confirm'}
addonBefore={'确认密码'}
placeholder={'确认密码'}
disabled={isChanging}
placeholder={'确认密码'}
/>
</AntdForm.Item>
<AntdForm.Item>

17
src/pages/Sign/SignIn.tsx
View File

@@ -124,6 +124,7 @@ const SignIn = () => {
form={twoFactorForm}
ref={(ref) => {
setTimeout(() => {
// eslint-disable-next-line @typescript-eslint/no-unsafe-call,@typescript-eslint/no-unsafe-member-access
ref?.getFieldInstance('twoFactorCode').focus()
}, 50)
}}
@@ -132,7 +133,7 @@ const SignIn = () => {
name={'twoFactorCode'}
label={'验证码'}
style={{ marginTop: 10 }}
rules={[{ required: true, len: 6 }]}
rules={[{ required: true, whitespace: true, len: 6 }]}
>
<AntdInput
showCount
@@ -217,22 +218,28 @@ const SignIn = () => {
<AntdForm autoComplete={'on'} onFinish={handleOnFinish} className={'form'}>
<AntdForm.Item
name={'account'}
rules={[{ required: true, message: '请输入账号' }]}
rules={[
{ required: true, message: '请输入账号' },
{ whitespace: true, message: '账号不能为空字符' }
]}
>
<AntdInput
prefix={<Icon component={IconOxygenUser} />}
placeholder={'邮箱/用户名'}
disabled={isSigningIn}
placeholder={'邮箱/用户名'}
/>
</AntdForm.Item>
<AntdForm.Item
name={'password'}
rules={[{ required: true, message: '请输入密码' }]}
rules={[
{ required: true, message: '请输入密码' },
{ whitespace: true, message: '密码不能为空字符' }
]}
>
<AntdInput.Password
prefix={<Icon component={IconOxygenPassword} />}
placeholder={'密码'}
disabled={isSigningIn}
placeholder={'密码'}
/>
</AntdForm.Item>
<AntdForm.Item>

10
src/pages/Sign/SignUp.tsx
View File

@@ -139,6 +139,7 @@ const SignUp = () => {
name={'username'}
rules={[
{ required: true, message: '请输入用户名' },
{ whitespace: true, message: '用户名不能为空字符' },
{
pattern: /^[a-zA-Z-_][0-9a-zA-Z-_]{2,38}$/,
message:
@@ -148,10 +149,10 @@ const SignUp = () => {
>
<AntdInput
prefix={<Icon component={IconOxygenUser} />}
placeholder={'用户名'}
maxLength={39}
showCount={true}
disabled={isSigningUp}
placeholder={'用户名'}
/>
</AntdForm.Item>
<AntdForm.Item
@@ -164,14 +165,15 @@ const SignUp = () => {
<AntdInput
type={'email'}
prefix={<Icon component={IconOxygenEmail} />}
placeholder={'邮箱'}
disabled={isSigningUp}
placeholder={'邮箱'}
/>
</AntdForm.Item>
<AntdForm.Item
name={'password'}
rules={[
{ required: true, message: '请输入密码' },
{ whitespace: true, message: '密码不能为空字符' },
{ min: 10, message: '密码至少为10位' },
{ max: 30, message: '密码最多为30位' }
]}
@@ -179,8 +181,8 @@ const SignUp = () => {
<AntdInput.Password
id={'sign-up-password'}
prefix={<Icon component={IconOxygenPassword} />}
placeholder={'密码'}
disabled={isSigningUp}
placeholder={'密码'}
/>
</AntdForm.Item>
<AntdForm.Item
@@ -202,8 +204,8 @@ const SignUp = () => {
<AntdInput.Password
id={'sign-up-password-confirm'}
prefix={<Icon component={IconOxygenPassword} />}
placeholder={'确认密码'}
disabled={isSigningUp}
placeholder={'确认密码'}
/>
</AntdForm.Item>
<AntdForm.Item>

1
src/pages/Sign/Verify.tsx
View File

@@ -195,6 +195,7 @@ const Verify = () => {
name={'nickname'}
rules={[
{ required: true, message: '请输入昵称' },
{ whitespace: true, message: '昵称不能为空字符' },
{ min: 3, message: '昵称至少为3个字符' }
]}
>