1.  如果参数不是很了解请移步  vView 官方文档地址 ,每次写页面都重新写很麻烦，记录下，下次直接抄，改改参数可以用

效果图

2.代码块

<template>
	<view>
		<u-form :model="form" ref="uForm" class="centent" label-width="150rpx">
			<u-form-item label="姓名:" prop="userName" :required="true">
				<u-input v-model="form.userName" />
			</u-form-item>
			<u-form-item label="开始日期:" prop="workStart" :required="true">
				<u-input v-model="form.workStart" />
			</u-form-item>
			<u-form-item label="结束日期:" prop="workEnd" :required="true">
				<u-input v-model="form.workEnd" />
			</u-form-item>
			<u-form-item label="工作内容:" prop="content" :required="true">
				<u-input v-model="form.content" type='textarea' height='400' :border="true" />
			</u-form-item>
			<u-form-item label="完成情况:" prop="completion" :required="true">
				<u-input v-model="form.completion" />
			</u-form-item>
			<u-form-item label="备注:">
				<u-input v-model="form.remarks" :border="true" height='200' />
			</u-form-item>
		</u-form>
		<view style="margin:auto ;text-align: center;padding:0 10%;">
			<u-button @click="submit" type="primary" :ripple="true" ripple-bg-color="#909399"
				style="text-align: center;">提交</u-button>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				form: {
					userName: '',
					workStart: '',
					workEnd: '',
					content: '',
					completion: '',
					remarks: "",
				},
				rules: {
					workStart: [{
						required: true,
						message: '请输入开始时间',
						trigger: ['blur', 'change']
					}],
					workEnd: [{
						required: true,
						message: '请输入结束时间',
						trigger: ['blur', 'change']
					}],
					content: [{
						required: true,
						message: '请输入工作内容',
						trigger: ['blur', 'change']
					}],
					completion: [{
						required: true,
						message: '请输入工作完成情况',
						trigger: ['blur', 'change']
					}],

				}

			};
		},
		methods: {
			submit() {
				console.log('验证通过');
				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" scoped>
	.centent {
		padding: 10px;
	}
</style>

Form 表单 | uView - 多平台快速开发的UI框架 - uni-app UI框架uView UI，是uni-app生态最优秀的UI框架，全面的组件和便捷的工具会让您信手拈来，如鱼得水https://v1.uviewui.com/components/form.html