【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进行验证。

相关推荐
hunzi_113 分钟前
搭建商城系统
java·uni-app·php
烛阴44 分钟前
Python装饰器解除:如何让被装饰的函数重获自由?
前端·python
千鼎数字孪生-可视化1 小时前
Web技术栈重塑HMI开发:HTML5+WebGL的轻量化实践路径
前端·html5·webgl
凌辰揽月1 小时前
7月10号总结 (1)
前端·css·css3
天天扭码1 小时前
很全面的前端面试——CSS篇(上)
前端·css·面试
EndingCoder1 小时前
搜索算法在前端的实践
前端·算法·性能优化·状态模式·搜索算法
sunbyte1 小时前
50天50个小项目 (Vue3 + Tailwindcss V4) ✨ | DoubleVerticalSlider(双垂直滑块)
前端·javascript·css·vue.js·vue
Favor_Yang2 小时前
SQL Server通过存储过程实现HTML页面生成
前端·信息可视化·sqlserver·存储过程
中微子3 小时前
JavaScript事件循环机制:面试官最爱问的10个问题详解
前端
Eighteen Z3 小时前
CSS揭秘:10.平行四边形
前端·css·css3