编程开源技术交流,分享技术与知识

网站首页 > 开源技术 正文

「绍棠」 iview 动态校验表单- 多个输入框分别校验

wxchong 2024-08-26 23:55:47 开源技术 11 ℃ 0 评论
<template>
<Row v-for="(ind,index) in AllData.monthTickets" :key="index" style="margin-bottom: 10px">
            <Card>
              <Alert type="warning">{{ ind.remark }}</Alert>
              <div style="display: flex;flex-direction: row;justify-content: space-between">
                <div style="display: flex;flex-direction: column">
                  <div v-for="(m1, index1) in 2" :key="'m1'+m1" class="freightClass">
                    <Row>
                      <Col span="8">
                        <FormItem label="重量区间:" :prop="'freightPrice[' + index + '][' + index1 + '].minimum'">
                          <Input size="large" placeholder="请输入" v-model="list.freightPrice[index][index1].minimum"
                                 style="width: 100px"/>
                        </FormItem>
                      </Col>
                      <Col span="8">
                        <FormItem label="-" :prop="'freightPrice[' + index + '][' + index1 + '].highest'">
                          <Input placeholder="请输入" size="large"
                                 v-model="list.freightPrice[index][index1].highest"
                                 style="width: 100px"/>
                        </FormItem>
                      </Col>

                    </Row>
                    <FormItem label="首重价格:" :prop="'freightPrice[' + index + '][' + index1 + '].firstHeavyPrice'">
                      <Input placeholder="请输入" size="large" v-model="list.freightPrice[index][index1].firstHeavyPrice"/>
                    </FormItem>
                    <FormItem label="续重价格:" :prop="'freightPrice[' + index + '][' + index1 + '].continuedHeavyPrice'">
                      <Input placeholder="请输入" size="large"
                             v-model="list.freightPrice[index][index1].continuedHeavyPrice"/>
                    </FormItem>
                  </div>
                </div>
                
              </div>
            </Card>
          </Row>
</template>

iview自带用循环来动态校验输入框,但循环多个input会同时加上校验规则。

ruleValidate: {
        "freightPrice[0][0].minimum": [{required: true, message: '请输入起始重量', trigger: 'blur'}],
        "freightPrice[0][0].highest": [{required: true, message: '请输入最大重量', trigger: 'blur'}],
        "freightPrice[0][1].minimum": [{required: true, message: '请输入起始重量', trigger: 'blur'}],
        "freightPrice[0][1].highest": [{required: true, message: '请输入最大重量', trigger: 'blur'}],
        "freightPrice[1][0].minimum": [{required: true, message: '请输入起始重量', trigger: 'blur'}],
        "freightPrice[1][0].highest": [{required: true, message: '请输入最大重量', trigger: 'blur'}],
        "freightPrice[1][1].minimum": [{required: true, message: '请输入起始重量', trigger: 'blur'}],
        "freightPrice[1][1].highest": [{required: true, message: '请输入最大重量', trigger: 'blur'}],
        "freightPrice[2][0].minimum": [{required: true, message: '请输入起始重量', trigger: 'blur'}],
        "freightPrice[2][0].highest": [{required: true, message: '请输入最大重量', trigger: 'blur'}],
        "freightPrice[2][1].minimum": [{required: true, message: '请输入起始重量', trigger: 'blur'}],
        "freightPrice[2][1].highest": [{required: true, message: '请输入最大重量', trigger: 'blur'}],
        "freightPrice[3][0].minimum": [{required: true, message: '请输入起始重量', trigger: 'blur'}],
        "freightPrice[3][0].highest": [{required: true, message: '请输入最大重量', trigger: 'blur'}],
        "freightPrice[3][1].minimum": [{required: true, message: '请输入起始重量', trigger: 'blur'}],
        "freightPrice[3][1].highest": [{required: true, message: '请输入最大重量', trigger: 'blur'}],
        "freightPrice[0][0].firstHeavyPrice": [{required: true, message: '请输入首重价格', trigger: 'blur'}],
        "freightPrice[0][1].firstHeavyPrice": [{required: true, message: '请输入首重价格', trigger: 'blur'}],
        "freightPrice[0][0].continuedHeavyPrice": [{required: true, message: '请输入续重价格', trigger: 'blur'}],
        "freightPrice[0][1].continuedHeavyPrice": [{required: true, message: '请输入续重价格', trigger: 'blur'}],
        "freightPrice[1][0].firstHeavyPrice": [{required: true, message: '请输入首重价格', trigger: 'blur'}],
        "freightPrice[1][1].firstHeavyPrice": [{required: true, message: '请输入首重价格', trigger: 'blur'}],
        "freightPrice[1][0].continuedHeavyPrice": [{required: true, message: '请输入续重价格', trigger: 'blur'}],
        "freightPrice[1][1].continuedHeavyPrice": [{required: true, message: '请输入续重价格', trigger: 'blur'}],
        "freightPrice[2][0].firstHeavyPrice": [{required: true, message: '请输入首重价格', trigger: 'blur'}],
        "freightPrice[2][1].firstHeavyPrice": [{required: true, message: '请输入首重价格', trigger: 'blur'}],
        "freightPrice[2][0].continuedHeavyPrice": [{required: true, message: '请输入续重价格', trigger: 'blur'}],
        "freightPrice[2][1].continuedHeavyPrice": [{required: true, message: '请输入续重价格', trigger: 'blur'}],
        "freightPrice[3][0].firstHeavyPrice": [{required: true, message: '请输入首重价格', trigger: 'blur'}],
        "freightPrice[3][1].firstHeavyPrice": [{required: true, message: '请输入首重价格', trigger: 'blur'}],
        "freightPrice[3][0].continuedHeavyPrice": [{required: true, message: '请输入续重价格', trigger: 'blur'}],
        "freightPrice[3][1].continuedHeavyPrice": [{required: true, message: '请输入续重价格', trigger: 'blur'}],

      },

效果图


Tags:

本文暂时没有评论,来添加一个吧(●'◡'●)

欢迎 发表评论:

最近发表
标签列表