【uniapp】表单验证不生效的解决方案

表单验证这个常见的功能，明明在element ui等框架已经用的很熟了，在uniapp开发时还是处处碰壁？这篇文章我会提示uni-forms表单验证的几个注意点，帮助大家排查。

示例

下面是一份包含普通验证和自定义验证的示例：

<uni-forms ref="baseForm" :rules="rules" :modelValue="form">
	<uni-forms-item label="姓名" required name="name">
		<uni-easyinput v-model="form.name" placeholder="请输入姓名" />
	</uni-forms-item>
    <uni-forms-item label="描述" required name="desc">
		<uni-easyinput type="textarea" autoHeight maxlength="300" v-model="form.desc" placeholder="请输入内容"></uni-easyinput>
	</uni-forms-item>
</uni-forms>

form: {
    name: '',
    desc: ''
},
rules: {
    name: {
        rules: [{
            required: true,
            errorMessage: '姓名不能为空'
        }]
    },
    desc: {
        rules: [{
            required: true,
            errorMessage: '请输入描述'
        }, {
            validateFunction: function(rule, value, data, callback) {
                if (value.length < 20) {
                    callback('描述字数需大于20字')
                }
                return true
            }
        }]
    }
}

this.$refs.baseForm.validate().then(res => {
    // 校验成功
}).catch(err => {
    console.log('表单错误信息：', err);
})

出现问题时按照以下步骤排查：

1.确认组件的安装

检查uni-forms，uni-easyinput，uni-data-picker等当前用到的组件是不是已经全部在插件市场下载导入了。

2.检查各个属性的设置

uni-forms上的ref，rules，modelValue，uni-forms-item的name缺一不可。

name就相当于element里的prop，这个很容易漏掉！另外modelValue绑定的表单对象需要和uni-easyinput等表单组件的v-model对应上。比如这里modelValue绑定的form，表单里就只能绑定form.name等form里的字段。

 3.检查rules的数据结构

这个定义有点繁琐，我就这里犯错了。注意rules里的字段名里还要嵌套rules，然后这里的rules里才是数组格式。而不是像element的写法name里就直接是数组了。

4.检查调用validate的语法

首先肯定是检查refs后的名字和当时uni-forms绑定的ref是不是一致。然后注意语法是validate().then(res)，而不是validate(res),这是我第二个犯错的地方，需要特别注意。

​​​​​​​

5.检查调用时ref是否存在

如果表单在弹窗等需要显示隐藏的场景，可能会遇到这个问题。打印ref看是否存在，这里的例子是console.log(this.$refs.baseForm)，如果不存在肯定是报错，需要nextTick后表单dom加载完成了再调用validate进行验证。