避坑指南：uni-forms表单在uni-app中的实践经验

​个人主页：前端青山
系列专栏：uni-app篇
人终将被年少不可得之物困其一生

依旧青山,本期给大家带来JavaScript篇专栏内容:uni-app中forms表单的避坑指南篇

该篇章已被前端圈子收录,点此处进入即可查看更多优质内容

目录

1.uni-forms表单验证时“多级结构对象数据”如何做数据校验的解决方案​

2.uni-forms表单对象内嵌套循环数据(可增删)​

3.接收上一页返回参数​

4.根据单选判断显示内容(真机测试混乱或不生效)​

1.uni-forms表单验证时“多级结构对象数据”如何做数据校验的解决方案​

如果我们返回的字段为对象嵌套形式时

js

infoObj: {
					Info: {
						name:'',
						id:'',
						phone:'',
						sex:''
						},
					InfoSub: {
						name:'',
						id:'',
						phone:'',
						sex:''
						},
			},

uni-forms-item 需要设置 name 属性为当前字段名，字段为 String|Array 类型。

js

   //:modelValue绑定最外层的对象     
    
	
			
	//name属性以数组形式['对象嵌套对象名','要校验的name名称']

最后给当前uni-forms-item 单独设置设置 :rules="校验规则方法名" 属性,自己定义校验规则就可。

2.uni-forms表单对象内嵌套循环数据(可增删)​

只有一条数据时

多条数据时

数据格式为对象内嵌套循环数组

js

data() {
			return {
				infoObj: {
					name:'',
					phone:'',
					id:'',
					sex:'',
                    //对象内嵌套循环数组
					addInfoList: [{
						name: '', 
						sex: '', 
						id: '', 
						phone: '', 
					}],
					},
			}
		},

完整代码如下

js

3.接收上一页返回参数​

在做uni-app 项目时,我们经常需要做上一页面传值的情况,其实原理也非常简单,先看效果

• 定义一个变量来获取页面栈信息getCurrentPages()
• 继续声明变量通过页面栈信息来返回上一页面pages[pages.length -2]
• 通过返回上一页面变量名上一面变量名.$vm.函数名(参数1,参数2,参数3)
• 最后在上一页面的methods方法内直接使用该函数来获取所收到的参数进行赋值

整体代码如下:

/pages/table表单页面

js

pages/table/index职员信息页面

js

注意:必须获取当前getCurrentPages()页面栈信息与pages[pages.length -2]长度减去对应数字来返回你想要返回参数的页面

4.根据单选判断显示内容(真机测试混乱或不生效)​

这种切换在开发过程或者H5页面时看似正常,但是打包到app或者真机模拟测试时,会出现混乱或者不生效的问题,此时change事件的赋值你是否以正常e.detail.value形式赋值给单选框,

是否已经忘记v-if与v-show的区别

1. 当需要在两种状态之间切换时，可以使用 v-show。
2. 当需要根据复杂的条件决定是否渲染某个元素时，可以使用 v-if。

将之前v-if判断改为v-show后,再次进行测试

别急,如果还未生效,那就是动态渲染时出现名称混乱或位置有差异的情况,那我们紧接着进行手动赋值

定义一个变量,如只有两个选项切换,默认置为false即可,如有多个,可以数字形式替代。

js

data() {
			return {
				checkStatus:false,//当只有两个选项切换时,默认为false即可
				checkStatus1:0,//当出现多个选项切换时,以数字或字符串形式赋值
		},

之后,在单选框的change事件进行单独赋值,如文字未生效,则在该状态下单独定义变量文字,v-show同用即可。