Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
京东前端
nutui-react
提交
49e589f4
N
nutui-react
项目概览
京东前端
/
nutui-react
通知
0
Star
2
Fork
0
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
0
列表
看板
标记
里程碑
合并请求
0
DevOps
流水线
流水线任务
计划
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
N
nutui-react
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
0
Issue
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
DevOps
DevOps
流水线
流水线任务
计划
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
流水线任务
提交
Issue看板
体验新版 GitCode,发现更多精彩内容 >>
未验证
提交
49e589f4
编写于
2月 20, 2023
作者:
J
junjun666
提交者:
GitHub
2月 20, 2023
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
feat: 新增form-item的validator校验和重置提示状态功能 (#689)
上级
d0b9cedb
变更
7
隐藏空白更改
内联
并排
Showing
7 changed file
with
109 addition
and
19 deletion
+109
-19
src/packages/form/demo.tsx
src/packages/form/demo.tsx
+45
-6
src/packages/form/doc.en-US.md
src/packages/form/doc.en-US.md
+25
-3
src/packages/form/doc.md
src/packages/form/doc.md
+21
-6
src/packages/form/form.scss
src/packages/form/form.scss
+3
-0
src/packages/form/form.tsx
src/packages/form/form.tsx
+5
-1
src/packages/form/useForm.ts
src/packages/form/useForm.ts
+8
-1
src/packages/formitem/types.ts
src/packages/formitem/types.ts
+2
-2
未找到文件。
src/packages/form/demo.tsx
浏览文件 @
49e589f4
...
...
@@ -10,6 +10,7 @@ import Radio from '../radio'
import
Rate
from
'
../rate
'
import
Range
from
'
../range
'
import
Toast
from
'
@/packages/toast
'
import
{
FormItemRuleWithoutValidator
}
from
'
./types
'
import
{
FileItem
,
FileType
}
from
'
../uploader/uploader
'
interface
T
{
...
...
@@ -70,7 +71,7 @@ const FormDemo = () => {
nameTip1
:
'
请输入姓名
'
,
age
:
'
年龄
'
,
ageTip
:
'
请输入年龄
'
,
ageTip1
:
'
请输入年龄
'
,
ageTip1
:
'
请输入年龄
,必须数字且0-200区间
'
,
ageTip2
:
'
必须输入数字
'
,
ageTip3
:
'
必须输入0-200区间
'
,
tel
:
'
联系电话
'
,
...
...
@@ -129,7 +130,7 @@ const FormDemo = () => {
add
:
'
Add
'
,
remove
:
'
Remove
'
,
submit
:
'
Submit
'
,
reset
:
'
Reset
prompt status
'
,
reset
:
'
Reset
alert state
'
,
switch
:
'
Switch
'
,
checkbox
:
'
Checkbox
'
,
radiogroup
:
'
RadioGroup
'
,
...
...
@@ -197,6 +198,21 @@ const FormDemo = () => {
}
}
// 函数校验
const
customValidator
=
(
rule
:
FormItemRuleWithoutValidator
,
value
:
string
)
=>
{
return
/^
\d
+$/
.
test
(
value
)
}
const
valueRangeValidator
=
(
rule
:
FormItemRuleWithoutValidator
,
value
:
string
)
=>
{
return
/^
(\d{1,2}
|1
\d{2}
|200
)
$/
.
test
(
value
)
}
return
(
<>
<
div
className
=
"demo"
>
...
...
@@ -260,17 +276,38 @@ const FormDemo = () => {
>
<
Input
placeholder
=
{
translated
.
nameTip1
}
type
=
"text"
/>
</
Form
.
Item
>
<
Form
.
Item
label
=
{
translated
.
age
}
name
=
"age"
>
<
Input
placeholder
=
{
translated
.
ageTip1
}
type
=
"number"
/>
<
Form
.
Item
label
=
{
translated
.
age
}
name
=
"age"
rules
=
{
[
{
required
:
true
,
message
:
translated
.
ageTip
},
{
validator
:
customValidator
,
message
:
translated
.
ageTip2
},
{
validator
:
valueRangeValidator
,
message
:
translated
.
ageTip3
},
]
}
>
<
Input
placeholder
=
{
translated
.
ageTip1
}
type
=
"text"
/>
</
Form
.
Item
>
<
Form
.
Item
label
=
{
translated
.
tel
}
name
=
"tel"
>
<
Form
.
Item
label
=
{
translated
.
tel
}
name
=
"tel"
rules
=
{
[{
required
:
true
,
message
:
translated
.
telTip
}]
}
>
<
Input
placeholder
=
{
translated
.
telTip2
}
type
=
"number"
/>
</
Form
.
Item
>
<
Form
.
Item
label
=
{
translated
.
address
}
name
=
"address"
>
<
Form
.
Item
label
=
{
translated
.
address
}
name
=
"address"
rules
=
{
[{
required
:
true
,
message
:
translated
.
addressTip
}]
}
>
<
Input
placeholder
=
{
translated
.
addressTip
}
type
=
"text"
/>
</
Form
.
Item
>
<
Cell
>
<
input
type
=
"submit"
value
=
{
translated
.
submit
}
/>
<
input
type
=
"reset"
style
=
{
{
marginLeft
:
'
15px
'
}
}
value
=
{
translated
.
reset
}
/>
</
Cell
>
</
Form
>
...
...
@@ -298,6 +335,7 @@ const FormDemo = () => {
<
input
type
=
"submit"
value
=
{
translated
.
submit
}
/>
</
Cell
>
</
Form
>
<
h2
>
{
translated
.
title4
}
</
h2
>
<
Form
form
=
{
form
}
...
...
@@ -325,6 +363,7 @@ const FormDemo = () => {
<
input
type
=
"submit"
value
=
{
translated
.
submit
}
/>
</
Cell
>
</
Form
>
<
h2
>
{
translated
.
title5
}
</
h2
>
<
Form
onFinish
=
{
(
obj
)
=>
submitSucceed
(
obj
)
}
...
...
src/packages/form/doc.en-US.md
浏览文件 @
49e589f4
...
...
@@ -111,24 +111,45 @@ import React from "react";
import
{
Form
,
Input
,
Cell
}
from
'
@nutui/nutui-react
'
;
const
App
=
()
=>
{
// 函数校验
const
customValidator
=
(
rule
:
FormItemRuleWithoutValidator
,
value
:
string
)
=>
{
return
/^
\d
+$/
.
test
(
value
)
}
const
valueRangeValidator
=
(
rule
:
FormItemRuleWithoutValidator
,
value
:
string
)
=>
{
return
/^
(\d{1,2}
|1
\d{2}
|200
)
$/
.
test
(
value
)
}
return
(
<>
<
Form
onFinish
=
{
(
obj
)
=>
submitSucceed
(
obj
)
}
onFinishFailed
=
{
(
error
)
=>
submitFailed
(
error
)
}
>
<
Form
.
Item
label
=
'Name'
name
=
"username"
initialValue
=
"zhangsan"
>
<
Form
.
Item
label
=
'Name'
name
=
"username"
rules
=
{
[{
required
:
true
,
message
:
'
Please enter your name
'
}]
}
>
<
Input
className
=
"nut-input-text"
placeholder
=
'Please enter your name'
type
=
"text"
/>
</
Form
.
Item
>
<
Form
.
Item
label
=
'Age'
name
=
"age"
>
<
Input
placeholder
=
'Please enter age'
type
=
"number"
defaultValue
=
"18"
/>
<
Form
.
Item
label
=
'Age'
name
=
"age"
rules
=
{
[
{
required
:
true
,
message
:
'
Please enter age
'
},
{
validator
:
customValidator
,
message
:
'
must enter number
'
},
{
validator
:
valueRangeValidator
,
message
:
'
0-200 range must be entered
'
},
]
}
>
<
Input
placeholder
=
'Please enter the age, it must be a number and the range is 0-200'
type
=
"number"
/>
</
Form
.
Item
>
<
Form
.
Item
label
=
'Tel'
name
=
"tel"
rules
=
{
[{
required
:
true
,
message
:
'
please enter tel
'
}]
}
>
<
Input
placeholder
=
'please enter tel'
type
=
"number"
/>
</
Form
.
Item
>
<
Form
.
Item
label
=
'Address'
name
=
"address"
rules
=
{
[{
required
:
true
,
message
:
'
Please enter address
'
}]
}
>
<
Input
placeholder
=
'Please enter address'
type
=
"text"
/>
</
Form
.
Item
>
<
Cell
>
<
input
type
=
"submit"
value
=
'Submit'
/>
<
input
type
=
"reset"
style
=
{
{
marginLeft
:
'
15px
'
}
}
value
=
"Reset notification status"
/>
</
Cell
>
</
Form
>
</>
...
...
@@ -283,6 +304,7 @@ Form.useForm() creates a Form instance, which is used to manage all data states.
|-------------------|-----------------------------|-----|---------|
| getFieldValue | Get the value of the corresponding field name | - | (name: NamePath) => any |
| setFieldsValue | Set the value of the form | - | (values) => void |
| resetFields
`1.4.8`
| Reset form prompt state | - | () => void |
| submit | the function of submit the form | - | Promise |
...
...
src/packages/form/doc.md
浏览文件 @
49e589f4
...
...
@@ -78,37 +78,51 @@ import React from "react";
import
{
Form
,
Input
,
Cell
}
from
'
@nutui/nutui-react
'
;
const
App
=
()
=>
{
// 函数校验
const
customValidator
=
(
rule
:
FormItemRuleWithoutValidator
,
value
:
string
)
=>
{
return
/^
\d
+$/
.
test
(
value
)
}
const
valueRangeValidator
=
(
rule
:
FormItemRuleWithoutValidator
,
value
:
string
)
=>
{
return
/^
(\d{1,2}
|1
\d{2}
|200
)
$/
.
test
(
value
)
}
return
(
<>
<
Form
onFinish
=
{
(
obj
)
=>
submitSucceed
(
obj
)
}
onFinishFailed
=
{
(
error
)
=>
submitFailed
(
error
)
}
>
<
Form
.
Item
label
=
'姓名'
name
=
"username"
>
<
Form
.
Item
label
=
'姓名'
name
=
"username"
rules
=
{
[{
required
:
true
,
message
:
'
请输入姓名
'
}]
}
>
<
Input
className
=
"nut-input-text"
placeholder
=
'请输入姓名'
type
=
"text"
/>
</
Form
.
Item
>
<
Form
.
Item
label
=
'年龄'
name
=
"age"
>
<
Input
placeholder
=
'请填写年龄'
type
=
"number"
/>
<
Form
.
Item
label
=
'年龄'
name
=
"age"
rules
=
{
[
{
required
:
true
,
message
:
'
请输入年龄
'
},
{
validator
:
customValidator
,
message
:
'
必须输入数字
'
},
{
validator
:
valueRangeValidator
,
message
:
'
必须输入0-200区间
'
},
]
}
>
<
Input
placeholder
=
'请输入年龄,必须数字且0-200区间'
type
=
"number"
/>
</
Form
.
Item
>
<
Form
.
Item
label
=
'联系电话'
name
=
"tel"
>
<
Form
.
Item
label
=
'联系电话'
name
=
"tel"
rules
=
{
[{
required
:
true
,
message
:
'
请输入联系电话
'
}]
}
>
<
Input
placeholder
=
'请填写联系电话'
type
=
"number"
/>
</
Form
.
Item
>
<
Form
.
Item
label
=
'地址'
name
=
"address"
>
<
Form
.
Item
label
=
'地址'
name
=
"address"
rules
=
{
[{
required
:
true
,
message
:
'
请输入地址
'
}]
}
>
<
Input
placeholder
=
'请填写地址'
type
=
"text"
/>
</
Form
.
Item
>
<
Cell
>
<
input
type
=
"submit"
value
=
'提交'
/>
<
input
type
=
"reset"
style
=
{
{
marginLeft
:
'
15px
'
}
}
value
=
"重置提示状态"
/>
</
Cell
>
</
Form
>
</>
)
}
export
default
App
;
```
:::
...
...
@@ -302,6 +316,7 @@ Form.useForm()创建 Form 实例,用于管理所有数据状态。
|-------------------|-----------------------------|-----|---------|
| getFieldValue | 获取对应字段名的值 | - | (name: NamePath) => any |
| setFieldsValue | 设置表单的值 | - | (values) => void |
| resetFields
`1.4.8`
| 重置表单提示状态 | - | () => void |
| submit | 提交表单进行校验的方法 | - | Promise |
...
...
src/packages/form/form.scss
浏览文件 @
49e589f4
...
...
@@ -2,17 +2,20 @@
text-align
:
right
;
font-size
:
14px
;
padding-right
:
24px
;
white-space
:
nowrap
;
}
.form-layout-left
.nut-form-item__label
{
text-align
:
left
;
font-size
:
14px
;
padding-right
:
24px
;
white-space
:
nowrap
;
}
.form-layout-top
.nut-form-item
{
flex-direction
:
column
;
align-items
:
flex-start
;
white-space
:
nowrap
;
}
.form-layout-top
.nut-form-item__label
{
...
...
src/packages/form/form.tsx
浏览文件 @
49e589f4
...
...
@@ -51,7 +51,7 @@ export const Form: FunctionComponent<
}
formInstance
.
starPositon
=
starPositon
const
{
setCallback
,
submit
}
=
formInstance
const
{
setCallback
,
submit
,
resetFields
}
=
formInstance
setCallback
({
onFinish
,
...
...
@@ -66,6 +66,10 @@ export const Form: FunctionComponent<
e
.
preventDefault
()
submit
()
}
}
onReset
=
{
(
e
)
=>
{
e
.
preventDefault
()
resetFields
()
}
}
// {...rest}
>
<
CellGroup
>
...
...
src/packages/form/useForm.ts
浏览文件 @
49e589f4
...
...
@@ -116,7 +116,13 @@ class FormStore {
}
}
resetFields
=
()
=>
{}
resetFields
=
()
=>
{
this
.
errList
.
length
=
0
this
.
fieldEntities
.
forEach
((
enetity
:
FieldEntity
)
=>
{
enetity
.
onStoreChange
()
})
}
getForm
=
()
=>
{
return
{
...
...
@@ -124,6 +130,7 @@ class FormStore {
registerField
:
this
.
registerField
,
getFieldValue
:
this
.
getFieldValue
,
setFieldsValue
:
this
.
setFieldsValue
,
resetFields
:
this
.
resetFields
,
submit
:
this
.
submit
,
store
:
this
.
store
,
errList
:
this
.
errList
,
...
...
src/packages/formitem/types.ts
浏览文件 @
49e589f4
...
...
@@ -32,8 +32,8 @@ export interface FormItemRuleWithoutValidator {
}
export
interface
FormItemRule
extends
FormItemRuleWithoutValidator
{
validator
?:
(
value
:
any
,
ruleCfg
:
FormItemRuleWithoutValidator
ruleCfg
:
FormItemRuleWithoutValidator
,
value
:
string
)
=>
boolean
|
string
|
Promise
<
boolean
|
string
>
}
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录