<template>
	<view>
		<uv-form labelPosition="left" :model="model1" :rules="rules" ref="form">
			<uv-form-item label="姓名" prop="userInfo.name" borderBottom>
				<uv-input v-model="model1.userInfo.name" border="none">
				</uv-input>
			</uv-form-item>
			<uv-form-item label="性别" prop="userInfo.sex" borderBottom @click="showSexSelect">
				<uv-input v-model="model1.userInfo.sex" disabled disabledColor="#ffffff" placeholder="请选择性别" border="none">
				</uv-input>
				<template v-slot:right>
					<uv-icon name="arrow-right"></uv-icon>
				</template>
			</uv-form-item>
			<uv-button type="primary" text="提交" customStyle="margin-top: 10px" @click="submit"></uv-button>
			<uv-button type="error" text="重置" customStyle="margin-top: 10px" @click="reset"></uv-button>
		</uv-form>
		<uv-action-sheet ref="sexSelect" :actions="actions" title="请选择性别" description="如果选择保密会报错" @select="sexSelect">
		</uv-action-sheet>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				model1: {
					userInfo: {
						name: 'uv-ui',
						sex: '',
					},
				},
				actions: [{
					name: '男',
				}, {
					name: '女',
				}, {
					name: '保密',
				}, ],
				rules: {
					'userInfo.name': {
						type: 'string',
						required: true,
						message: '请填写姓名',
						trigger: ['blur', 'change']
					},
					'userInfo.sex': {
						type: 'string',
						max: 1,
						required: true,
						message: '请选择男或女',
						trigger: ['blur', 'change']
					},
				},
				radio: '',
				switchVal: false
			}
		},
		methods: {
			// 提交
			submit() {
				// 如果有错误，会在catch中返回报错信息数组，校验通过则在then中返回true
				this.$refs.form.validate().then(res => {
					uni.showToast({
						icon: 'success',
						title: '校验通过'
					})
				}).catch(errors => {
					uni.showToast({
						icon: 'error',
						title: '校验失败'
					})
				})
			},
			// 重置
			reset() {
				this.$refs.form.resetFields();
				this.$refs.form.clearValidate();
			},
			// 性别选择
			showSexSelect() {
				this.$refs.sexSelect.open();
				this.hideKeyboard();
			},
			// 性别选择返回结果
			sexSelect(e) {
				this.model1.userInfo.sex = e.name;
				// 对部分表单字段进行校验
				this.$refs.form.validateField('userInfo.sex',err=>{
					// 处理错误后的逻辑
				})
			},
			hideKeyboard() {
				uni.hideKeyboard()
			}
		}
	}
</script>

<template>
	<view>
		<uv-form :model="form" :rules="rules" ref="form">
			<uv-form-item label="电话" prop="mobile">
				<uv-input v-model="form.mobile" placeholder="请输入电话" />
			</uv-form-item>
		</uv-form>
		<uv-button @click="submit">提交</uv-button>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				form: {
					mobile: ''
				},
				rules: {
					mobile: [{
						required: true,
						message: '此为必填字段',
						// blur和change事件触发检验
						trigger: ['blur', 'change']
					}, {
						// 自定义验证函数，见上说明，注意这里面的逻辑不能出现语法报错，否则可能导致不验证
						validator: (rule, value, callback) => {
							// 此处业务逻辑省略
							// 返回true表校验通过，返回false表示不通过
							return true;
						},
						message: '电话号码格式错误',
						trigger: ['blur']
					}]
				}
			};
		},
		onReady() {
			this.$refs.form.setRules(this.rules);
		},
		methods: {
			submit() {
				this.$refs.form.validate().then(res => {
					uni.showToast({
						icon: 'success',
						title: '校验通过'
					})
				}).catch(errors => {
					uni.showToast({
						icon: 'error',
						title: '校验失败'
					})
				})
			}
		},
	};
</script>

<template>
	<view style="padding: 30rpx;">
		<uv-form :model="form" :rules="rules" ref="form">
			<uv-form-item label="姓名" prop="username">
				<uv-input v-model="form.username" placeholder="请输入姓名" />
			</uv-form-item>
			<uv-form-item label="照片" prop="pics">
				<uv-upload 
					:fileList="fileList" 
					name="1" 
					multiple 
					:maxCount="9" 
					@afterRead="afterRead" 
					@delete="deletePic" 
					:previewFullImage="true"
				></uv-upload>
			</uv-form-item>
		</uv-form>
		<uv-button @click="submit">提交</uv-button>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				fileList: [],
				form: {
					username: '',
					pics: []
				},
				rules: {
					username: [{
						required: true,
						message: '此为必填字段',
						trigger: ['blur', 'change']
					}],
					pics: {
						type: 'array',
						required: true,
						message: '请上传照片',
						trigger: ['blur', 'change']
					}
				}
			};
		},
		methods: {
			submit() {
				this.$refs.form.validate().then(res => {
					uni.showToast({
						icon: 'success',
						title: '校验通过'
					})
				}).catch(errors => {
					uni.showToast({
						icon: 'error',
						title: '校验失败'
					})
				})
			},
			afterRead(e) {
				// 这里直接模拟上传成功，这里的真实逻辑参考uv-upload组件示例
				setTimeout(() => {
					this.fileList = [{
						url: 'https://via.placeholder.com/100x100.png/3c9cff'
					}, {
						url: 'https://via.placeholder.com/100x100.png/ff0000'
					}]
					this.form.pics = this.fileList;
					this.$refs.form.validateField('pics', err => {
						// 处理错误后的逻辑
					})
				})
			},
			deletePic(e) {
				this.fileList.splice(e.index, 1);
				this.$refs.form.validateField('pics', err => {
					// 处理错误后的逻辑
				})
			}
		}
	}
</script>

<template>
	<view>
		<uv-form labelPosition="left" :model="model" :rules="rules" ref="form">
			<template v-for="(item,index) in list">
				<uv-form-item :label="item.label" :prop="item.name" borderBottom>
					<uv-input v-model="model[item.name]" border="none">
					</uv-input>
				</uv-form-item>
			</template>
			<uv-button type="info" text="添加字段" customStyle="margin-top: 10px" @click="add"></uv-button>
			<uv-button type="primary" text="提交" customStyle="margin-top: 10px" @click="submit"></uv-button>
			<uv-button type="error" text="重置" customStyle="margin-top: 10px" @click="reset"></uv-button>
		</uv-form>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				model: {},
				list: [],
				rules: {}
			}
		},
		onLoad() {
			const data = this.getData();
			data.forEach(item => {
				this.model[item.name] = '';
				this.rules[item.name] = item.rules;
			})
			this.list = data;
		},
		methods: {
			add() {
				const addData = {
					name: 'demo',
					label: '添加的项',
					rules: {
						type: 'string',
						required: true,
						message: '请填写添加项',
						trigger: ['blur', 'change']
					}
				}
				this.model[addData.name] = '';
				this.rules[addData.name] = addData.rules;
				this.list.push(addData);
			},
			// 模拟请求后端的数据
			getData() {
				return [{
					name: 'name',
					label: '姓名',
					rules: {
						type: 'string',
						required: true,
						message: '请填写姓名',
						trigger: ['blur', 'change']
					}
				}, {
					name: 'age',
					label: '年龄',
					rules: {
						type: 'string',
						required: true,
						message: '请填写年龄',
						trigger: ['blur', 'change']
					}
				}, {
					name: 'like',
					label: '爱好',
					rules: {
						type: 'string',
						required: true,
						message: '请填写兴趣爱好',
						trigger: ['blur', 'change']
					}
				}]
			},
			// 提交
			submit() {
				this.$refs.form.validate().then(res => {
					uni.showToast({
						icon: 'success',
						title: '校验通过'
					})
				}).catch(errors => {
					uni.showToast({
						icon: 'error',
						title: '校验失败'
					})
				})
			},
			// 重置
			reset() {
				this.$refs.form.resetFields();
				this.$refs.form.clearValidate();
			},
			hideKeyboard() {
				uni.hideKeyboard()
			}
		}
	}
</script>

<template>
	<uv-form :errorType="errorType">
		......
	</uv-form>
</template>

<script>
export default {
	data() {
		return {
			// 文字提示
			errorType: 'message',
			// 不提示
			// errorType: 'none',
			// 下划线提示，要求给form-item设置了borderBottom=true才有效
			// errorType: 'border-bottom'
		}
	}
}
</script>