uview下表单动态校验的问题

目录

  • 一、前言
  • 二、解决方案
      • 1、动态使用,v-for需要放在u-form下的view下面
      • 2、rules和表单model下面放置一个同名数组
      • 3、修改uview中的源码
      • 4、动态添加数据
  • 三、总结

一、前言

最近开发网格小程序,其中涉及到动态添加家属,对表单进行动态校验问题,但uview没办法实现,后面参照其他博客和自己的理解,终于解决了此问题。

动态表单效果图

二、解决方案

1、动态使用,v-for需要放在u-form下的view下面

uview下表单动态校验的问题_第1张图片

2、rules和表单model下面放置一个同名数组

uview下表单动态校验的问题_第2张图片

3、修改uview中的源码

在 validateField 方法中修改如下
源码:

// 属性链数组
const propertyChain = child.prop.split(".");
const propertyName =
	propertyChain[propertyChain.length - 1];

const rule = this.formRules[child.prop];
// 如果不存在对应的规则,直接返回,否则校验器会报错
if (!rule) return;
// rule规则可为数组形式,也可为对象形式,此处拼接成为数组
const rules = [].concat(rule);

修改后:

// 属性链数组
const propertyChain = child.prop.split(".");
const propertyName =
	propertyChain[propertyChain.length - 1];
//修改:将const改为let 
let rule = this.formRules[child.prop];
//修改:链式是无法通过上面的方式获取的,改为下面的方式
if(!rule){
	rule=uni.$u.getProperty(
	this.formRules,
	child.prop
	);

}
// 如果不存在对应的规则,直接返回,否则校验器会报错
if (!rule) return;

4、动态添加数据

//添加家属
addRelation() {
	if(!this.houseInformation.isChange) return;
	if(this.houseInformation.userList.length && !this.houseInformation.userList?.[this.houseInformation.userList.length-1]?.relation){
		uni.$showMsg('请先选择上一个的户主关系')
		return
	}
	
	let relation = {
		identityNumber:'',
	  userName: '',
	  userBirthday: '',
	  userSex: '',
	  relation: '',
	  userTel: '',
	  personnelId:''
	}
	this.houseInformation.userList.push(relation);
	this.rules.userList.push(this.relationRules);
	this.$refs.houseInformation.setRules(this.rules)

},

在这里一定要注意:添加的relation 一定要用变量申明,而不要放在data里面,否则会出现引用地址一致,导致表单与表单之间的校验混乱情况。

三、总结

前端基础一定要打牢,有机会还是看一些源码提升自己!!!

你可能感兴趣的:(vue,微信小程序)