胡天八月
胡天八月
  • 发布:2023-07-18 11:21
  • 更新:2023-07-18 11:39
  • 阅读:281

【报Bug】form表单对象是动态生成的时候,校验不通过

分类:uni-app

产品分类: uniapp/App

PC开发环境操作系统: Windows

PC开发环境操作系统版本号: win 10

HBuilderX类型: 正式

HBuilderX版本号: 3.8.4

手机系统: Android

手机系统版本号: Android 10

手机机型: KTW219_SW98

页面类型: vue

vue版本: vue2

打包方式: 离线

项目创建方式: HBuilderX

示例代码:

<template>
<view class="container">
<uni-section title="表单校验" type="line">
<view class="example">
<!-- 基础表单校验 -->
<uni-forms ref="valiForm" :rules="rules" :model="valiFormData" labelWidth="80px">
<uni-forms-item label="姓名" required name="name">
<uni-easyinput v-model="valiFormData.name" placeholder="请输入姓名" />
</uni-forms-item>
<uni-forms-item label="年龄" required name="age">
<uni-easyinput v-model="valiFormData.age" placeholder="请输入年龄" />
</uni-forms-item>
<uni-forms-item label="自我介绍">
<uni-easyinput type="textarea" v-model="valiFormData.introduction" placeholder="请输入自我介绍" />
</uni-forms-item>
</uni-forms>
<button type="primary" @click="submit('valiForm')">提交</button>
</view>
</uni-section>
</view>
</template>

<script>
export default {
data() {
return {
// 校验表单数据
valiFormData: {
// name: '',
// age: '',
// introduction: '',
},
// 校验规则
rules: {
name: {
rules: [{
required: true,
errorMessage: '姓名不能为空'
}]
},
age: {
rules: [{
required: true,
errorMessage: '年龄不能为空'
}, {
format: 'number',
errorMessage: '年龄只能输入数字'
}]
}
}
}
},
onLoad() {
var a = 'name';
this.valiFormData[a] ='';//校验不通过
this.valiFormData['age'] ='';//校验不通过
this.valiFormData['introduction'] ='';

        //通过JSON转换再转回   校验通过  
        // this.valiFormData= JSON.parse(JSON.stringify(this.valiFormData))  
    },  
    methods: {    
        submit(ref) {  
            console.log(ref);  
            this.$refs[ref].validate().then(res => {  
                console.log('success', res);  
                uni.showToast({  
                    title: `校验通过`  
                })  
            }).catch(err => {  
                console.log('err', err);  
            })  
        },  
    }  
}  

</script>

<style lang="scss">
.example {
padding: 15px;
background-color: #fff;
}

.segmented-control {  
    margin-bottom: 15px;  
}  

.button-group {  
    margin-top: 15px;  
    display: flex;  
    justify-content: space-around;  
}  

.form-item {  
    display: flex;  
    align-items: center;  
    flex: 1;  
}  

.button {  
    display: flex;  
    align-items: center;  
    height: 35px;  
    line-height: 35px;  
    margin-left: 10px;  
}  

</style>

操作步骤:

代码如上

预期结果:

不用JSON转换也能校验通过

实际结果:

不用JSON转换也能校验通不过

bug描述:

var a = 'name';
this.valiFormData[a] ='';//校验不通过
this.valiFormData['age'] ='';//校验不通过
this.valiFormData['introduction'] ='';

//通过JSON转换再转回 校验通过
// this.valiFormData= JSON.parse(JSON.stringify(this.valiFormData))

2023-07-18 11:21 负责人:无 分享
已邀请:
昭昭L

昭昭L - 开心就好

看下html,和数据部分,动态表单不需要这要转,应该是你哪里写的有问题

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