【报Bug】form组件bug

示例代码：

<template>  
    <view class="container">  
        <view class="group-box">  
            <view class="group-box-title">发票须知</view>  
            <view class="group-box-body mt-20">  
                <view class="p">积分部分即可退回，可在积分明细中查看。</view>  
                <view class="p"  
                    >现金部分将按原支付方式退回，预计7个工作日内到账。</view  
                >  
            </view>  
        </view>  
        <view class="page-line"></view>  
        <uni-forms ref="form" :model="form">  
            <view class="group-box">  
                <view class="group-box-title">发票类型</view>  
                <uni-forms-item class="form-item" name="invoiceType">  
                    <view class="group-box-body btns">  
                        <view  
                            class="btn"  
                            :class="{  
                                current: form.invoiceType === i.value,  
                                disabled: i.disabled,  
                            }"  
                            @tap="checkInvoiceType(i)"  
                            v-for="i in invoiceTypeBtns"  
                            :key="i.value"  
                            >{{ i.name }}</view  
                        >  
                    </view>  
                </uni-forms-item>  

                <template v-if="form.invoiceType === 1">  
                    <view class="group-box-title">发票抬头</view>  
                    <view class="group-box-body btns">  
                        <view  
                            class="btn"  
                            :class="{ current: form.invoiceTitle === i.value }"  
                            @tap="checkInvoiceTitle(i)"  
                            v-for="i in invoiceTitleBtns"  
                            :key="i.value"  
                            >{{ i.name }}</view  
                        >  
                    </view>  
                </template>  
                <!-- 个人普票 -->  
                <template v-if="personGeneralTicket">  
                    <uni-forms-item class="form-item" name="invoiceHeader">  
                        <view class="group-box-body form-item">  
                            <view class="label required">个人名称</view>  
                            <view class="value">  
                                <uni-easyinput  
                                    v-model="form.invoiceHeader"  
                                    :clearable="false"  
                                    maxlength="5"  
                                    trim="all"  
                                    :inputBorder="false"  
                                    placeholder="请填写“个人”或您的姓名"  
                                    placeholderStyle="color:#C2C4CC;font-size:28rpx"  
                                ></uni-easyinput>  
                            </view>  
                        </view>  
                    </uni-forms-item>  
                </template>  
                <!-- 单位普票 -->  
                <template v-if="companyGeneralTicket">  
                    <uni-forms-item class="form-item" name="invoiceHeader">  
                        <view class="group-box-body form-item">  
                            <view class="label required">单位名称</view>  
                            <view class="value">  
                                <uni-easyinput  
                                    v-model="form.invoiceHeader"  
                                    :clearable="false"  
                                    trim="all"  
                                    :inputBorder="false"  
                                    placeholder="请输入单位名称"  
                                    placeholderStyle="color:#C2C4CC;font-size:28rpx"  
                                ></uni-easyinput>  
                            </view>  
                        </view>  
                    </uni-forms-item>  
                    <uni-forms-item class="form-item" name="dutyParagraph">  
                        <view class="group-box-body form-item">  
                            <view class="label required">纳税人识别号</view>  
                            <view class="value">  
                                <uni-easyinput  
                                    v-model="form.dutyParagraph"  
                                    :clearable="false"  
                                    trim="all"  
                                    :inputBorder="false"  
                                    placeholder="请输入纳税人识别号"  
                                    placeholderStyle="color:#C2C4CC;font-size:28rpx"  
                                ></uni-easyinput>  
                            </view>  
                        </view>  
                    </uni-forms-item>  
                </template>  
                <!-- 企业专票 -->  
                <template v-if="companySpecialTicket">  
                    <uni-forms-item class="form-item" name="invoiceHeader">  
                        <view class="group-box-body form-item">  
                            <view class="label required">发票抬头</view>  
                            <view class="value">  
                                <uni-easyinput  
                                    v-model="form.invoiceHeader"  
                                    :clearable="false"  
                                    trim="all"  
                                    :inputBorder="false"  
                                    placeholder="请输入发票抬头"  
                                    placeholderStyle="color:#C2C4CC;font-size:28rpx"  
                                ></uni-easyinput>  
                            </view>  
                        </view>  
                    </uni-forms-item>  
                    <uni-forms-item class="form-item" name="dutyParagraph">  
                        <view class="group-box-body form-item">  
                            <view class="label required">单位税号</view>  
                            <view class="value">  
                                <uni-easyinput  
                                    v-model="form.dutyParagraph"  
                                    :clearable="false"  
                                    trim="all"  
                                    :inputBorder="false"  
                                    placeholder="请输入单位税号"  
                                    placeholderStyle="color:#C2C4CC;font-size:28rpx"  
                                ></uni-easyinput>  
                            </view>  
                        </view>  
                    </uni-forms-item>  
                </template>  
                <!-- 单位普票/企业专票 -->  
                <template v-if="companyGeneralTicket || companySpecialTicket">  
                    <uni-forms-item class="form-item" name="companyAddress">  
                        <view class="group-box-body form-item">  
                            <view  
                                class="label"  
                                :class="{ required: companySpecialTicket }"  
                                >注册地址</view  
                            >  
                            <view class="value">  
                                <uni-easyinput  
                                    v-model="form.companyAddress"  
                                    :clearable="false"  
                                    trim="all"  
                                    :inputBorder="false"  
                                    placeholder="请输入注册地址"  
                                    placeholderStyle="color:#C2C4CC;font-size:28rpx"  
                                ></uni-easyinput>  
                            </view>  
                        </view>  
                    </uni-forms-item>  
                    <uni-forms-item class="form-item" name="companyPhone">  
                        <view class="group-box-body form-item">  
                            <view  
                                class="label"  
                                :class="{ required: companySpecialTicket }"  
                                >注册电话</view  
                            >  
                            <view class="value">  
                                <uni-easyinput  
                                    v-model="form.companyPhone"  
                                    :clearable="false"  
                                    maxlength="11"  
                                    type="number"  
                                    trim="all"  
                                    :inputBorder="false"  
                                    placeholder="请输入注册电话"  
                                    placeholderStyle="color:#C2C4CC;font-size:28rpx"  
                                ></uni-easyinput>  
                            </view>  
                        </view>  
                    </uni-forms-item>  
                    <uni-forms-item class="form-item" name="openingBank">  
                        <view class="group-box-body form-item">  
                            <view  
                                class="label"  
                                :class="{ required: companySpecialTicket }"  
                                >开户银行</view  
                            >  
                            <view class="value">  
                                <uni-easyinput  
                                    v-model="form.openingBank"  
                                    :clearable="false"  
                                    trim="all"  
                                    :inputBorder="false"  
                                    placeholder="请输入开户银行"  
                                    placeholderStyle="color:#C2C4CC;font-size:28rpx"  
                                ></uni-easyinput>  
                            </view>  
                        </view>  
                    </uni-forms-item>  
                    <uni-forms-item class="form-item" name="openingBankAccount"  
                        ><view class="group-box-body form-item">  
                            <view  
                                class="label"  
                                :class="{ required: companySpecialTicket }"  
                                >银行账号</view  
                            >  
                            <view class="value">  
                                <uni-easyinput  
                                    v-model="form.openingBankAccount"  
                                    :clearable="false"  
                                    trim="all"  
                                    :inputBorder="false"  
                                    placeholder="请输入银行账号"  
                                    placeholderStyle="color:#C2C4CC;font-size:28rpx"  
                                ></uni-easyinput>  
                            </view>  
                        </view>  
                    </uni-forms-item>  
                    <uni-forms-item class="form-item"> </uni-forms-item>  
                </template>  
            </view>  
            <view class="page-line"></view>  
            <view class="group-box">  
                <view class="group-box-title">收票人信息</view>  
                <uni-forms-item class="form-item" name="receiverPhone">  
                    <view class="group-box-body form-item">  
                        <view class="label required">收票人手机</view>  
                        <view class="value">  
                            <uni-easyinput  
                                v-model="form.receiverPhone"  
                                :clearable="false"  
                                maxlength="11"  
                                trim="all"  
                                :inputBorder="false"  
                                placeholder="请输入您的手机号"  
                                placeholderStyle="color:#C2C4CC;font-size:28rpx"  
                            ></uni-easyinput>  
                        </view>  
                    </view>  
                </uni-forms-item>  
                <uni-forms-item class="form-item" name="receiverName">  
                    <view class="group-box-body form-item">  
                        <view class="label required">收票人姓名</view>  
                        <view class="value">  
                            <uni-easyinput  
                                v-model="form.receiverName"  
                                :clearable="false"  
                                maxlength="5"  
                                trim="all"  
                                :inputBorder="false"  
                                placeholder="请输入您的姓名"  
                                placeholderStyle="color:#C2C4CC;font-size:28rpx"  
                            ></uni-easyinput>  
                        </view>  
                    </view>  
                </uni-forms-item>  
                <uni-forms-item class="form-item" name="receiverAddress">  
                    <view class="group-box-body form-item">  
                        <view class="label required">收票人地址</view>  
                        <view class="value">  
                            <uni-easyinput  
                                v-model="form.receiverAddress"  
                                :clearable="false"  
                                maxlength="5"  
                                trim="all"  
                                :inputBorder="false"  
                                placeholder="请输入具体地址"  
                                placeholderStyle="color:#C2C4CC;font-size:28rpx"  
                            ></uni-easyinput>  
                        </view>  
                    </view>  
                </uni-forms-item>  

                <view class="group-box-body form-item">  
                    <view class="label">收票人邮箱</view>  
                    <view class="value">  
                        <uni-easyinput  
                            v-model="form.receiverEmail"  
                            :clearable="false"  
                            maxlength="5"  
                            trim="all"  
                            :inputBorder="false"  
                            placeholder="请输入您的邮箱"  
                            placeholderStyle="color:#C2C4CC;font-size:28rpx"  
                        ></uni-easyinput>  
                    </view>  
                </view>  
            </view>  
        </uni-forms>  

        <view class="con-footer">  
            <view class="con-footer-amount">  
                开票金额：  
                <view class="price"  
                    >¥  
                    <text class="price-value">{{ '4345' }}</text>  
                </view>  
            </view>  
            <button  
                class="con-footer-btn"  
                hover-class="hover-btn"  
                @tap="submit"  
            >  
                确定  
            </button>  
        </view>  
    </view>  
</template>  

<script>  
export default {  
    data() {  
        return {  
            invoiceTypeBtns: [  
                { name: '普通发票', value: 1 },  
                { name: '企业专票', value: 0 },  
            ],  
            invoiceTitleBtns: [  
                { name: '个人', value: 0 },  
                { name: '单位', value: 1 },  
            ],  
            form: {  
                invoiceType: 1, // 发票类型 0 专票 1 普票  
                invoiceTitle: 0, // 发票抬头类型 0 个人 1 企业  

                invoiceHeader: '', // 发票抬头  
                dutyParagraph: '', // 税号  
                companyAddress: '', // 注册地址  
                companyPhone: '', // 注册电话  
                openingBank: '', // 开户银行  
                openingBankAccount: '', // 银行账号  
                /* 收票人信息 */  
                receiverPhone: '', // 收票人手机  
                receiverName: '', // 收票人姓名  
                receiverAddress: '', // 收票人地址  
                receiverEmail: '', // 收票人邮箱  
            },  
            rules: {},  
        }  
    },  
    computed: {  
        // 个人普票  
        personGeneralTicket({ form }) {  
            return form.invoiceType === 1 && form.invoiceTitle === 0  
        },  
        // 单位普票  
        companyGeneralTicket({ form }) {  
            return form.invoiceType === 1 && form.invoiceTitle === 1  
        },  
        // 企业专票  
        companySpecialTicket({ form }) {  
            return form.invoiceType === 0  
        },  
    },  
    onReady() {  
        this.initRules()  
    },  
    methods: {  
        submit() {  
            this.$refs.form  
                .validate()  
                .then(async (res) => {  
                    console.log('表单数据信息：', res)  
                })  
                .catch((err) => {  
                    console.log('表单错误信息：', err)  
                })  
        },  
        initRules() {  
            const {  
                personGeneralTicket,  
                companyGeneralTicket,  
                companySpecialTicket,  
            } = this  
            console.log(  
                personGeneralTicket,  
                companyGeneralTicket,  
                companySpecialTicket  
            )  
            const rules = {  
                invoiceHeader: {  
                    rules: [  
                        {  
                            required: true,  
                            errorMessage: `请输入${  
                                (personGeneralTicket && '“个人”或您的姓名') ||  
                                (companyGeneralTicket && '单位名称') ||  
                                (companySpecialTicket && '发票抬头')  
                            }`,  
                        },  
                    ],  
                },  
                dutyParagraph: {  
                    rules: [  
                        {  
                            required: true,  
                            errorMessage: `请输入${  
                                (companyGeneralTicket && '纳税人识别号') ||  
                                (companySpecialTicket && '单位税号')  
                            }`,  
                        },  
                        {  
                            pattern:  
                                '^[A-Z0-9]{15}$|^[A-Z0-9]{17}$|^[A-Z0-9]{18}$|^[A-Z0-9]{20}$',  
                            errorMessage: `请输入正确的${  
                                (companyGeneralTicket && '纳税人识别号') ||  
                                (companySpecialTicket && '单位税号')  
                            }`,  
                        },  
                    ],  
                },  
                companyAddress: {  
                    rules: [  
                        companySpecialTicket && {  
                            required: true,  
                            errorMessage: `请输入注册地址`,  
                        },  
                    ],  
                },  
                companyPhone: {  
                    rules: [  
                        companySpecialTicket && {  
                            required: true,  
                            errorMessage: `请输入注册电话`,  
                        },  
                        {  
                            pattern: '^(?:(?:\\+|00)86)?1\\d{10}$',  
                            errorMessage: '请填写正确的手机号',  
                        },  
                    ],  
                },  
                openingBank: {  
                    rules: [  
                        companySpecialTicket && {  
                            required: true,  
                            errorMessage: `请输入开户银行`,  
                        },  
                    ],  
                },  
                openingBankAccount: {  
                    rules: [  
                        companySpecialTicket && {  
                            required: true,  
                            errorMessage: `请输入银行账号`,  
                        },  
                    ],  
                },  
                receiverPhone: {  
                    rules: [  
                        {  
                            required: true,  
                            errorMessage: `请输入您的手机号`,  
                        },  
                        {  
                            pattern: '^(?:(?:\\+|00)86)?1\\d{10}$',  
                            errorMessage: '请填写正确的手机号',  
                        },  
                    ],  
                },  
                receiverName: {  
                    rules: [  
                        {  
                            required: true,  
                            errorMessage: `请输入您的姓名`,  
                        },  
                        {  
                            validateFunction: function (  
                                rule,  
                                value,  
                                data,  
                                callback  
                            ) {  
                                if (!value || value.length < 2) {  
                                    return callback('请填写正确的姓名')  
                                }  
                                return true  
                            },  
                        },  
                    ],  
                },  
                receiverAddress: {  
                    rules: [  
                        {  
                            required: true,  
                            errorMessage: `请输入具体地址`,  
                        },  
                    ],  
                },  
            }  
            this.$refs.form.setRules(rules)  
        },  
        // 切换发票类型  
        checkInvoiceType(item) {  
            this.clearValidate()  
            if (item.disabled) {  
                return  
            }  
            this.form.invoiceType = item.value  
            this.initRules()  
        },  
        // 切换发票抬头类型  
        checkInvoiceTitle(item) {  
            this.clearValidate()  
            if (item.disabled) {  
                return  
            }  
            this.form.invoiceTitle = item.value  
            this.initRules()  
        },  
        clearValidate() {  
            this.$refs.form.clearValidate([  
                'invoiceHeader',  
                'dutyParagraph',  
                'companyAddress',  
                'companyPhone',  
                'openingBank',  
                'openingBankAccount',  
                'receiverPhone',  
                'receiverName',  
                'receiverAddress',  
            ])  
        },  
    },  
}  
</script>  

<style lang="scss" scoped>  
.container {  
    background-color: #fff;  
    min-height: 100vh;  
    padding-bottom: 160rpx;  
    box-sizing: border-box;  
}  
.group-box {  
    padding: 32rpx 36rpx;  
    color: #221613;  
    &-title {  
        font-size: 32rpx;  
        line-height: 44rpx;  
        margin-bottom: 32rpx;  
        font-weight: bold;  
    }  
    &-body {  
        padding-bottom: 48rpx;  
        // &:last-child {  
        //  padding-bottom: 0;  
        // }  
        &.btns {  
            display: flex;  
            align-items: center;  
            padding-left: 6rpx;  
            .btn {  
                width: 160rpx;  
                height: 64rpx;  
                border: 1px solid #e8e7e7;  
                border-radius: 4rpx;  
                font-size: 24rpx;  
                color: #888f95;  
                display: flex;  
                align-items: center;  
                justify-content: center;  
                margin-right: 28rpx;  
                &.current {  
                    border-color: #221613;  
                    color: #221613;  
                }  
                &.disabled {  
                    filter: contrast(1.1);  
                    color: #d9d9d9;  
                }  
            }  
        }  
        &.form-item {  
            display: flex;  
            align-items: center;  
            justify-content: space-between;  
            padding-bottom: 0rpx;  
            .label {  
                font-size: 28rpx;  
                color: #888f95;  
                &.required {  
                    &::before {  
                        content: '*';  
                        color: #ed1919;  
                        font-size: 28rpx;  
                        margin-right: 8rpx;  
                    }  
                }  
            }  
        }  
        .p {  
            margin-top: 12rpx;  
            font-size: 24rpx;  
            line-height: 34rpx;  
            color: #888f95;  
        }  
    }  
}  
.con-footer {  
    position: fixed;  
    left: 0;  
    bottom: 0;  
    z-index: 9;  
    width: 100%;  
    height: 160rpx;  
    display: flex;  
    align-items: center;  
    justify-content: space-between;  
    padding: 16rpx 36rpx 72rpx;  
    box-sizing: border-box;  
    background-color: #fff;  
    box-shadow: 0px -2rpx 0px 0px rgba(232, 232, 232, 0.5);  
    &-amount {  
        display: flex;  
        align-items: center;  
        font-size: 26rpx;  
        .price {  
            font-size: 28rpx;  
            font-weight: bold;  
            color: #00c9e0;  
            &-value {  
                font-size: 40rpx;  
                font-weight: bold;  
                margin-left: 6rpx;  
            }  
        }  
    }  
    &-btn {  
        padding: 0 62rpx;  
        height: 72rpx;  
        border-radius: 4rpx;  
        background-color: #00c9e0;  
        display: flex;  
        align-items: center;  
        font-size: 28rpx;  
        line-height: 40rpx;  
        color: #fff;  
        margin: 0;  
        &::after {  
            display: none;  
        }  
    }  
}  
.hover-btn {  
    filter: brightness(90%);  
}  
.page-line {  
    height: 16rpx;  
    background-color: #fafafa;  
}  
.mt-20 {  
    margin-top: -20rpx;  
}  
/deep/ .uni-easyinput {  
    text-align: right;  
    width: 400rpx;  
    &__content-input {  
        padding-right: 0 !important;  
        font-size: 28rpx;  
        font-weight: bold;  
    }  
}  
/deep/ .uni-forms-item {  
    &__inner {  
        padding-bottom: 0;  
    }  
    &__label {  
        height: 0;  
        padding: 0;  
    }  
    &__content {  
        min-height: 0;  
    }  
}  
/deep/ .uni-error-message {  
    bottom: -22rpx;  
}  
</style>  

操作步骤：

来回切换发票类型和发票抬头，点击确定

预期结果：

必填项会被校验，提示用户错误信息

实际结果：

会发现部分表单项不被校验