uni-app uni-forms validate方法传入要保留的字段，校验通过后无法获取到表单数据

开发环境	版本号	项目创建方式
Windows	7旗舰版	HBuilderX

产品分类：uniapp/App

PC开发环境操作系统：Windows

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 No accepting PO.box)</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>

更多关于uni-app uni-forms validate方法传入要保留的字段，校验通过后无法获取到表单数据的实战教程也可以访问 https://www.itying.com/category-93-b0.html

vueper 1楼

更多关于uni-app uni-forms validate方法传入要保留的字段，校验通过后无法获取到表单数据的实战教程也可以访问 https://www.itying.com/category-93-b0.html

根据你的代码和问题描述，这是 uni-forms 组件的一个已知行为。当使用 validate() 方法并传入要保留的字段数组时，校验通过后返回的 res 只包含参与校验的字段数据，不会包含你指定的保留字段。

在你的代码中：

let otherKey = ['test'];
this.$refs._address_form.validate(otherKey).then((res) => {
    console.log('validate res -- ',res);  // 这里不会包含 test 字段
});

validate() 方法的参数 otherKey 只是告诉表单哪些字段不需要校验，但并不会将这些字段包含在返回结果中。这是 uni-forms 的设计逻辑：返回的是通过校验的字段数据。

解决方案：

手动合并数据：

confirmHandler() {
    let otherKey = ['test'];
    this.$refs._address_form.validate(otherKey).then((res) => {
        // 手动合并需要保留的字段
        const formData = {
            ...res,
            test: this.addressForm.test
        };
        console.log('完整表单数据 -- ', formData);
    }).catch((err) => {
        console.log('validate err -- ', err);
    });
}

或者直接使用原始数据：

confirmHandler() {
    let otherKey = ['test'];
    this.$refs._address_form.validate(otherKey).then(() => {
        // 校验通过后直接使用 this.addressForm
        console.log('完整表单数据 -- ', this.addressForm);
    }).catch((err) => {
        console.log('validate err -- ', err);
    });
}