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.namethis.$refs.uForm.validateField('userInfo.sex')},citySelect(e) {console.log(e)this.model1.userInfo.city = e.namethis.$refs.uForm.validateField('userInfo.city')},// 城市选择器initCityData() {// 遍历城市jscityData.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.valuethis.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;}