antdesginVue 动态（循环）添加表单的每一项,校验每一项

最新推荐文章于 2024-04-22 16:03:00 发布

造梦者FZ

最新推荐文章于 2024-04-22 16:03:00 发布

阅读量1.1k

点赞数 1

分类专栏： vue 问题解决方案文章标签： vue.js javascript typescript 正则表达式

本文链接：https://blog.csdn.net/qq_43923146/article/details/127212586

版权

vue 同时被 2 个专栏收录

80 篇文章 5 订阅

订阅专栏

问题解决方案

10 篇文章 0 订阅

订阅专栏

antdesginVue 动态（循环）添加表单的每一项,校验每一项

在这里插入图片描述

 <a-card 
          v-for="(coordinate,index) in formState.sensors"
          :key="index"
          style="margin-bottom: 10px; margin-left: 6%; width: 90%"
          title="传感器"
        >
        <template #extra> 
          <a-button type="primary" danger ghost  @click="deleteCoor(coordinate,index)" size="small">删除</a-button>
          </template>
          <a-form-item :label="index+1+'号传感器名称'"  :name="['sensors', index, 'name']" :rules="{required: true, trigger: 'blur',message:'不能为空' }">
            <a-input
              v-model:value="coordinate.name"
              placeholder="请输入"
              allowClear
              :maxlength="20"
            />
          </a-form-item>
          <a-form-item label="传感器类型"  :name="['sensors', index, 'type']" :rules="{required: true, trigger: 'blur',message:'不能为空' }">
            <a-auto-complete
              v-model:value="coordinate.type"
              :options="typeList"
            >
            <a-input  placeholder="请选择" :maxlength="20"/>
            </a-auto-complete>
          </a-form-item>
          <a-form-item label="串口"  :name="['sensors', index, 'serial_port']"  :rules="{required: true, trigger: 'blur',pattern: new RegExp(/^[^\u4e00-\u9fa5\s]*$/),message:'不能为空且是英文、数字、特殊符号' }">
            <a-input
              v-model:value="coordinate.serial_port"
              placeholder="请输入"
              allowClear
              :maxlength="50"
            />
          </a-form-item>
        </a-card>