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

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

示例

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

html 复制代码
<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>
javascript 复制代码
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
            }
        }]
    }
}
javascript 复制代码
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进行验证。

相关推荐
一斤代码1 小时前
vue3 下载图片(标签内容可转图)
前端·javascript·vue
中微子1 小时前
React Router 源码深度剖析解决面试中的深层次问题
前端·react.js
光影少年1 小时前
从前端转go开发的学习路线
前端·学习·golang
中微子2 小时前
React Router 面试指南:从基础到实战
前端·react.js·前端框架
3Katrina2 小时前
深入理解 useLayoutEffect:解决 UI "闪烁"问题的利器
前端·javascript·面试
前端_学习之路3 小时前
React--Fiber 架构
前端·react.js·架构
coderlin_3 小时前
BI布局拖拽 (1) 深入react-gird-layout源码
android·javascript·react.js
伍哥的传说3 小时前
React 实现五子棋人机对战小游戏
前端·javascript·react.js·前端框架·node.js·ecmascript·js
qq_424409193 小时前
uniapp的app项目,某个页面长时间无操作,返回首页
前端·vue.js·uni-app
我在北京coding3 小时前
element el-table渲染二维对象数组
前端·javascript·vue.js