对象格式的数据表单循环校验

 首先我们的代码数据是这样的(直接和后台对应)

 ruleForm: { 
        roadList: {
          vehicle: {
            name:"机动车",
            width: 0,
            length:0,
            area:0
          },
          notVehicle: {
            name:"非机动车",
            width: 0,
            length:0,
            area:0
          },
          walk: {
            name:"人行道",
            width: 0,
            length:0,
            area:0
          },
          other: {
            name: "其他"
            width: 0,
            length:0,
            area:0
          }
        }, 
      },

 html 代码处理

  <template v-for="(item, key, index) in ruleForm.roadList">
            <tr>
              <th>施工长度<p class="unit">({{item.name}})</p>
              </th>
              <td>
                // prop 中 roadList. 就是最上面绑定的数据 fuleForm.roadList   key 就是对应的roadList中具体某个对象, .length就对象中的具体字段
                <el-form-item :prop="'roadList.' + key + '.length'" :rules="{ required: true, message: '请输入施工长度', trigger: 'blur' }"> 
                // 其中rules校验,如果是绑定到el-form 标签上需要定义名字,而这个是动态类型的直接写的标签上更方便
                  <div class="flex">
                    <el-input placeholder="请输入施工长度" type="number" v-model.number="item.length" clearable :disabled="disabled" @input="changeArea(arguments,item)" autocomplete="off"></el-input><span class="unit">米</span>
                  </div>
                </el-form-item>
              </td> 
            </tr>
          </template>

换个思路如果前端页面遇到需要展示的内容是可以循环展示的,但是后台的数据不是数组形式的,我们就可以用这样的方式灵活处理

Ant Design Vue(简称antv-form)是一个基于Vue表单组件库,它提供了一套丰富的表单控件和便捷的API来进行数据验证。对于需要循环校验的情况,比如在一个数组或对象中有多条数据需要同时验证,你可以通过动态生成表单字段并利用其内置的`validateFields`或自定义验证函数来实现。 以下是一个简单的示例: 1. 首先,在模板中遍历数据,并使用`v-for`创建动态表单项: ```html <template> <a-form-model v-for="(item, index) in formData" :key="index"> <!-- 表单项内容 --> <a-input v-model="item.fieldName" :rules="[requiredRule]"></a-input> <!-- 更多表单控件... --> </a-form-model> </template> ``` 2. 然后,在Vue实例中,维护`formData`数组,并定义验证规则: ```javascript <script> export default { data() { return { formData: [ { fieldName: '' }, // 添加更多数据... ], requiredRule: { required: true, message: '必填', trigger: 'blur' }, }; }, methods: { validateAllFields() { this.$form.validateFields(this.formData.map(item => item.fieldName), { success: fieldsErrors => { if (fieldsErrors.every(fieldError => !fieldError)) { // 所有验证都通过了,处理成功逻辑... } else { // 有一些字段出错,处理错误逻辑... } }, error: errors => { console.log('验证失败:', errors); }, }); }, }, }; </script> ``` 在这个例子中,`validateAllFields`方法会一次性验证所有表单字段,如果所有字段都通过验证,就会执行后续的成功逻辑;如果有任何一个字段出错,则会返回错误信息。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值