当前位置: 首页 > news >正文

uniapp 扩展组件 uni-forms 的表单验证之 validateFunction 只响应一次

uniapp 扩展组件 uni-forms 的表单验证之 validateFunction 只响应一次

  • 问题代码
  • 官方说明
  • 参考资料

问题代码

直接从官方示例中复制过来改的。为了演示

<template><view><uni-forms ref="form" :modelValue="formData" :rules="rules"><uni-forms-item label="兴趣爱好" required name="hobby"><uni-data-checkbox v-model="formData.hobby" multiple :localdata="hobbys" /></uni-forms-item></uni-forms><button class="button" @click="submit">校验表单</button></view>
</template>
<script>
export default {data() {return {formData:{},rules: {hobby: {rules: [{validateFunction:function(rule,value,data,callback){if (value.length < 2) {callback('请至少勾选两个兴趣爱好')}return true}}]}}}},onReady() {this.$refs.form.setRules(this.rules)// 需要在onReady中设置规则},methods: {submit(form) {this.$refs.form.validate().then(console.log).catch(console.error)}}
}
</script>

官方说明

在这里插入图片描述
说了但好像又没说。。。
官方说了要在 onReady 绑定验证规则

onReady() {this.$refs.form.setRules(this.rules); // 需要在onReady中设置规则},

但我的实际代码是从另一个页面复制整个uni-forms 来改的。所以 :rules="rules" 就没有去掉。结果这就导致了 validateFunction 只有在第一次调用 this.$refs.form.validate() 有效。
注意: 使用 validateFunction 时:

  1. onReady 绑定验证规则。
  2. 去掉 uni-forms 上的 :rules="rules"。(如果有的话)

疑惑:
onReady:rules="rules" 不能正常工作,为啥不抛个异常出来?
为啥又能触发一次,来迷惑人呢。。。唉。。

参考资料

组件名:uni-forms

http://www.lryc.cn/news/117282.html

相关文章:

  • 每日一题8.10 lc39
  • 贝叶斯深度学习的温和介绍
  • 无涯教程-Perl - glob函数
  • 前端先行模拟接口(mock+expres+json)
  • 老师如何制作学生分班信息查询系统?
  • Java实战:高效提取PDF文件指定坐标的文本内容
  • centos磁盘满了,怎么清理大文件
  • AIGC:【LLM(四)】——LangChain+ChatGLM:本地知识库问答方案
  • 企业在线产品手册可以这样做,小白也能轻松上手
  • crypto-js中AES的加解密封装
  • 【计算机视觉】MoCo v2 讲解
  • 如何解决亚马逊银行账户验证问题?来看看这些技巧吧!
  • Android多渠道打包+自动签名工具 [原创]
  • nodejs实现解析chm文件列表,无需转换为PDF文件格式,在线预览chm文件以及目录,不依赖任何网页端插件
  • .net core background service
  • 前端开发的工作职责精选【10篇】
  • SpringBoot 升级内嵌Tomcat
  • react搭建在线编辑html的站点——引入grapes实现在线拖拉拽编辑html
  • Nginx反向代理服务配置和负载均衡配置
  • react钩子函数理解
  • 医疗保健中的 NLP:实体链接
  • java编程规范
  • 合宙Air724UG LuatOS-Air script lib API--sim
  • 【网络基础实战之路】基于三个分公司的内网搭建并连接运营商的实战详解
  • (Python)Requests+Pytest+Allure接口自动化测试框架从0到1搭建
  • 实现vuex数据持久化处理
  • Vue-系统登录进入首页后禁用浏览器返回键
  • Hadoop理论及实践-HDFS的Namenode及Datanode(参考Hadoop官网)
  • 第四十九天
  • ArcGIS Pro简介下载安装地址