解决uview下表单无法动态校验的问题

原创

已于 2023-01-11 10:43:24 修改 · 1.2w 阅读

32 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #小程序

于 2022-11-02 10:15:37 首次发布

本文介绍了一种针对uView UI框架下动态表单的校验方案，解决了微信小程序环境下动态表单项的规则匹配问题，并提供了具体的实现代码。

声明：关于uniapp插件uview表单动态校验的一个解决方案

1.uview小程序必须用

// 如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则
this.$refs.form1.setRules(this.rules)

2.动态使用，v-for需要放在u-form下的view下面

3.绑定的校验规则rules和表单model下面放置一个同名数组，确保u-form能找到

				form: {
					dynamicAry: [],
				},
				myrules: {
					dynamicAry: []
				},
				guigerules: {
					name: [{
							required: true,
							message: '此为必填字段',
							// blur和change事件触发检验
							trigger: ['blur', 'change'],
						},
						{
							min: 2,
							max: 12,
							message: '长度在2-12个字符之间'
						},
					],
					price: [{
							required: true,
							message: '此为必填字段',
							// blur和change事件触发检验
							trigger: ['blur', 'change'],
						},
						{
							validator: (rule, value, callback) => {
								return uni.$u.t

最低0.47元/天解锁文章