HZH8997
HZH8997
  • 发布:2023-04-25 10:44
  • 更新:2023-04-26 09:20
  • 阅读:426

【报Bug】进入validateFunction验证的时候, 错误验证

分类:uni-app

产品分类: uniapp/小程序/微信

PC开发环境操作系统: Mac

PC开发环境操作系统版本号: mac os13

HBuilderX类型: 正式

HBuilderX版本号: 3.7.9

第三方开发者工具版本号: 当前已是最新版本 (1.06.2303220 darwin-arm64)

基础库版本号: 2.30.4 灰度中

项目创建方式: HBuilderX

操作步骤:

上述代码

预期结果:

上述代码

实际结果:

上述代码

bug描述:

进入validateFunction验证的时候,会报 【 "提交的字段["account"]在数据库中并不存在" 】,没使用 云服务器

下面是代码

表单验证

export const validations = {  
    login: {  
        // 字段名称  
        account: {  
            rules: [{  
                    required: true,  
                    errorMessage: '账号不能为空'  
                },  
                {  
                    validateFunction: (rule, value, data, callback) => {  
                        if (!/^1[3|4|5|6|7|8|9][0-9]{9}$/.test(value)) {  
                            callback('请输入正确的手机号码')  
                        } else {  
                            callback()  
                        }  
                    }  
                }  
            ]  
        },  
        password: {  
            rules: [{  
                                required: true,  
                errorMessage: '密码不能为空'  
            }]  
        }  
    }  
}  

表单组件

<template>  
    <view>  
        <uni-forms ref="form" :modelValue="subForms" :rules="validation[rulesKey]" :label-position="formCig.align">  
            <uni-forms-item  
                v-for="item in schemas"  
                :label="item.label"  
                :name="item.name"  
                :required="undefined !== item.required ? item.required : false"  
                :key="item.name"  
            >  
                <!-- 文本框 -->  
                <view class="form-item" v-if="item.formType == 'input'">  
                    <uni-easyinput v-model="subForms[item.name]" :type="undefined !== item.attrs.type ? item.attrs.type : ''" />  
                </view>  

                <!-- 插槽 -->  
                <view v-if="item.formType == 'slot'"><slot :name="item.slot"></slot></view>  
            </uni-forms-item>  
        </uni-forms>  
        <view class="button-group flex-r flex-ai-fe flex-jc-e" v-if="buttonCig.show">  
            <view v-if="!buttonCig.slot">  
                <button :type="buttonCig.subBtnCig.type" :size="buttonCig.subBtnCig.size" @click="submit()">  
                    {{ buttonCig.subBtnName }}  
                </button>  
            </view>  
            <view v-else><slot name="buttonGroup"></slot></view>  
        </view>  
    </view>  
</template>  

<script>  
import { validations } from '@/utils/validation/validation.js'  
export default {  
    name: 'froms',  
    data() {  
        return {  
            validation: validations,  
            subForms: {}  
        }  
    },  
    props: {  
        rulesKey: {  
            type: String,  
            default: ''  
        },  
        formCig: {  
            type: Object,  
            default: () => {  
                return {  
                    align: 'left'  
                }  
            }  
        },  
        formData: {  
            default: () => {  
                return {}  
            },  
            type: Object  
        },  
        schemas: {  
            default: () => {  
                return []  
            },  
            type: Array  
        },  
        buttonCig: {  
            default: () => {  
                return {  
                    show: true,  
                    isSlot: false,  
                    subBtnName: '提交',  
                    subBtnCig: {  
                        type: 'primary',  
                        size: 'mini'  
                    }  
                }  
            },  
            type: Object  
        }  
    },  

    created() {  
        this.subForms = JSON.parse(JSON.stringify(this.formData))  
    },  
    mounted() {  
        this.$refs.form.setRules(this.validation[this.rulesKey])  
    },  
    methods: {  
        submit() {  
            console.log(this.$refs.form)  
            this.$refs.form  
                .validate()  
                .then(res => {  
                    console.log('表单数据信息:', res)  
                })  
                .catch(err => {  
                    console.log('表单错误信息:', err)  
                })  
        }  
    }  
}  
</script>  

<style lang="scss">  
.form-item {  
    display: flex;  
    align-items: center;  
}  
</style>  
<forms  
                    ref="formRef"  
                    rulesKey="login"  
                    :schemas="schemas"  
                    :formData="formData"  
                    :buttonCig="{ show: false }"  
                    :formCig="{ align: 'top' }"  
                />
2023-04-25 10:44 负责人:无 分享
已邀请:
YUANRJ

YUANRJ

升级下版本试试,如还有问题,请提供完整的测试工程,谢谢

  • HZH8997 (作者)

    现在用的是正式版最新的了,完整测试工程是把代码给你们吗?,我复制一份

    2023-04-25 13:32

  • HZH8997 (作者)

    下方有源码

    2023-04-25 13:44

HZH8997

HZH8997 (作者)

代码

HZH8997

HZH8997 (作者)

要这样才可以  

<template>  
    <view>  
        <uni-forms ref="form" :modelValue="subForms" :label-position="formCig.align">  
            <uni-forms-item  
                v-for="(item, index) in subForms.dynamicForms"  
                :label="item.label"  
                :name="['dynamicForms', index, 'value']"  
                :required="undefined !== item.required ? item.required : false"  
                :key="item.name"  
                :rules="  
                    [  
                        [  
                            {  
                                required: true,  
                                errorMessage: '账号不能为空'  
                            },  
                            {  
                                validateFunction: phoneV  
                            }  
                        ],  
                        [  
                            {  
                                required: true,  
                                errorMessage: '密码不能为空'  
                            }  
                        ]  
                    ][index]  
                "  
            >  
                <!-- 文本框 -->  
                <view class="form-item" v-if="item.formType == 'input'">  
                    <uni-easyinput  
                        v-model="subForms.dynamicForms[index].value"  
                        :type="undefined !== item.attrs.type ? item.attrs.type : ''"  
                    />  
                </view>  

                <!-- 插槽 -->  
                <view v-if="item.formType == 'slot'"><slot :name="item.slot"></slot></view>  
            </uni-forms-item>  
        </uni-forms>  
        <view class="button-group flex-r flex-ai-fe flex-jc-e" v-if="buttonCig.show">  
            <view v-if="!buttonCig.slot">  
                <button :type="buttonCig.subBtnCig.type" :size="buttonCig.subBtnCig.size" @click="submit()">  
                    {{ buttonCig.subBtnName }}  
                </button>  
            </view>  
            <view v-else><slot name="buttonGroup"></slot></view>  
        </view>  
    </view>  
</template>  

<script>  
import { loginValidation } from '@/utils/validation/validation.js'  
export default {  
    name: 'froms',  
    data() {  
        return {  
            subForms: {  
                dynamicForms: []  
            },  

            //Validation  
            phoneV: (rule, value, data, callback) => {  
                if (!/^1[3|4|5|6|7|8|9][0-9]{9}$/.test(value)) {  
                    callback('请输入正确的手机号码')  
                } else {  
                    callback()  
                }  
            }  
        }  
    },  
    props: {  
        rulesKey: {  
            type: String,  
            default: ''  
        },  
        formCig: {  
            type: Object,  
            default: () => {  
                return {  
                    align: 'left'  
                }  
            }  
        },  
        formData: {  
            default: () => {  
                return {}  
            },  
            type: Object  
        },  
        schemas: {  
            default: () => {  
                return []  
            },  
            type: Array  
        },  
        buttonCig: {  
            default: () => {  
                return {  
                    show: true,  
                    isSlot: false,  
                    subBtnName: '提交',  
                    subBtnCig: {  
                        type: 'primary',  
                        size: 'mini'  
                    }  
                }  
            },  
            type: Object  
        }  
    },  

    created() {  
        this.$set(this.subForms, 'dynamicForms', this.schemas)  
    },  
    mounted() {},  
    methods: {  
        submit() {  
            this.$refs.form  
                .validate()  
                .then(res => {  
                    console.log('表单数据信息:', res)  
                })  
                .catch(err => {  
                    console.log('表单错误信息:', err)  
                })  
        }  
    }  
}  
</script>  

<style lang="scss">  
.form-item {  
    display: flex;  
    align-items: center;  
}  
</style>  
YUANRJ

YUANRJ

文档里有说明:

无法通过props传递变量,是因为微信小程序会过滤掉对象中的方法,导致自定义验证规则无效。

把你测试工程里的:rules="login"去掉就可以了,使用动态的setRules

  • HZH8997 (作者)

    mounted() {

    setTimeout(() => {

    this.$refs.form.setRules(this.Validation)

    }, 300)

    },


    v-for的数组是从父组件传下来的,上面这个故意执行一个延时


    这种情况直接没有进行验证...


    forms.vue 的代码贴下面,可以复制测一下的

    2023-04-26 09:20

HZH8997

HZH8997 (作者)

<template>  
    <view>  
        <uni-forms ref="form" :modelValue="subForms" :label-position="formCig.align">  
            <uni-forms-item  
                v-for="(item, index) in subForms.dynamicForms"  
                :label="item.label"  
                :name="['dynamicForms', index, 'value']"  
                :required="undefined !== item.required ? item.required : false"  
                :key="item.name"  
            >  
                <!-- 文本框 -->  
                <view class="form-item" v-if="item.formType == 'input'">  
                    <uni-easyinput  
                        v-model="subForms.dynamicForms[index].value"  
                        :type="undefined !== item.attrs.type ? item.attrs.type : ''"  
                    />  
                </view>  

                <!-- 插槽 -->  
                <view v-if="item.formType == 'slot'"><slot :name="item.slot"></slot></view>  
            </uni-forms-item>  
        </uni-forms>  
        <view class="button-group flex-r flex-ai-fe flex-jc-e" v-if="buttonCig.show">  
            <view v-if="!buttonCig.slot">  
                <button :type="buttonCig.subBtnCig.type" :size="buttonCig.subBtnCig.size" @click="submit()">  
                    {{ buttonCig.subBtnName }}  
                </button>  
            </view>  
            <view v-else><slot name="buttonGroup"></slot></view>  
        </view>  
    </view>  
</template>  

<script>  
import { loginValidation } from '@/utils/validation/validation.js'  
export default {  
    name: 'froms',  
    data() {  
        return {  
            subForms: {  
                dynamicForms: []  
            },  

            Validation: {  
                account: [  
                    {  
                        required: true,  
                        errorMessage: '账号不能为空'  
                    },  
                    {  
                        validateFunction: (rule, value, data, callback) => {  
                            if (!/^1[3|4|5|6|7|8|9][0-9]{9}$/.test(value)) {  
                                callback('请输入正确的手机号码')  
                            } else {  
                                callback()  
                            }  
                        }  
                    }  
                ],  
                password: [  
                    {  
                        required: true,  
                        errorMessage: '密码不能为空'  
                    }  
                ]  
            }  
        }  
    },  
    props: {  
        rulesKey: {  
            type: String,  
            default: ''  
        },  
        formCig: {  
            type: Object,  
            default: () => {  
                return {  
                    align: 'left'  
                }  
            }  
        },  
        formData: {  
            default: () => {  
                return {}  
            },  
            type: Object  
        },  
        schemas: {  
            default: () => {  
                return []  
            },  
            type: Array  
        },  
        buttonCig: {  
            default: () => {  
                return {  
                    show: true,  
                    isSlot: false,  
                    subBtnName: '提交',  
                    subBtnCig: {  
                        type: 'primary',  
                        size: 'mini'  
                    }  
                }  
            },  
            type: Object  
        }  
    },  

    created() {  
        this.$set(this.subForms, 'dynamicForms', this.schemas)  
    },  
    mounted() {  
        setTimeout(() => {  
            this.$refs.form.setRules(this.Validation)  
        }, 300)  
    },  
    methods: {  
        submit() {  
            this.$refs.form  
                .validate()  
                .then(res => {  
                    console.log('表单数据信息:', res)  
                })  
                .catch(err => {  
                    console.log('表单错误信息:', err)  
                })  
        }  
    }  
}  
</script>  

<style lang="scss">  
.form-item {  
    display: flex;  
    align-items: center;  
}  
</style>  
  • YUANRJ

    应该是你写法有问题,参考下文档的动态表单示例。

    2023-04-26 15:09

要回复问题请先登录注册