Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
吹了一夜风~
unidocs-zh
提交
dd95f4e8
U
unidocs-zh
项目概览
吹了一夜风~
/
unidocs-zh
与 Fork 源项目一致
Fork自
DCloud / unidocs-zh
通知
1
Star
0
Fork
0
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
0
列表
看板
标记
里程碑
合并请求
0
DevOps
流水线
流水线任务
计划
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
U
unidocs-zh
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
0
Issue
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
DevOps
DevOps
流水线
流水线任务
计划
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
流水线任务
提交
Issue看板
体验新版 GitCode,发现更多精彩内容 >>
提交
dd95f4e8
编写于
5月 09, 2023
作者:
Y
yurj26
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
docs: Update uni-forms.md
上级
0a0844f1
变更
1
隐藏空白更改
内联
并排
Showing
1 changed file
with
222 addition
and
222 deletion
+222
-222
docs/component/uniui/uni-forms.md
docs/component/uniui/uni-forms.md
+222
-222
未找到文件。
docs/component/uniui/uni-forms.md
浏览文件 @
dd95f4e8
...
...
@@ -37,7 +37,7 @@ uni-app的内置组件已经有了 `<form>`组件,用于提交表单内容。
<uni-forms-item
label=
"姓名"
name=
"name"
>
<uni-easyinput
type=
"text"
v-model=
"formData.name"
placeholder=
"请输入姓名"
/>
</uni-forms-item>
<uni-forms-item
label=
"年龄"
name=
"
nam
e"
>
<uni-forms-item
label=
"年龄"
name=
"
ag
e"
>
<input
type=
"text"
v-model=
"formData.age"
placeholder=
"请输入年龄"
/>
</uni-forms-item>
<uni-forms-item
required
name=
"hobby"
label=
"兴趣爱好"
>
...
...
@@ -128,7 +128,7 @@ uni-app的内置组件已经有了 `<form>`组件,用于提交表单内容。
<uni-easyinput
type=
"text"
v-model=
"formData.name"
placeholder=
"请输入姓名"
/>
</uni-forms-item>
<uni-forms-item
label=
"邮箱"
name=
"email"
>
<input
class=
"input"
v-model=
"formData.email"
type=
"text"
placeholder=
"请输入
用户名
"
@
input=
"binddata('email',$event.detail.value)"
/>
<input
class=
"input"
v-model=
"formData.email"
type=
"text"
placeholder=
"请输入
邮箱
"
@
input=
"binddata('email',$event.detail.value)"
/>
</uni-forms-item>
</uni-forms>
<button
@
click=
"submit"
>
Submit
</button>
...
...
@@ -477,7 +477,7 @@ dynamicFormData: {
```
html
<uni-forms
ref=
"dynamicForm"
:rules=
"dynamicRules"
:model=
"dynamicFormData"
>
<uni-forms-item
label=
"邮箱"
required
name=
"email"
>
<uni-easyinput
v-model=
"dynamicFormData.email"
placeholder=
"请输入
姓名
"
/>
<uni-easyinput
v-model=
"dynamicFormData.email"
placeholder=
"请输入
邮箱
"
/>
</uni-forms-item>
<template
v-for=
"(item,index) in dynamicFormData.domains"
>
<uni-forms-item
:label=
"item.label+' '+index"
required
...
...
@@ -827,11 +827,11 @@ this.$refs.form.clearValidate(['name', 'email'])
::: preview https://hellouniapp.dcloud.net.cn/pages/extUI/forms/forms
> Template
```
html
<template>
<view
class=
"container"
>
<template>
<view
class=
"container"
>
<uni-card
:is-shadow=
"false"
is-full
>
<text
class=
"uni-h6"
>
uni-forms 组件一般由输入框、选择器、单选框、多选框等控件组成,用以收集、校验、提交数据。
</text>
</uni-card>
</uni-card>
<uni-section
title=
"基本用法"
type=
"line"
>
<view
class=
"example"
>
<!-- 基础用法,不包含校验规则 -->
...
...
@@ -856,8 +856,8 @@ this.$refs.form.clearValidate(['name', 'email'])
</uni-forms-item>
</uni-forms>
</view>
</uni-section>
</uni-section>
<uni-section
title=
"对齐方式"
type=
"line"
>
<view
class=
"example"
>
<view
class=
"segmented-control"
>
...
...
@@ -874,8 +874,8 @@ this.$refs.form.clearValidate(['name', 'email'])
</uni-forms-item>
</uni-forms>
</view>
</uni-section>
</uni-section>
<uni-section
title=
"表单校验"
type=
"line"
>
<view
class=
"example"
>
<!-- 基础表单校验 -->
...
...
@@ -892,8 +892,8 @@ this.$refs.form.clearValidate(['name', 'email'])
</uni-forms>
<button
type=
"primary"
@
click=
"submit('valiForm')"
>
提交
</button>
</view>
</uni-section>
</uni-section>
<uni-section
title=
"自定义校验规则"
type=
"line"
>
<view
class=
"example"
>
<!-- 自定义表单校验 -->
...
...
@@ -910,9 +910,9 @@ this.$refs.form.clearValidate(['name', 'email'])
</uni-forms>
<button
type=
"primary"
@
click=
"submit('customForm')"
>
提交
</button>
</view>
</uni-section>
</uni-section>
<uni-section
title=
"动态表单"
type=
"line"
>
<view
class=
"example"
>
<!-- 动态表单校验 -->
...
...
@@ -933,219 +933,219 @@ this.$refs.form.clearValidate(['name', 'email'])
<button
type=
"primary"
size=
"mini"
@
click=
"submit('dynamicForm')"
>
提交
</button>
</view>
</view>
</uni-section>
</view>
</template>
</uni-section>
</view>
</template>
```
> Script
```
html
<script>
export
default
{
data
()
{
return
{
// 基础表单数据
baseFormData
:
{
name
:
''
,
age
:
''
,
introduction
:
''
,
sex
:
2
,
```
html
<script>
export
default
{
data
()
{
return
{
// 基础表单数据
baseFormData
:
{
name
:
''
,
age
:
''
,
introduction
:
''
,
sex
:
2
,
hobby
:
[
5
],
datetimesingle
:
1627529992399
},
// 表单数据
alignmentFormData
:
{
name
:
''
,
age
:
''
,
},
// 单选数据源
sexs
:
[{
text
:
'
男
'
,
value
:
0
},
{
text
:
'
女
'
,
value
:
1
},
{
text
:
'
保密
'
,
value
:
2
}],
// 多选数据源
hobbys
:
[{
text
:
'
跑步
'
,
value
:
0
},
{
text
:
'
游泳
'
,
value
:
1
},
{
text
:
'
绘画
'
,
value
:
2
},
{
text
:
'
足球
'
,
value
:
3
},
{
text
:
'
篮球
'
,
value
:
4
},
{
text
:
'
其他
'
,
value
:
5
}],
// 分段器数据
current
:
0
,
items
:
[
'
左对齐
'
,
'
顶部对齐
'
],
// 校验表单数据
valiFormData
:
{
name
:
''
,
age
:
''
,
introduction
:
''
,
},
// 校验规则
rules
:
{
name
:
{
rules
:
[{
required
:
true
,
errorMessage
:
'
姓名不能为空
'
}]
},
age
:
{
rules
:
[{
required
:
true
,
errorMessage
:
'
年龄不能为空
'
},
{
format
:
'
number
'
,
errorMessage
:
'
年龄只能输入数字
'
}]
}
},
// 自定义表单数据
customFormData
:
{
name
:
''
,
age
:
''
,
hobby
:
[]
},
// 自定义表单校验规则
customRules
:
{
name
:
{
rules
:
[{
required
:
true
,
errorMessage
:
'
姓名不能为空
'
}]
},
age
:
{
rules
:
[{
required
:
true
,
errorMessage
:
'
年龄不能为空
'
}]
},
hobby
:
{
rules
:
[{
format
:
'
array
'
},
{
validateFunction
:
function
(
rule
,
value
,
data
,
callback
)
{
if
(
value
.
length
<
2
)
{
callback
(
'
请至少勾选两个兴趣爱好
'
)
}
return
true
}
}
]
}
},
dynamicFormData
:
{
email
:
''
,
domains
:
{}
},
dynamicLists
:
[],
dynamicRules
:
{
email
:
{
rules
:
[{
required
:
true
,
errorMessage
:
'
域名不能为空
'
},
{
format
:
'
email
'
,
errorMessage
:
'
域名格式错误
'
}]
}
}
}
},
computed
:
{
// 处理表单排列切换
alignment
()
{
if
(
this
.
current
===
0
)
return
'
left
'
if
(
this
.
current
===
1
)
return
'
top
'
return
'
left
'
}
},
onLoad
()
{},
onReady
()
{
// 设置自定义表单校验规则,必须在节点渲染完毕后执行
this
.
$refs
.
customForm
.
setRules
(
this
.
customRules
)
},
methods
:
{
onClickItem
(
e
)
{
console
.
log
(
e
);
this
.
current
=
e
.
currentIndex
},
add
()
{
this
.
dynamicLists
.
push
({
label
:
'
域名
'
,
rules
:
[{
'
required
'
:
true
,
errorMessage
:
'
域名项必填
'
}],
id
:
Date
.
now
()
})
},
del
(
id
)
{
let
index
=
this
.
dynamicLists
.
findIndex
(
v
=>
v
.
id
===
id
)
this
.
dynamicLists
.
splice
(
index
,
1
)
},
submit
(
ref
)
{
this
.
$refs
[
ref
].
validate
().
then
(
res
=>
{
console
.
log
(
'
success
'
,
res
);
uni
.
showToast
({
title
:
`校验通过`
})
}).
catch
(
err
=>
{
console
.
log
(
'
err
'
,
err
);
})
},
}
}
</script>
datetimesingle
:
1627529992399
},
// 表单数据
alignmentFormData
:
{
name
:
''
,
age
:
''
,
},
// 单选数据源
sexs
:
[{
text
:
'
男
'
,
value
:
0
},
{
text
:
'
女
'
,
value
:
1
},
{
text
:
'
保密
'
,
value
:
2
}],
// 多选数据源
hobbys
:
[{
text
:
'
跑步
'
,
value
:
0
},
{
text
:
'
游泳
'
,
value
:
1
},
{
text
:
'
绘画
'
,
value
:
2
},
{
text
:
'
足球
'
,
value
:
3
},
{
text
:
'
篮球
'
,
value
:
4
},
{
text
:
'
其他
'
,
value
:
5
}],
// 分段器数据
current
:
0
,
items
:
[
'
左对齐
'
,
'
顶部对齐
'
],
// 校验表单数据
valiFormData
:
{
name
:
''
,
age
:
''
,
introduction
:
''
,
},
// 校验规则
rules
:
{
name
:
{
rules
:
[{
required
:
true
,
errorMessage
:
'
姓名不能为空
'
}]
},
age
:
{
rules
:
[{
required
:
true
,
errorMessage
:
'
年龄不能为空
'
},
{
format
:
'
number
'
,
errorMessage
:
'
年龄只能输入数字
'
}]
}
},
// 自定义表单数据
customFormData
:
{
name
:
''
,
age
:
''
,
hobby
:
[]
},
// 自定义表单校验规则
customRules
:
{
name
:
{
rules
:
[{
required
:
true
,
errorMessage
:
'
姓名不能为空
'
}]
},
age
:
{
rules
:
[{
required
:
true
,
errorMessage
:
'
年龄不能为空
'
}]
},
hobby
:
{
rules
:
[{
format
:
'
array
'
},
{
validateFunction
:
function
(
rule
,
value
,
data
,
callback
)
{
if
(
value
.
length
<
2
)
{
callback
(
'
请至少勾选两个兴趣爱好
'
)
}
return
true
}
}
]
}
},
dynamicFormData
:
{
email
:
''
,
domains
:
{}
},
dynamicLists
:
[],
dynamicRules
:
{
email
:
{
rules
:
[{
required
:
true
,
errorMessage
:
'
域名不能为空
'
},
{
format
:
'
email
'
,
errorMessage
:
'
域名格式错误
'
}]
}
}
}
},
computed
:
{
// 处理表单排列切换
alignment
()
{
if
(
this
.
current
===
0
)
return
'
left
'
if
(
this
.
current
===
1
)
return
'
top
'
return
'
left
'
}
},
onLoad
()
{},
onReady
()
{
// 设置自定义表单校验规则,必须在节点渲染完毕后执行
this
.
$refs
.
customForm
.
setRules
(
this
.
customRules
)
},
methods
:
{
onClickItem
(
e
)
{
console
.
log
(
e
);
this
.
current
=
e
.
currentIndex
},
add
()
{
this
.
dynamicLists
.
push
({
label
:
'
域名
'
,
rules
:
[{
'
required
'
:
true
,
errorMessage
:
'
域名项必填
'
}],
id
:
Date
.
now
()
})
},
del
(
id
)
{
let
index
=
this
.
dynamicLists
.
findIndex
(
v
=>
v
.
id
===
id
)
this
.
dynamicLists
.
splice
(
index
,
1
)
},
submit
(
ref
)
{
this
.
$refs
[
ref
].
validate
().
then
(
res
=>
{
console
.
log
(
'
success
'
,
res
);
uni
.
showToast
({
title
:
`校验通过`
})
}).
catch
(
err
=>
{
console
.
log
(
'
err
'
,
err
);
})
},
}
}
</script>
```
> Style
```
html
<style
lang=
"scss"
>
.example
{
padding
:
15px
;
background-color
:
#fff
;
}
.segmented-control
{
margin-bottom
:
15px
;
}
.button-group
{
margin-top
:
15px
;
display
:
flex
;
justify-content
:
space-around
;
}
.form-item
{
display
:
flex
;
align-items
:
center
;
}
.button
{
display
:
flex
;
align-items
:
center
;
height
:
35px
;
margin-left
:
10px
;
}
```
html
<style
lang=
"scss"
>
.example
{
padding
:
15px
;
background-color
:
#fff
;
}
.segmented-control
{
margin-bottom
:
15px
;
}
.button-group
{
margin-top
:
15px
;
display
:
flex
;
justify-content
:
space-around
;
}
.form-item
{
display
:
flex
;
align-items
:
center
;
}
.button
{
display
:
flex
;
align-items
:
center
;
height
:
35px
;
margin-left
:
10px
;
}
</style>
```
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录