docs: Update uni-forms.md

docs/component/uniui/uni-forms.md

@@ -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="name">
+			<uni-forms-item label="年龄" name="age">
 				<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>
 
 ```