antdesginVue 表单循环校验

最新推荐文章于 2023-08-14 15:30:12 发布

造梦者FZ

最新推荐文章于 2023-08-14 15:30:12 发布

阅读量413

点赞数

分类专栏： vue 文章标签： typescript 前端 javascript

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

版权

vue 专栏收录该内容

80 篇文章 4 订阅

订阅专栏

antdesginVue 表单循环校验

HTML部分代码


 <div
          style="
          border-top: 1px solid #a9a8ab;
          border-bottom: 1px solid #a9a8ab;
          border-width: 80%;
          padding-top: 15px;
          margin-bottom: 20px;
          padding-bottom: 20px;
        "
      >
          <span style="margin:0 0 4% 4%;display: block; font-weight: bold">
            坐标（至少3个点,第一个点和最后一个点为同一点，围成一个闭合区域,批量导入数据格式应纬经度以逗号隔开，每组以分号隔开，例如：445.5652,454.7844;775.5652,854.7844;445.5652,454.7844;）
          </span>
          <a-button style="margin: 0 10px 10px 10%" @click="addCoor" type="primary" ghost>新增点</a-button>
          <a-button type="primary" @click="Import">批量导入</a-button>
        <a-card 
          v-for="(location,index) in formState.location"
          :key="index"
          style="margin-bottom: 10px; margin-left: 6%; width: 90%"
          title="坐标"
        >
          <template #extra><a-button  type="primary" danger ghost size="small"  @click="deleteCoor(index)">删除</a-button></template>
          <span style="font-weight: bold">点{{ index + 1 }}</span>
          <a-form-item label="纬度" :name="['location', index, 'latitude']" :rules="{required: true,trigger: 'blur',validator: validatePass}">
            <a-input
              v-model:value="location.latitude"
              placeholder="整数位1-3位，小数位固定四位"
              allowClear  
            />
          </a-form-item>
          <a-form-item label="经度" :name="['location', index, 'longitude']" :rules="{required: true,trigger: 'blur',validator: validatePass}">
            <a-input
              v-model:value="location.longitude"
              placeholder="整数位1-3位，小数位固定四位"
              allowClear
            />
          </a-form-item>
        </a-card>
      </div>

//自定义校验
  let validatePass = async (rule: any, value: string) => {
      if(value === ''){
        return Promise.reject('请输入');
      } else {
        if(!longitude.test(value)){
          return Promise.reject('请输入整数位1-3位,小数位固定四位');
        } 
      }
        return Promise.resolve();
    };