上面已贴全部代码
- 发布:2022-06-22 11:08
- 更新:2022-06-22 11:14
- 阅读:513
产品分类: uniapp/App
PC开发环境操作系统: Windows
PC开发环境操作系统版本号: 21H2(win11)
HBuilderX类型: 正式
HBuilderX版本号: 3.4.7
手机系统: Android
手机系统版本号: Android 7.0
手机厂商: 模拟器
手机机型: 1
页面类型: vue
vue版本: vue3
打包方式: 云端
项目创建方式: HBuilderX
操作步骤:
预期结果:
无法正确校验长度,应该是设置了number类型,导致这个值为整数类型,lenght无法正确获取长度导致
无法正确校验长度,应该是设置了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);
})
}
1 个回复
橘致 (作者)
暂时发现这样可以解决,自定义规则,转为字符串再判断