1***@qq.com
1***@qq.com
  • 发布:2021-11-25 10:36
  • 更新:2021-11-25 10:36
  • 阅读:672

【报Bug】uni-forms validate方法传入要保留的字段,校验通过后,无法获取到表单数据

分类:uni-app

产品分类: uniapp/App

PC开发环境操作系统: Windows

PC开发环境操作系统版本号: windows7 旗舰版

HBuilderX类型: 正式

HBuilderX版本号: 3.1.22

手机系统: Android

手机系统版本号: Android 8.0

手机厂商: 华为

手机机型: 荣耀8

页面类型: vue

vue版本: vue2

打包方式: 云端

项目创建方式: HBuilderX

示例代码:
<template>  
    <view class="edit-order-address-page">  

        <view class="billing-form-root">  
            <view class="form-title">  
                <text class="title-text">Billing Address</text>  
                <text class="title-select">Select from address book</text>  
            </view>  
            <uni-forms class="billing-form"   
                :rules="rules"   
                :value="addressForm"   
                label-position="top"  
                ref="_address_form"   
                validate-trigger="bind"  
                err-show-type="undertext"  
            >  
                <view class="billing-form-group">  
                    <view class="form-label required">First Name</view>  
                    <uni-forms-item name="firstname" required>  
                        <uni-easyinput type="text" class="form-input" :clearable="false" v-model="addressForm.firstname"></uni-easyinput>  
                    </uni-forms-item>  
                </view>  
                <view class="billing-form-group">  
                    <view class="form-label required">Last Name</view>  
                    <uni-forms-item name="lastname" required>  
                        <uni-easyinput type="text" class="form-input" :clearable="false" v-model="addressForm.lastname"></uni-easyinput>  
                    </uni-forms-item>  
                </view>  
                <view class="billing-form-group">  
                    <view class="form-label required">Address<text class="form-label-tips">(No accepting PO.box)</text></view>  
                    <uni-forms-item name="street" required>  
                        <uni-easyinput type="textarea" class="form-input" :clearable="false" v-model="addressForm.street"></uni-easyinput>  
                    </uni-forms-item>  
                </view>  

                <view class="billing-form-group">  
                    <view class="form-label required">Zip/Postal Code</view>  
                    <uni-forms-item name="postcode" required>  
                        <uni-easyinput type="text" class="form-input" :clearable="false" v-model="addressForm.postcode"></uni-easyinput>  
                    </uni-forms-item>  
                </view>  
                <view class="billing-form-group">  
                    <view class="form-label required">City</view>  
                    <uni-forms-item name="city" required>  
                        <uni-easyinput type="text" class="form-input" :clearable="false" v-model="addressForm.city"></uni-easyinput>  
                    </uni-forms-item>  
                </view>  

                <view class="billing-form-group">  
                    <view class="form-label required">State/Province</view>  
                    <uni-forms-item name="region" required>  
                        <uni-easyinput type="text" class="form-input"   
                            placeholder="Place Input region, state or province"  
                            :clearable="false"   
                            v-model="addressForm.region"  
                        ></uni-easyinput>  
                    </uni-forms-item>  
                </view>  

                <view class="billing-form-group">  
                    <view class="form-label required">Telephone</view>  
                    <uni-forms-item name="telephone" required>  
                        <uni-easyinput type="text" class="form-input" :clearable="false" v-model="addressForm.telephone"></uni-easyinput>  
                    </uni-forms-item>  
                </view>  

            </uni-forms>  
        </view>  
        <!--底部提交按钮-->  
        <view class="order-address-bottom">  
            <view @click="confirmHandler" class="bottom-btn">Confirm</view>  
        </view>  
    </view>  

</template>  

<script>  
    export default {  
        data() {  
            return {  
                addressForm: {  
                    firstname: '',  
                    lastname: '',  
                    street: '',  
                    postcode: '',  
                    city: '',  
                    region: '',  
                    telephone: '',  
                },  
                rules: {  
                    firstname: {  
                        rules: [{  
                            required: true,  
                            errorMessage: 'This is a required field.'  
                        }]  
                    },  
                    lastname: {  
                        rules: [{  
                            required: true,  
                            errorMessage: 'This is a required field.'  
                        }]  
                    },  
                    street: {  
                        rules: [{  
                            required: true,  
                            errorMessage: 'This is a required field.'  
                        }]  
                    },  
                    postcode: {   
                        rules:[{  
                            required: true,  
                            errorMessage: 'This is a required field.'  
                        }],  
                    },  
                    city: {   
                        rules:[{  
                            required: true,  
                            errorMessage: 'This is a required field.'  
                        }]  
                    },  

                    region: {   
                        rules:[{  
                            required: true,  
                            errorMessage: 'This is a required field.'  
                        }]  
                    },  
                    telephone: {   
                        rules:[{  
                            required: true,  
                            errorMessage: 'This is a required field.'  
                        }]  
                    },  
                }  
            };  
        },  
        onLoad(options) {  

            this.addressForm.test = 'qwe';  
        },  

        methods: {  

            confirmHandler() {  
                // 不参与校验的字段名,保留  
                console.log(9999999999);  
                let otherKey = ['test'];  
                // 这里有一个问题:按照uni-forms的  
                this.$refs._address_form.validate(otherKey).then((res) => {  
                    console.log('validate res -- ',res);  
                }).catch((err) => {  
                    console.log('validate err -- ',err);  
                });  
            }  
        }  
    }  
</script>  

<style scoped lang="scss">  
page{  
    width: 100%;          
}  
.edit-order-address-page{  
    position: relative;  
    box-sizing: border-box;  
    width: 100%;  
    padding-bottom: 150rpx;  
}  
.billing-form-root{  
    box-sizing: border-box;  
    width: 100%;  
}  
.billing-form{  
    box-sizing: border-box;  
    width: 100%;  
    padding: 0 20rpx;  
}  
.form-title{  
    box-sizing: border-box;  
    width: 100%;  
    padding: 20rpx;  
    display: flex;  
    justify-content: space-between;  
    align-items: center;  
    .title-text{  
        font-size: 34rpx;  
        font-weight: bold;  
    }  
    .title-select{  
        font-size: 12px;  
        text-decoration: underline;  
        color: $base-color;  
    }  
}  
.uni-forms-item{  
    position: relative;  
}  
// /deep/ .uni-easyinput__content{  
//  height: 76rpx; // 38  
// }  
.uni-forms-item.uni-forms-item-error .form-picker{  
    border-color: #dd524d;  
}  
.form-picker{  
    height: 76rpx;  
    border: 1px solid rgb(229,229,229);  
    border-radius: 4px;  
}  
.form-picker-content{  
    height: 100%;  
    display: flex;  
    align-items: center;  
    padding-left:10px;  
    line-height: normal;  
}  
.form-picker-content.tips{  
    color: $font-color-light;  
}  

.form-label{  
    position: relative;  
    box-sizing: border-box;  
    width: 100%;  
    font-size: 30rpx;  
    .form-label-tips{  
        color: $font-color-light;  
        font-size: 28rpx;  
    }  
}  

.form-label.required{  
    padding-left: 20rpx;  
}  
.form-label.required:after{  
    position: absolute;  
    content: '*';  
    top: 50%;  
    left:0;  
    transform: translateY(-50%);  
    font-size: 28rpx;  
    color: $base-color;  
    height: 1em;  
}  

.order-address-bottom{  
    position:fixed;  
    left:0;  
    bottom:0;  
    box-sizing: border-box;  
    width: 100%;  
    height: 120rpx;  
    background-color: #fff;  
    padding: 20rpx;  
    box-shadow: 0px -5px 5px -5px rgba(0,0,0,0.3);  
}  
.bottom-btn{  
    display: flex;  
    justify-content: center;  
    align-items: center;  
    width: 100%;  
    height: 100%;  
    color: #fff;  
    background-color: $base-color;  
    font-size: 34rpx;  
    line-height: normal;  
    border-radius: 8rpx;  
}  

</style>

操作步骤:
// validate方法传入otherKey,校验通过后then函数中无法获取到表单数据,输出null  
let otherKey = ['test'];  
this.$refs._address_form.validate(otherKey).then((res) => {  
                    console.log('validate res -- ',res);  
                }).catch((err) => {  
                    console.log('validate err -- ',err);  
                });
// validate方法不传入otherKey,校验通过后then函数中可以获取到完整的表单数据  
let otherKey = ['test'];  
this.$refs._address_form.validate().then((res) => {  
                    console.log('validate res -- ',res);  
                }).catch((err) => {  
                    console.log('validate err -- ',err);  
                });

预期结果:
// validate方法传入otherKey,校验通过后then函数中输出包含test字段的表单数据  
let otherKey = ['test'];  
this.$refs._address_form.validate(otherKey).then((res) => {  
                    console.log('validate res -- ',res);  
                }).catch((err) => {  
                    console.log('validate err -- ',err);  
                });

实际结果:
// validate方法传入otherKey,校验通过后then函数中无法获取到表单数据,输出null  
let otherKey = ['test'];  
this.$refs._address_form.validate(otherKey).then((res) => {  
                    console.log('validate res -- ',res);  
                }).catch((err) => {  
                    console.log('validate err -- ',err);  
                });

bug描述:

【描述】

uni-forms validate方法传入要保留的字段,校验通过后,无法获取到表单数据;不传入要保留的字段,校验通过后能正常获取到表单数据

2021-11-25 10:36 负责人:无 分享
已邀请:

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