uniapp 下 動態表單的校驗問題

剛搗鼓Uniapp不久，做一個動態表單的Demo，發現不能動態校驗，因為對前段知識研究不深，瞎弄。

目前問題解決了，解決的思路如下：

在uni的組件【uni-form】的驗證方法【validateField】增加代碼，下面圈紅圈的是新增的代碼。

 

同時，業務的界面的數據和校驗規則定義也要有要求，下面是完整的業務界面的Demo代碼：

//包裹預報
<template>
    <view>
        <u--form labelPosition="left" :model="form" :rules="rules" ref="form1">


            <!--     <u-form-item label="運單號:" labelWidth="90px">
                <u--input v-model="form.waybill"></u--input>
            </u-form-item> -->

            <view v-for=" (good,index) in form.goodsAry" :key="index">

                <view class="p_item">
                    <view class="goodName">
                        <u-form-item :prop="`goodsAry.${index}.name`"  borderBottom>
                            <u--input v-model="good.name" placeholder="名稱"></u--input>
                        </u-form-item>
                    </view>
                    <view class="goodInfo">
                        <u-form-item  :prop="`goodsAry.${index}.qty`" borderBottom>
                            <u--input v-model="good.qty" placeholder="數量" ></u--input>
                        </u-form-item>

                        <u-form-item borderBottom  :prop="`goodsAry.${index}.price`">
                            <u--input v-model="good.price" placeholder="單價" ></u--input>
                        </u-form-item>

                        <u-form-item borderBottom  :prop="`goodsAry.${index}.amount`">
                            <u--input v-model="good.amount" placeholder="總價" ></u--input>
                        </u-form-item>

                    </view>
                    <view class="opt">
                        <u-button @click="addGood()">add</u-button>
                    </view>
                </view>


            </view>


        </u--form>
        
            <u-button @click="submit()">提交</u-button>
    </view>
</template>

<script>
    const itemRule= {
                        name: [{
                                type: 'string',
                                required: true,
                                message: '請輸入用戶名',
                                trigger: ['blur', 'change'],
                            },
                            {
                                min: 6,
                                message: '請輸入至少6個字符',
                                trigger: ['blur', 'change'],
                            }
                        ],
                        qty: [{
                                    type: 'string',
                                    required: true,
                                    message: '請填寫數量',
                                    trigger: ['blur', 'change'],
                                } 
                            ],
                            price:[{
                                type: 'string',
                                required: true,
                                message: '請填寫單價',
                                trigger: ['blur', 'change'],
                            }]
                        };
    export default {
        
        data() {
            return {
                rules: {
                    goodsAry:  []
                    },
                                        
                     
                    

                form: {
                    waybill: '',
                    goodsAry: [],
                    qty: 0,
                    amount: 0.00
                },
            }
        },
          onReady: function() {
                   //  this.$refs.form.setRules(this.rules.goodsRule);
                   this.addGood();
                 },
        methods: {
            addGood() {
                this.form.goodsAry.push({});
                this.rules.goodsAry.push(itemRule);
            }
            ,
            submit()
            {
             
             
                this.$refs.form1.validateField('goodsAry.0.name')
                    this.$refs.form1.validate().then(res => {
                                    uni.$u.toast('校驗通過')
                                }).catch(errors => {
                                    uni.$u.toast('校驗失敗')
                                })
            }
        }
    }
</script>

<style lang="scss">
    .p_item {}

    .p_item .goodName {}

    .p_item .goodInfo {
        display: flex;
        flex-direction: row;
    }

    .p_item .opt {}
</style>