完整的 uniapp 表单验证 案例

<template>
	<view class="inputBox">
		<uni-forms ref="form" :modelValue="personnel" :rules="rules">
			<uni-forms-item label="姓名" name="name" required>
				<uni-easyinput type="text" v-model="personnel.name" placeholder="请输入姓名" />
			</uni-forms-item>
			<uni-forms-item label="性别" name="sex" required>
				<!-- multiple y有这个属性是多选 没有单选 -->
				<uni-data-checkbox v-model="personnel.sex" :localdata="sexData" @change="handleSexValue" />
			</uni-forms-item>
			<uni-forms-item label="手机号" name="phone" required>
				<uni-easyinput type="text" v-model="personnel.phone" placeholder="请输入手机号" />
			</uni-forms-item>
			<uni-forms-item label="紧急联系方式" name="emergencyContact" required>
				<uni-easyinput type="text" v-model="personnel.emergencyContact" placeholder="请输入紧急联系" />
			</uni-forms-item>
			<uni-forms-item label="身份证号" name="idNo" required>
				<uni-easyinput type="text" v-model="personnel.idNo" placeholder="请输入身份证号" />
			</uni-forms-item>
		</uni-forms>
		<button type="primary" :loading="loading" class="submins" @click="submitForm">提交</button>
		</form>
	</view>
</template>

<script>
	import {
		getteacher
	} from '@/api/index.js';
	export default {
		data() {
			return {
				loading: false,
				tabList: [],
				token: '',
				name: '',
				hobby: '男',
				sexData: [{
						value: 1,
						text: "男",
					},
					{
						value: 2,
						text: "女",
					},
				],
				hbData: [{
						value: 1,
						text: "是",
					},
					{
						value: 2,
						text: "否",
					},
				],
				personnel: {
					userId: uni.getStorageSync('loginData').user_id,
					type: 2,
					status: 1,
					tenantId: '000000',
					pictureUrl: '',
					name: '',
					sex: '',
					age: '',
					companyId: '',
					countCourse: '',
					emergencyContact: '',
					idNo: '',
					idNumber: '',
					isBlacklist: '',
					permanentAddress: '',
					permanentResidenceAddress: '',
					phone: '',
					pictureUrl: '',
					remark: '',
					qualificationCertificateUrl: '',
					registrationDate: '',
					reverseSideOfIdPhoto: '',
					frontOfIdPhoto: '',
					subjectLabels: ''
				},
				rules: {
					// 对name字段进行必填验证
					name: {
						rules: [{
								required: true,
								errorMessage: '请输入姓名',
							},
							// {
							// 	minLength: 3,
							// 	maxLength: 5,
							// 	errorMessage: '姓名长度在 {minLength} 到 {maxLength} 个字符',
							// }
						]
					},
					age: {
						rules: [{
							required: true,
							errorMessage: '请输入年龄',
						}]
					},
					sex: {
						rules: [{
							required: true,
							errorMessage: '请选择性别',
						}]
					},
					phone: {
						rules: [{
							required: true,
							errorMessage: '请输入手机号',
						}, {
							validateFunction: function(rule, value, data, callback) {
								let iphoneReg = /^1[0-9]{10}$/
								if (!iphoneReg.test(value)) {
									callback('手机号码格式不正确，请重新填写')
								}
								return true
							}
						}]
					},
					emergencyContact: {
						rules: [{
							required: true,
							errorMessage: '请输入联系方式',
						}]
					},
					idNo: {
						rules: [{
							required: true,
							errorMessage: '请输入身份号',
						}, {
							validateFunction: function(rule, value, data, callback) {
								let iphoneReg = /^\d+$/
								if (!iphoneReg.test(value)) {
									callback('身份证号格式不正确，请重新填写')
								}
								return true
							}
						}]
					},
				}

			}
		},
		created() {
			console.log("用户信息", uni.getStorageSync('loginData'))
			console.log("存3454546储数据", window.localStorage.getItem('token'))
			// window.localStorage.getItem('token', token)
			this.token = window.localStorage.getItem('token')

		},
		computed: {

		},
		methods: {
			// 性别
			handleSexValue(e) {
				console.log("数据", e)
				this.personnel.sex = e.detail.value;
			},
			// 黑白名单
			hbDataFn(e) {
				this.personnel.isBlacklist = e.detail.value;
			},
			// 提交按钮
			submitForm() {
				this.$refs.form.validate().then(res => {
					console.log('表单数据信息：', res);
				}).catch(err => {
					console.log('表单错误信息：', err);
				})
			},
		}
	}
</script>