uniapp学习

1 简单的表单校验

<!--uniapp:参考模板和字段生成页面
字段stuNumber 输入框   学号stuName 输入框 学生姓名teacher 输入框 辅导员submitDate 日期选择  填报日期morningTemperature 输入框（数字校验一位小数） 早上体温noonTemperature 输入框（数字校验一位小数） 中午体温stuState  下拉列表（0健康、1确诊、2疑似、3隔离） 学生状态discomfortSymptoms 文本框 不适状况模板
-->
<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>