uniapp学习

1 简单的表单校验

<template>
	<view class="container">
			<view class="example">
				<uni-forms ref="valiForm" :rules="rules" :modelValue="valiFormData">
					<uni-forms-item label="姓名" required name="name">
						<uni-easyinput v-model="valiFormData.name" placeholder="请输入姓名" />
					uni-forms-item>
					<uni-forms-item label="性别" name="sex">
						<uni-data-select v-model="valiFormData.sex" :localdata="arraySex"
							@change="changeSex">uni-data-select>
					uni-forms-item>
					<uni-forms-item label="出生日期" name="birthday">
						<uni-datetime-picker type="datetime" v-model="valiFormData.birthday" @change="changeBirthday" />
					uni-forms-item>
					<uni-forms-item label="自我介绍" name="introduction">
						<uni-easyinput type="textarea" v-model="valiFormData.introduction" placeholder="请输入自我介绍" />
					uni-forms-item>
				uni-forms>
				<button type="primary" @click="submit('valiForm')">提交button>
			view>
		uni-section>
	view>
template>
<script>
	export default {
		data() {
			return {
				valiFormData: {
					name: '',
					birthday: '',
					sex: 2,
					introduction: '',
				},
				arraySex: [{
						value: 0,
						text: "男"
					},
					{
						value: 1,
						text: "女"
					},
					{
						value: 2,
						text: "未知"
					},
				],
				rules: {
					name: {
						rules: [{
							required: true,
							errorMessage: '姓名不能为空'
						}]
					}
				},
			}
		},

		methods: {


			changeBirthday(e) {
				this.valiFormData.birthday = e
			},

			changeSex(e) {
				this.valiFormData.sex = this.arraySex[e].text
			},
			submit(ref) {
				this.$refs[ref].validate().then(res => {}).catch(err => {
					console.log('err', err);
				})
			},
		}
	}
script>
<style lang="scss">
	.example {
		padding: 15px;
		background-color: #fff;
	}
style>