wit-uniapp/pages/my/Personalinformation/Informationmodification/Informationmodification.vue

<template>
	<view class="OutermostLayer">
	<view class="Personalinformationedit">

				<!-- 注意，如果需要兼容微信小程序，最好通过setRules方法设置rules规则 -->
				<u--form
						labelPosition="left"
						:model="model1"
						:rules="rules"
						ref="form1">
					<u-form-item
					labelWidth="120"				
							label="用户名:"
							prop="userInfo.name"
							borderBottom
							ref="item1"				>
						<u--input
								v-model="model1.userInfo.name"
								clearable
								border="none"
						></u--input>
					</u-form-item>
					<u-form-item
					labelWidth="120"				
							label="手机:"
							prop="userInfo.phone"
							borderBottom
							ref="item1"
					>
						<u--input
								v-model="model1.userInfo.phone"
								clearable
								border="none"
						></u--input>
					</u-form-item>
					<u-form-item
					labelWidth="120"				
							label="邮箱:"
							prop="userInfo.email"
							borderBottom
							ref="item1"
					>
						<u--input
								v-model="model1.userInfo.email"
								clearable
								border="none"
						></u--input>
					</u-form-item>										
					<u-form-item
							label="性别:"
								labelWidth="120"		
							prop="userInfo.sex"
							borderBottom
							@click="showSex = true; hideKeyboard()"
							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
					labelWidth="120"				
							label="地址:"
							prop="userInfo.address"
							borderBottom
							ref="item1"				>
						<u--input
								v-model="model1.userInfo.address"
								clearable
								border="none"
						></u--input>
					</u-form-item>
					<u-form-item
					labelWidth="120"				
							label="部门:"
							prop="userInfo.department"
							borderBottom
							ref="item1"				>
						<u--input
								v-model="model1.userInfo.department"
								clearable
								border="none"
						></u--input>
					</u-form-item>
					<u-form-item
					labelWidth="120"				
							label="职位:"
							prop="userInfo.position"
							borderBottom
							ref="item1"				>
						<u--input
								v-model="model1.userInfo.position"
								clearable
								border="none"
						></u--input>
					</u-form-item>
					
				</u--form>
				
				
				
				<u-action-sheet
						:show="showSex"
						:actions="actions"
						title="请选择性别"
						@close="showSex = false"
						@select="sexSelect"
				>
				</u-action-sheet>
				
				<view class="submitdata">
					<u-button  type="primary" @click="submit">提交</u-button>
				</view>
			</view>	
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
				showSex: false,
				model1: {
					userInfo: {
						name: '李伟',
						sex: '男',
						phone:'18326607835',
						email:'328319643@qq.com',
						address:'安徽省合肥市',
						department:'合肥传秀科技技术部',
						position:'前端工程师'
					},
				},
				actions: [
					{
					name: '男',
					},
					{
						name: '女',
					},
					{
						name: '保密',
					},
				],
				rules: {
					'userInfo.name': {
						type: 'string',
						required: true,
						message: '请填写姓名',
						trigger: ['blur', 'change']
					},
				'userInfo.email': [
							{
								required: true, 
								message: '请输入邮箱号',
								trigger: ['change','blur'],
							},
							{
								// 自定义验证函数，见上说明
								validator: (rule, value, callback) => {
									// 上面有说，返回true表示校验通过，返回false表示不通过
									// uni.$u.test.mobile()就是返回true或者false的
									return uni.$u.test.email(value);
								},
								message: '邮箱不正确',
								// 触发器可以同时用blur和change
								trigger: ['change','blur'],
							}
						],
						'userInfo.phone': [
									{
										required: true, 
										message: '请输入邮箱',
										trigger: ['change','blur'],
									},
									{
										// 自定义验证函数，见上说明
										validator: (rule, value, callback) => {
											// 上面有说，返回true表示校验通过，返回false表示不通过
											// uni.$u.test.mobile()就是返回true或者false的
											return uni.$u.test.mobile(value);
										},
										message: '手机号码不正确',
										// 触发器可以同时用blur和change
										trigger: ['change','blur'],
									}
								],
						
						
					'userInfo.sex': {
						type: 'string',
						max: 2,
						required: true,
						message: '请选择',
						trigger: ['blur', 'change']
					},
				},
				
			};
		},
		methods: {
			sexSelect(e) {
				this.model1.userInfo.sex = e.name
				this.$refs.form1.validateField('userInfo.sex')
			},
			submit() {
						this.$refs.form1.validate().then(res => {
							uni.$u.toast('校验通过')
						}).catch(errors => {
							uni.$u.toast('校验失败')
						})
					},
			
		},
		onReady() {
			//如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
	    	this.$refs.form1.setRules(this.rules)
	    },
	};
</script>

<style lang="scss">
.Personalinformationedit{
	padding: 30rpx;
	
}
.submitdata{
	margin-top: 40rpx;
}

</style>