橘致
橘致
  • 发布:2022-06-22 11:08
  • 更新:2022-06-22 11:14
  • 阅读:513

【报Bug】表单验证长度和输入的数据类型,无法正确验证数据的长度,输入第一位就已经开始提示最大长度。

分类:uni-app

产品分类: uniapp/App

PC开发环境操作系统: Windows

PC开发环境操作系统版本号: 21H2(win11)

HBuilderX类型: 正式

HBuilderX版本号: 3.4.7

手机系统: Android

手机系统版本号: Android 7.0

手机厂商: 模拟器

手机机型: 1

页面类型: vue

vue版本: vue3

打包方式: 云端

项目创建方式: HBuilderX

操作步骤:

上面已贴全部代码

预期结果:

无法正确校验长度,应该是设置了number类型,导致这个值为整数类型,lenght无法正确获取长度导致

实际结果:

无法正确校验长度

bug描述:

表单验证长度和输入的数据类型,无法正确验证数据的长度,输入第一位就已经开始提示最大长度。
如果去掉 验证数据类型,则可以正确验证长度。
下面直接贴部分代码

<uni-forms class="add_client_form" ref="add_client_form" :rules="add_client_rules"  
                                label-position="top">  

                                <uni-row class="demo-uni-row">  
                                    <uni-col :span="4">  
                                        <uni-forms-item class="row-input" name="c_clientname" label="姓名" required  
                                            :rules="[{'required': true,errorMessage: '请输入姓名'}]">  
                                            <uni-easyinput type="text" v-model="add_client_formData.c_clientname"  
                                                placeholder="姓名" />  
                                        </uni-forms-item>  
                                    </uni-col>  
                                    <uni-col :span="4">  
                                        <uni-forms-item class="row-input" name="c_sex" label="性别" required  
                                            :rules="[{'required': true,errorMessage: '请选择性别'}]">  
                                            <uni-data-checkbox v-model="add_client_formData.c_sex" :localdata="sexs" />  
                                        </uni-forms-item>  
                                    </uni-col>  
                                    <uni-col :span="6">  
                                        <uni-forms-item class="row-input" name="c_card" label="卡号">  
                                            <uni-easyinput type="text" v-model="add_client_formData.c_card"  
                                                placeholder="卡号" />  
                                        </uni-forms-item>  
                                    </uni-col>  
                                    <uni-col :span="10">  
                                        <uni-forms-item class="row-input" name="c_mt" label="手机">  
                                            <uni-easyinput type="text" v-model="add_client_formData.c_mt"  
                                                placeholder="手机" />  
                                        </uni-forms-item>  
                                    </uni-col>  
                                </uni-row>  

                                <button type="primary" size="mini" style="float: right;margin-bottom:20px;"  
                                    @click="add_client_save">保存</button>  
                            </uni-forms>

贴校验规则

add_client_rules: {  
                    c_mt: {  
                        rules: [  
                            {  
                                format: "number",  
                                errorMessage: '手机号只能是数字',  
                            },  
                            // 对name字段进行长度验证  
                            {  
                                maxLength: 11,  
                                errorMessage: '长度最长 {maxLength} 个字符',  
                            }  
                        ],  
                        validateTrigger: "bind"  
                    }  
                }

校验代码

add_client_save() {  
                this.$refs.add_client_form.validate().then(async res => {  
                    console.log(123)  
                }).catch(err => {  
                    console.log('表单错误信息:', err);  
                })  
            }
2022-06-22 11:08 负责人:无 分享
已邀请:
橘致

橘致 (作者)

暂时发现这样可以解决,自定义规则,转为字符串再判断

c_mt: {  
                        rules: [{  
                                format: "number",  
                                errorMessage: '手机号只能是数字',  
                            },  
                            {  
                                validateFunction: function(rule, value, data, callback) {  
                                    if (String(value).length > 11) {  
                                        callback('长度最长11个字符')  
                                    }  
                                    return true  
                                }  
                            }  
                        ],  
                        validateTrigger: "bind"  
                    }

该问题目前已经被锁定, 无法添加新回复