AnHanNET-UniAPP/member/profile/profile.vue

<template>
	<view class="container"> 
			<view class="example">
				<!-- 基础表单校验 -->
				<uni-forms ref="valiForm" :rules="rules" :modelValue="formData">

					<uni-forms-item label="签名">
						<uni-easyinput type="textarea" :disabled="isDisabled" v-model="formData.introduction" placeholder="请输入自我介绍" />
					</uni-forms-item>
					<uni-forms-item label="昵称" name="name">
						<uni-easyinput v-model="formData.name" placeholder="请输入姓名"  :disabled="isDisabled"/>
					</uni-forms-item>
					<uni-forms-item label="性别">
						<uni-data-checkbox v-model="formData.sex" :localdata="sexs" :disabled="isDisabled" />
					</uni-forms-item>
					<uni-forms-item label="生日">
						<uni-datetime-picker type="date" return-type="timestamp" v-model="formData.datetimesingle" :disabled="isDisabled" />
					</uni-forms-item>
					<uni-forms-item label="身高" name="name">
						<uni-easyinput v-model="formData.name" type="number" placeholder="请输入姓名"  :disabled="isDisabled"/>
					</uni-forms-item>

					<uni-forms-item label="所在地">
						<uni-data-picker popup-title="请选择班级" :readonly="isDisabled"></uni-data-picker>
					</uni-forms-item>
					<uni-forms-item label="学历">
						<uni-data-select v-model="formData.hobby" :localdata="educations" :disabled="isDisabled"></uni-data-select>
					</uni-forms-item>
					<uni-forms-item label="职业">
						<uni-data-picker popup-title="请选择班级" :readonly="isDisabled"></uni-data-picker>
					</uni-forms-item>
					<uni-forms-item label="企业">
						<uni-easyinput v-model="formData.name" type="number" placeholder="请输入姓名" :disabled="isDisabled" />
					</uni-forms-item>
					<uni-forms-item label="家乡">
						<uni-data-picker popup-title="请选择班级"  :readonly="isDisabled"></uni-data-picker>
					</uni-forms-item>
					<uni-forms-item label="自我介绍" name="introduction">
						<uni-easyinput type="textarea" v-model="formData.introduction" placeholder="请输入自我介绍" :disabled="isDisabled" />
					</uni-forms-item>


					<uni-forms-item label="月收入">
						<uni-data-select v-model="formData.hobby" :localdata="educations" :disabled="isDisabled"></uni-data-select>
					</uni-forms-item>
					<uni-forms-item label="婚姻">
						<uni-data-select v-model="formData.hobby" :localdata="educations" :disabled="isDisabled"></uni-data-select>
					</uni-forms-item>
					<uni-forms-item label="房产">
						<uni-data-picker popup-title="请选择班级" :readonly="isDisabled"></uni-data-picker>
					</uni-forms-item>



					<uni-forms-item label="所在地">
						<uni-data-picker popup-title="请选择班级" :readonly="isDisabled"></uni-data-picker>
					</uni-forms-item>
					<uni-forms-item label="年龄">
						<uni-data-picker popup-title="请选择班级" :readonly="isDisabled"></uni-data-picker>
					</uni-forms-item>
					<uni-forms-item label="身高">
						<uni-data-picker popup-title="请选择班级" :readonly="isDisabled"></uni-data-picker>
					</uni-forms-item>
					<uni-forms-item label="学历">
						<uni-data-select v-model="formData.hobby" :localdata="educations" :disabled="isDisabled"></uni-data-select>
					</uni-forms-item>
				</uni-forms>
				<button type="primary" @click="submit('valiForm')">提交</button>
			</view>
	 


	</view>
</template>
<script>
	export default {
		data() {
			return {
				isDisabled:true,
				// 基础表单数据
				formData: {
					name: '',
					age: '',
					introduction: '',
					sex: 2,
					hobby: [5],
					datetimesingle: 1627529992399
				},


				educations: [{
						value: 0,
						text: "篮球"
					},
					{
						value: 1,
						text: "足球"
					},
					{
						value: 2,
						text: "游泳"
					},
				],
				// 单选数据源
				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
								}
							}
						]
					}

				}
			}
		},
		onLoad() {},
		onReady() {
			// 设置自定义表单校验规则，必须在节点渲染完毕后执行
			//this.$refs.customForm.setRules(this.customRules)
		},
		methods: {
			onClickItem(e) {
				console.log(e);
				this.current = e.currentIndex
			},
			submit(ref) {
				this.$refs[ref].validate().then(res => {
					console.log('success', res);
					uni.showToast({
						title: `校验通过`
					})
				}).catch(err => {
					console.log('err', err);
				})
			},
		}
	}
</script>
<style lang="scss">
	.container{
		background-color: transparent;
	}
	.example {
		padding: 15px;
		background-color: #fff;
		background-color: transparent;
	}

	.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;
	}

	.uni-forms-item button {
		line-height: 36rpx;
	}

	.uni-forms-item {
		position: relative;
		display: flex;
		margin-bottom: 10rpx;
	}
</style>