<template>
	<view class="content">
		<u-form :model="form" ref="uForm" :error-type="['toast']">
			<u-form-item label="姓名" required prop="name">
				<u-input placeholder="请输入姓名" v-model="form.name" />
			</u-form-item>
			<u-form-item label="电话" required prop="mobile">
				<u-input placeholder="请输入电话" type="number" v-model="form.mobile" />
			</u-form-item>
			<u-form-item label="地址" required prop="address">
				<u-input placeholder="请输入收货地址(省+市+区+详细地址)" v-model="form.address" />
			</u-form-item>
		</u-form>
		<view class="buttons">
			<u-button type="primary" @click="submit">提交</u-button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				form: {
					name: '',
					mobile: '',
					address: ''
				},
				rules: {
					name: [
						{ 
							required: true, 
							message: '请输入姓名', 
							// 可以单个或者同时写两个触发验证方式 
							trigger: ['change','blur'],
						}
					],
					mobile: [
						{ 
							required: true, 
							message: '请输入电话', 
							// 可以单个或者同时写两个触发验证方式 
							trigger: ['change','blur'],
						}
					],
					address: [
						{
							required: true, 
							min: 100, 
							message: '地址不能少于100个字', 
							trigger: ['change','blur']
						}
					]
				}
			};
		},
		methods: {
			submit() {
				this.$refs.uForm.validate(valid => {
					if (valid) {
						console.log('验证通过');
					} else {
						console.log('验证失败');
					}
				});
			}
		},
		// 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		}
	};
</script>

<style lang="scss">
	.content{
		padding: 0 50upx;
		background: #FFFFFF;
		width: 100%;
		.buttons{
			padding: 80upx 100upx;
		}
	}
</style>
