Skip to content

U
unidocs-zh

阿司匹林__ / unidocs-zh
与 Fork 源项目一致

Fork自 DCloud / unidocs-zh

通知 1
Star 0
Fork 0
U
unidocs-zh

前往新版Gitcode，体验更适合开发者的 AI 搜索 >>

提交 dd95f4e8 编写于 作者: Y yurj26
浏览文件
操作

docs: Update uni-forms.md

上级 0a0844f1
隐藏空白更改
内联 并排
Showing with 222 addition and 222 deletion
docs/component/uniui/uni-forms.md
浏览文件 @ dd95f4e8
...@@ -37,7 +37,7 @@ uni-app的内置组件已经有了 `<form>`组件，用于提交表单内容。 ...@@ -37,7 +37,7 @@ uni-app的内置组件已经有了 `<form>`组件，用于提交表单内容。
<uni-forms-item label="姓名" name="name"> <uni-forms-item label="姓名" name="name">
<uni-easyinput type="text" v-model="formData.name" placeholder="请输入姓名" /> <uni-easyinput type="text" v-model="formData.name" placeholder="请输入姓名" />
</uni-forms-item> </uni-forms-item>
<uni-forms-item label="年龄" name="name"> <uni-forms-item label="年龄" name="age">
<input type="text" v-model="formData.age" placeholder="请输入年龄" /> <input type="text" v-model="formData.age" placeholder="请输入年龄" />
</uni-forms-item> </uni-forms-item>
<uni-forms-item required name="hobby" label="兴趣爱好"> <uni-forms-item required name="hobby" label="兴趣爱好">
...@@ -128,7 +128,7 @@ uni-app的内置组件已经有了 `<form>`组件，用于提交表单内容。 ...@@ -128,7 +128,7 @@ uni-app的内置组件已经有了 `<form>`组件，用于提交表单内容。
<uni-easyinput type="text" v-model="formData.name" placeholder="请输入姓名" /> <uni-easyinput type="text" v-model="formData.name" placeholder="请输入姓名" />
</uni-forms-item> </uni-forms-item>
<uni-forms-item label="邮箱" name="email"> <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-item>
</uni-forms> </uni-forms>
<button @click="submit">Submit</button> <button @click="submit">Submit</button>
...@@ -477,7 +477,7 @@ dynamicFormData: { ...@@ -477,7 +477,7 @@ dynamicFormData: {
```html ```html
<uni-forms ref="dynamicForm" :rules="dynamicRules" :model="dynamicFormData"> <uni-forms ref="dynamicForm" :rules="dynamicRules" :model="dynamicFormData">
<uni-forms-item label="邮箱" required name="email"> <uni-forms-item label="邮箱" required name="email">
<uni-easyinput v-model="dynamicFormData.email" placeholder="请输入姓名" /> <uni-easyinput v-model="dynamicFormData.email" placeholder="请输入邮箱" />
</uni-forms-item> </uni-forms-item>
<template v-for="(item,index) in dynamicFormData.domains"> <template v-for="(item,index) in dynamicFormData.domains">
<uni-forms-item :label="item.label+' '+index" required <uni-forms-item :label="item.label+' '+index" required
...@@ -827,11 +827,11 @@ this.$refs.form.clearValidate(['name', 'email']) ...@@ -827,11 +827,11 @@ this.$refs.form.clearValidate(['name', 'email'])
::: preview https://hellouniapp.dcloud.net.cn/pages/extUI/forms/forms ::: preview https://hellouniapp.dcloud.net.cn/pages/extUI/forms/forms
> Template > Template
``` html ``` html
<template> <template>
<view class="container"> <view class="container">
<uni-card :is-shadow="false" is-full> <uni-card :is-shadow="false" is-full>
<text class="uni-h6">uni-forms 组件一般由输入框、选择器、单选框、多选框等控件组成，用以收集、校验、提交数据。</text> <text class="uni-h6">uni-forms 组件一般由输入框、选择器、单选框、多选框等控件组成，用以收集、校验、提交数据。</text>
</uni-card> </uni-card>
<uni-section title="基本用法" type="line"> <uni-section title="基本用法" type="line">
<view class="example"> <view class="example">
<!-- 基础用法，不包含校验规则 --> <!-- 基础用法，不包含校验规则 -->
...@@ -856,8 +856,8 @@ this.$refs.form.clearValidate(['name', 'email']) ...@@ -856,8 +856,8 @@ this.$refs.form.clearValidate(['name', 'email'])
</uni-forms-item> </uni-forms-item>
</uni-forms> </uni-forms>
</view> </view>
</uni-section> </uni-section>
<uni-section title="对齐方式" type="line"> <uni-section title="对齐方式" type="line">
<view class="example"> <view class="example">
<view class="segmented-control"> <view class="segmented-control">
...@@ -874,8 +874,8 @@ this.$refs.form.clearValidate(['name', 'email']) ...@@ -874,8 +874,8 @@ this.$refs.form.clearValidate(['name', 'email'])
</uni-forms-item> </uni-forms-item>
</uni-forms> </uni-forms>
</view> </view>
</uni-section> </uni-section>
<uni-section title="表单校验" type="line"> <uni-section title="表单校验" type="line">
<view class="example"> <view class="example">
<!-- 基础表单校验 --> <!-- 基础表单校验 -->
...@@ -892,8 +892,8 @@ this.$refs.form.clearValidate(['name', 'email']) ...@@ -892,8 +892,8 @@ this.$refs.form.clearValidate(['name', 'email'])
</uni-forms> </uni-forms>
<button type="primary" @click="submit('valiForm')">提交</button> <button type="primary" @click="submit('valiForm')">提交</button>
</view> </view>
</uni-section> </uni-section>
<uni-section title="自定义校验规则" type="line"> <uni-section title="自定义校验规则" type="line">
<view class="example"> <view class="example">
<!-- 自定义表单校验 --> <!-- 自定义表单校验 -->
...@@ -910,9 +910,9 @@ this.$refs.form.clearValidate(['name', 'email']) ...@@ -910,9 +910,9 @@ this.$refs.form.clearValidate(['name', 'email'])
</uni-forms> </uni-forms>
<button type="primary" @click="submit('customForm')">提交</button> <button type="primary" @click="submit('customForm')">提交</button>
</view> </view>
</uni-section> </uni-section>
<uni-section title="动态表单" type="line"> <uni-section title="动态表单" type="line">
<view class="example"> <view class="example">
<!-- 动态表单校验 --> <!-- 动态表单校验 -->
...@@ -933,219 +933,219 @@ this.$refs.form.clearValidate(['name', 'email']) ...@@ -933,219 +933,219 @@ this.$refs.form.clearValidate(['name', 'email'])
<button type="primary" size="mini" @click="submit('dynamicForm')">提交</button> <button type="primary" size="mini" @click="submit('dynamicForm')">提交</button>
</view> </view>
</view> </view>
</uni-section> </uni-section>
</view> </view>
</template> </template>
``` ```
> Script > Script
``` html ``` html
<script> <script>
export default { export default {
data() { data() {
return { return {
// 基础表单数据 // 基础表单数据
baseFormData: { baseFormData: {
name: '', name: '',
age: '', age: '',
introduction: '', introduction: '',
sex: 2, sex: 2,
hobby: [5], hobby: [5],
datetimesingle: 1627529992399 datetimesingle: 1627529992399
}, },
// 表单数据 // 表单数据
alignmentFormData: { alignmentFormData: {
name: '', name: '',
age: '', age: '',
}, },
// 单选数据源 // 单选数据源
sexs: [{ sexs: [{
text: '男', text: '男',
value: 0 value: 0
}, { }, {
text: '女', text: '女',
value: 1 value: 1
}, { }, {
text: '保密', text: '保密',
value: 2 value: 2
}], }],
// 多选数据源 // 多选数据源
hobbys: [{ hobbys: [{
text: '跑步', text: '跑步',
value: 0 value: 0
}, { }, {
text: '游泳', text: '游泳',
value: 1 value: 1
}, { }, {
text: '绘画', text: '绘画',
value: 2 value: 2
}, { }, {
text: '足球', text: '足球',
value: 3 value: 3
}, { }, {
text: '篮球', text: '篮球',
value: 4 value: 4
}, { }, {
text: '其他', text: '其他',
value: 5 value: 5
}], }],
// 分段器数据 // 分段器数据
current: 0, current: 0,
items: ['左对齐', '顶部对齐'], items: ['左对齐', '顶部对齐'],
// 校验表单数据 // 校验表单数据
valiFormData: { valiFormData: {
name: '', name: '',
age: '', age: '',
introduction: '', introduction: '',
}, },
// 校验规则 // 校验规则
rules: { rules: {
name: { name: {
rules: [{ rules: [{
required: true, required: true,
errorMessage: '姓名不能为空' errorMessage: '姓名不能为空'
}] }]
}, },
age: { age: {
rules: [{ rules: [{
required: true, required: true,
errorMessage: '年龄不能为空' errorMessage: '年龄不能为空'
}, { }, {
format: 'number', format: 'number',
errorMessage: '年龄只能输入数字' errorMessage: '年龄只能输入数字'
}] }]
} }
}, },
// 自定义表单数据 // 自定义表单数据
customFormData: { customFormData: {
name: '', name: '',
age: '', age: '',
hobby: [] hobby: []
}, },
// 自定义表单校验规则 // 自定义表单校验规则
customRules: { customRules: {
name: { name: {
rules: [{ rules: [{
required: true, required: true,
errorMessage: '姓名不能为空' errorMessage: '姓名不能为空'
}] }]
}, },
age: { age: {
rules: [{ rules: [{
required: true, required: true,
errorMessage: '年龄不能为空' errorMessage: '年龄不能为空'
}] }]
}, },
hobby: { hobby: {
rules: [{ rules: [{
format: 'array' format: 'array'
}, },
{ {
validateFunction: function(rule, value, data, callback) { validateFunction: function(rule, value, data, callback) {
if (value.length < 2) { if (value.length < 2) {
callback('请至少勾选两个兴趣爱好') callback('请至少勾选两个兴趣爱好')
} }
return true return true
} }
} }
] ]
} }
}, },
dynamicFormData: { dynamicFormData: {
email: '', email: '',
domains: {} domains: {}
}, },
dynamicLists: [], dynamicLists: [],
dynamicRules: { dynamicRules: {
email: { email: {
rules: [{ rules: [{
required: true, required: true,
errorMessage: '域名不能为空' errorMessage: '域名不能为空'
}, { }, {
format: 'email', format: 'email',
errorMessage: '域名格式错误' errorMessage: '域名格式错误'
}] }]
} }
} }
} }
}, },
computed: { computed: {
// 处理表单排列切换 // 处理表单排列切换
alignment() { alignment() {
if (this.current === 0) return 'left' if (this.current === 0) return 'left'
if (this.current === 1) return 'top' if (this.current === 1) return 'top'
return 'left' return 'left'
} }
}, },
onLoad() {}, onLoad() {},
onReady() { onReady() {
// 设置自定义表单校验规则，必须在节点渲染完毕后执行 // 设置自定义表单校验规则，必须在节点渲染完毕后执行
this.$refs.customForm.setRules(this.customRules) this.$refs.customForm.setRules(this.customRules)
}, },
methods: { methods: {
onClickItem(e) { onClickItem(e) {
console.log(e); console.log(e);
this.current = e.currentIndex this.current = e.currentIndex
}, },
add() { add() {
this.dynamicLists.push({ this.dynamicLists.push({
label: '域名', label: '域名',
rules: [{ rules: [{
'required': true, 'required': true,
errorMessage: '域名项必填' errorMessage: '域名项必填'
}], }],
id: Date.now() id: Date.now()
}) })
}, },
del(id) { del(id) {
let index = this.dynamicLists.findIndex(v => v.id === id) let index = this.dynamicLists.findIndex(v => v.id === id)
this.dynamicLists.splice(index, 1) this.dynamicLists.splice(index, 1)
}, },
submit(ref) { submit(ref) {
this.$refs[ref].validate().then(res => { this.$refs[ref].validate().then(res => {
console.log('success', res); console.log('success', res);
uni.showToast({ uni.showToast({
title: `校验通过` title: `校验通过`
}) })
}).catch(err => { }).catch(err => {
console.log('err', err); console.log('err', err);
}) })
}, },
} }
} }
</script> </script>
``` ```
> Style > Style
``` html ``` html
<style lang="scss"> <style lang="scss">
.example { .example {
padding: 15px; padding: 15px;
background-color: #fff; background-color: #fff;
} }
.segmented-control { .segmented-control {
margin-bottom: 15px; margin-bottom: 15px;
} }
.button-group { .button-group {
margin-top: 15px; margin-top: 15px;
display: flex; display: flex;
justify-content: space-around; justify-content: space-around;
} }
.form-item { .form-item {
display: flex; display: flex;
align-items: center; align-items: center;
} }
.button { .button {
display: flex; display: flex;
align-items: center; align-items: center;
height: 35px; height: 35px;
margin-left: 10px; margin-left: 10px;
} }
</style> </style>
``` ```
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或