1***@163.com
1***@163.com
  • 发布:2021-02-02 11:24
  • 更新:2023-02-06 17:23
  • 阅读:2336

#插件讨论# 【 Forms 表单 - DCloud 】uni-forms表单自定义验证没反应

分类:uni-app

validateFunction 单独写验证然后没反应

validateFunction: function (rule, value, data, callback) {
console.log(value);
if (!/^1[3456789]\d{9}$/.test(value)) {
callback("手机号码错误");
}
return true;
},

即使开了

onReady() {
// this.$refs.form.setRules(this.rules);
},

2021-02-02 11:24 负责人:无 分享
已邀请:
1***@qq.com

1***@qq.com

  1. 先找到uni-forms组件的校验文件validate.js 我的是在根目录/uni_modules/uni-forms/components/uni-forms/validate.js
  2. 找到validateRule函数 在该函数里找到hasRequired变量 对这个变量进行修改
  3. 原来是let hasRequired = rules.findIndex((item) => { return item.required })
  4. 改成let hasRequired = rules.findIndex((item) => { return item.required || item.validateFunction })
    希望对你有帮助
    网上找不到帮助 第一次被迫看源码 居然歪打正着可以了 挺开心的
  • 1***@qq.com

    补充一下 还有一个小bug 就是输入值为空字符串的时候 自定义函数虽然会执行(因为修改了hasRequired变量) 但是不会提示错误消息 原因是因为uni-forms-item.vue组件有作处理 在这个组件下找到triggerCheck函数 有个代码片段如下:

    // 判断是否必填,非必填,不填不校验,填写才校验

    if (!isNoField && (value === undefined || value === '')) {result = null;}

    把|| vlue === '' 删掉就可以了

    这个问题找了我半天了

    2022-02-24 15:03

  • s***@gmail.com

    厉害了,解决了我的问题,这块的验证逻辑真的不是很完善

    2022-06-20 18:19

  • SomeoneElse

    太感谢了,救大命

    2022-07-06 18:19

  • 1***@qq.com

    唯一一个有用的方法!这么久没人解决真的离谱

    2023-04-18 14:29

  • c***@163.com

    试了,不好使

    2023-07-07 10:07

1***@163.com

1***@163.com

我的一开始也是小程序不起作用,后来把<uni-form>的:rules属性去掉,就可以了。
原本我是这样写:<uni-forms ref="form" :modelValue="formData" :rules="rules">
后来去掉了:rules属性,就可以了。

根据我个人的情况来分析,我感觉是因为components/uni-forms-item/uni-forms-item.vue里面的init()方法,
有一个判断是这样的:
if (this.rules.length > 0) {
validator.updateSchema(formRules);
}
如果:rules属性存在,this.rules.length > 0成立,就会执行validator.updateSchema(formRules);
执行updateSchema后,会把rule.validateFunction方法直接清掉了,具体我也不知道为何会清掉(这个挺关键的,但是没花太多时间去跟踪原因了)。。。
rule.validateFunction清掉后,在components/uni-forms/validate.js的validateRule方法里,会有以下判断
if (rule.validateFunction) {
result = await this.validateFunction(rule, value, data, allData, vt)
if (result !== null) {
break
}
}
由于rule.validateFunction为空,自然就不会执行this.validateFunction(rule, value, data, allData, vt)方法了。

  • Anet

    你把 :rules="rules" 去掉不报错吗?

    我这边App端和H5端都会报错: [Vue warn]: Error in render: "TypeError: Cannot read property 'length' of undefined"

    2022-06-10 17:39

劣徒123

劣徒123

解决了吗

  • sard

    解决了吗?

    2021-07-29 17:01

tomzhao

tomzhao

同样的问题,最后使用正则的方式

1***@qq.com

1***@qq.com - 1212

哈哈哈,再告诉你们一个bug,我猜你们用的vue2版本的,我用vue3 vite版本的,h5平台input标签放在uni-forms标签中里面的属性就失去了响应式。

2***@qq.com

2***@qq.com

真是无语 不能解决bug吗,现在23年了 还不解决bug

要回复问题请先登录注册