小莫唐尼

小莫唐尼

uView ui表单支持深对象和数组校验(记录)

1075
2022-05-12
uView ui表单支持深对象和数组校验(记录)

由于uView ui 1.0版本在设计之初,没有考虑深度对象和数组的校验,且现在刚好遇到需要该场景,故做以下记录:

第一步:修改组件源码

1. 在props中增加以下代码:
props:{
    target:{
        type:Object
     },
     // 省略其他代码...
}
2. 在methods新增一个方法,方法名为getFieldValue
getFieldValue(){
	const fileds =this.prop.split('.')
	const value = fileds.reduce((pre,cur)=>{
		return pre && pre[cur]
	},this.parent.model)
	return value
},
3. 找到u-form-item组件源码,大概在 276行的位置,注释掉 this.fieldValue = this.parent.model[this.prop]; 改为以下代码:
validation(trigger, callback = () => {}) {
	// 检验之间,先获取需要校验的值
	// this.fieldValue = this.parent.model[this.prop];  
	if (this.target) {
		this.fieldValue = this.target[this.prop];
	} else {
		this.fieldValue = this.getFieldValue()
		// this.fieldValue = this.parent.model[this.prop];
	}
	// 省略其他源码...
}

第二步、实现校验

针对于嵌套对象校验,代码如下:
<u-form :model="form" ref="uForm" :errorType="['toast', 'message']" label-width="120rpx">
	<u-form-item label="用户名" prop="username" required><u-input v-model="form.username" /></u-form-item>
	<u-form-item label="简介" prop="intro" required><u-input v-model="form.intro" /></u-form-item>
	<u-form-item label="欢迎" prop="obj.hello" required><u-input v-model="form.obj.hello" /></u-form-item> 
</u-form>
data() {
	return {
		form: {
			username: '',
			intro: '',
			obj: {
				hello: ''
            }
		}, 
        rules: {
			username: [
				{
					required: true,
					message: '请输入用户名',
					// 可以单个或者同时写两个触发验证方式
					trigger: ['change', 'blur']
				}
			],   
			'obj.hello': [
				{
					required: true,
					message: '请输入欢迎信息',
					// 可以单个或者同时写两个触发验证方式
					trigger: ['change', 'blur']
				}
			]
		}
	},
 },

针对于数组对象校验,代码如下:
<u-form :model="form" ref="uForm" :errorType="['toast', 'message']" label-width="120rpx">
	<u-form-item label="用户名" prop="username" required><u-input v-model="form.username" /></u-form-item>
	<view class="list" v-for="(item, index) in form.list" :key="index">
		<view class="" style="margin-top: 30rpx;margin-bottom: 15rpx;font-weight: bold;color: #ff80ab;">
			第{{ index + 1 }}项
		</view>
      	<!--注意:此处需要多加target="item" -->
		<u-form-item label="姓名" prop="name" :target="item" required><u-input v-model="item.name" /></u-form-item>
		<u-form-item label="描述" prop="desc" :target="item" required><u-input v-model="item.desc" /></u-form-item>
	</view>
</u-form>
data() {
	return {
		form: {
			username: '',
			intro: '',
			list: [
				{
					name: '',
					desc: ''
				},
				{
					name: '',
					desc: ''
				}
			]
		}, 
        rules: {
			username: [
				{
					required: true,
					message: '请输入用户名',
					// 可以单个或者同时写两个触发验证方式
					trigger: ['change', 'blur']
				}
			],   
			name: [
				{
					required: true,
					message: '请输入姓名',
					// 可以单个或者同时写两个触发验证方式
					trigger: ['change', 'blur']
				}
			]
		}
	},
 },

至此,对于深对象和数组的校验就已经可以支持了,如果有什么不对的地方或者更好的方法,欢迎大佬评论留言指出。