#插件讨论# 【 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 负责人:无分享

6 个回复

1***@qq.com

先找到uni-forms组件的校验文件validate.js 我的是在根目录/uni_modules/uni-forms/components/uni-forms/validate.js
找到validateRule函数在该函数里找到hasRequired变量对这个变量进行修改
原来是let hasRequired = rules.findIndex((item) => { return item.required })
改成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***@qq.com

2024年仍未修复

2024-07-15 15:49

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