uniapp 表单使用Uview校验 包括城市选择器

<view>
			<!-- 注意，如果需要兼容微信小程序，最好通过setRules方法设置rules规则 -->
			<u--form labelPosition="left" :model="model1" :rules="rules" ref="uForm" labelWidth="174">

				<u-form-item label="身份选择" prop="userInfo.sex" borderBottom @click="showSex = true; " ref="item1">
					<u--input v-model="model1.userInfo.sex" disabled disabledColor="#ffffff" placeholder="请选择身份"
						border="none"></u--input>
					<u-icon slot="right" name="arrow-right"></u-icon>
				</u-form-item>
				<u-form-item label="真实姓名" prop="userInfo.name" borderBottom ref="item1">
					<u--input v-model="model1.userInfo.name" border="none" placeholder="请输入您的姓名"></u--input>
				</u-form-item>
				<u-form-item label="所在城市" prop="userInfo.city" borderBottom @click="show1 = true; " ref="item1">
					<u--input v-model="model1.userInfo.city" disabled disabledColor="#ffffff" placeholder="请选择所在城市"
						border="none"></u--input>
					<u-icon slot="right" name="arrow-right"></u-icon>
				</u-form-item>
				<u-form-item label="执业机构" prop="userInfo.jigou" borderBottom ref="item1">
					<u--input v-model="model1.userInfo.jigou" border="none" placeholder="请输入您的所在机构"></u--input>
				</u-form-item>
			</u--form>
			<u-action-sheet :show="showSex" :actions="actions" @close="showSex = false"
				@select="sexSelect">
			</u-action-sheet>
		
			<view class="">
				<u-picker :show="show1" ref="uPicker" :columns="cityList" @confirm="cityConfirm" @cancel="cancel()" itemHeight="70"
					@change="changeHandler"></u-picker>
			</view>
		</view>

<script>
	import cityData from '@/utils/city.js'
	export default {
		data() {
			return {
				showSex: false,
				model1: {
					userInfo: {
						name: '',
						sex: '',
						city: '',
						jigou:''
					},
				},
				actions: [{
						name: '医生',
					},
					{
						name: '员工',
					},

				],
				cityList: [],
				cityLevel1: [],
				cityLevel2: [],
				cityLevel3: [],
				areaname:'',
				show1: false,
				rules: {
					'userInfo.name': {
						type: 'string',
						required: true,
						message: '请填写姓名',
						trigger: ['blur', 'change']
					},
					'userInfo.sex': {
						type: 'string',
						max: 2,
						required: true,
						message: '请选择身份',
						trigger: ['blur', 'change']
					},
					'userInfo.jigou': {
						type: 'string',
						required: true,
						message: '请填写机构',
						trigger: ['blur', 'change']
					},
				},
				radio: '',
				switchVal: false
			};
		},
		onReady() {
			//如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
			this.$refs.uForm.setRules(this.rules)
		},
		onLoad() {
			// 城市选择器初始化
			this.initCityData();
		},
		methods: {
			sexSelect(e) {
				console.log(e)
				this.model1.userInfo.sex = e.name
				this.$refs.uForm.validateField('userInfo.sex')
			},
			citySelect(e) {
				console.log(e)
				this.model1.userInfo.city = e.name
				this.$refs.uForm.validateField('userInfo.city')
			},
			// 城市选择器
			initCityData() {
				// 遍历城市js
				cityData.forEach((item1, index1) => {
					let temp2 = [];
					this.cityLevel1.push(item1.provinceName);
					let temp4 = [];
					let temp3 = [];
					// 遍历市
					item1.cities.forEach((item2, index2) => {
						temp2.push(item2.cityName);
						// 遍历区
						item2.counties.forEach((item3, index3) => {
							temp3.push(item3.countyName);
						})
						temp4[index2] = temp3;
						temp3 = [];
					})
					this.cityLevel3[index1] = temp4;
					this.cityLevel2[index1] = temp2;
				})
				// 选择器默认城市
				this.cityList.push(this.cityLevel1, this.cityLevel2[0], this.cityLevel3[0][0]);
				console.log(this.cityList)
			}, // 选中时执行
			changeHandler(e) {
				const {
					columnIndex,
					index,
					indexs,
					value,
					values,
					// 微信小程序无法将picker实例传出来，只能通过ref操作
					picker = this.$refs.uPicker
				} = e;
				if (columnIndex === 0) { // 选择第一列数据时
					// 设置第二列关联数据
					picker.setColumnValues(1, this.cityLevel2[index]);
					// 设置第三列关联数据
					picker.setColumnValues(2, this.cityLevel3[index][columnIndex]);
				} else if (columnIndex === 1) { // 选择第二列数据时
					// 设置第三列关联数据
					picker.setColumnValues(2, this.cityLevel3[indexs[0]][index]);
				}
			},
			// 单击确认按钮时执行
			cityConfirm(e) {
				// 输出数组 [省, 市, 区]
				console.log(e.value);
				this.areaname = e.value
				this.cityName = e.value.join("-");
				// 隐藏城市选择器
				console.log(this.cityName);
				this.show1 = false;
				this.model1.userInfo.city = this.cityName
			},
			cancel() {
				this.show1 = false
			},
		},
	}
</script>

	/deep/ .u-popup__content {
		width: 100%;
		height: 800rpx;
	}

	/deep/.u-icon__icon {
		color: #1FCFC9 !important;
		font-size: 32rpx !important;
	}

	/deep/ .u-action-sheet__item-wrap button {
		background: #fff !important;
	}

	/deep/ .u-action-sheet__item-wrap button::after {
		border: none;
	}

	/deep/.u-form {
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 690rpx;
		margin: auto;
		margin-top: 48rpx;

		.u-form-item {
			width: 100%;
		}

		
	}
	/deep/ .u-form-item__body {
		width: 100%;
		height: 120rpx !important;
		display: flex;
		align-items: center;
		justify-content: space-between;
	
		
	
	}
	/deep/ .u-input__content__field-wrapper__field {
		color: #333 !important;
		font-family: YouSheShaYuFeiTeJianKangTi !important;
		font-size: 28rpx !important;
	}
		/deep/ .u-form-item__body__left__content__label {
			color: #333 !important;
			font-family: YouSheShaYuFeiTeJianKangTi !important;
			font-size: 28rpx !important;
		}

city.js资源已上传