包含异步校验函数asyncValidator的表单校验错误

[zzz-hwx]

版本

2.0.36

转载链接

v2.h5.uviewui.com

重现步骤

打开页面，输入框填入'123' 或 'abc'，点击按钮【表单校验】，调用u-form的validate方法进行表单校验。 表单校验规则，模拟异步请求，1秒，调用callback方法，返回是否校验通过。 但是在调用callback前，validate已经完成回调。

<template>
    <view>
        <view class="form">
            <u-form ref="uForm" :model="model" :rules="rules" label-width="auto">
                <u-form-item label="姓名" prop="name">
                    <u-input v-model="model.name" placeholder="请输入"></u-input>
                </u-form-item>
            </u-form>
        </view>

        <view class="btns">
            <u-button @click="validate">表单校验</u-button>
        </view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                model: {
                    name: '',
                },
                rules: {
                    name: [{
                            asyncValidator: (rule, value, callback) => {
                                setTimeout(() => {
                                    // 模拟异步请求
                                    const arr = ['abc', '123'];
                                    if (arr.includes(value)) {
                                        console.log('姓名重复判断结束 => 其实应该是表单校验失败');
                                        callback(new Error('姓名重复'));
                                    } else {
                                        callback();
                                    }
                                }, 1000);
                            },
                            trigger: ['blur'],
                        }
                    ]
                }
            };
        },
        methods: {
            validate() {
                return this.$refs.uForm.validate().then(() => {
                    console.log('then => u-form的表单校验结束');
                }).catch(() => {
                    console.log('catch => u-form的表单校验结束');
                });
            },
        }
    }
</script>

<style lang="scss" scoped>
@import '~@/common/styles/form.scss';
</style>

期望的结果是什么？

在异步校验函数asyncValidator执行结束调用callback方法后，再回调validate方法

实际的结果是什么？

在调用callback前，validate已经完成回调

---

浅浅一只前端，猜测的错误原因：

没有等异步校验函数asyncValidator执行完再返回, 只是套了一层this.$nextTick, 之后的回调是同步的 错误原因:

• for循环里调用validator.validate, 传入回调函数callback (async-validator的callback为异步调用)
• for循环结束 执行用户传入的回调函数 (却是同步..)
• 可能...为了解决表单校验的 message 文字..

[xiaobeifeng]

我也遇到了这个问题，请问您是怎么处理这个问题的

[AllenWalke]

遇到同样问题

[klibing]

我也遇到同样的问题，请问有解决方案吗