Ant Design Vue 表单验证踩坑

最新推荐文章于 2025-04-20 11:29:52 发布

乡村里的一股清流

最新推荐文章于 2025-04-20 11:29:52 发布

阅读量4.9k

点赞数 1

分类专栏： vue ant design vue

本文链接：https://blog.youkuaiyun.com/weixin_44415625/article/details/104008001

版权

在最近采用Ant Design Vue的项目中，作者遇到了表单验证的困难，发现不能像使用elementUI或Iview那样直接用v-model进行验证。文章通过分享遇到的问题和贴出的代码示例，主要探讨了Ant Design Vue中如何实现必填项验证。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最近一个项目用了 Ant Design Vue ，我也不知道为啥用这个。。。FORM表单验证踩地坑简直是让我哭哭哭

以前用elementUI,Iview,很顺手，v-model简直是标配

可是这个Ant Design Vue 在需要验证的时候不能用 `v-model`,用`v-decoration`。

贴代码如下

<style lang="less">
@import 'sourceManage';
</style>
<template>
  <div ref="sourceManage">
    <a-row :gutter="24">
      <a-col :sm="12" :md="8" :xl="8">
        <h3>
          所属类目：
          <span>{
  {databaseType}}</span>
        </h3>
      </a-col>
      <a-col :sm="12" :md="3" :xl="3"  :offset="11">
        <a-button type="primary" icon="plus" @click="showSourseForm">添加源</a-button>
      </a-col>
    </a-row>
    <a-row :gutter="24" style="margin-top:30px;" v-if="databaseInformation.length">
      <a-col  :sm="12" :md="8" :xl="8" :style="{ marginBottom: '24px' }" v-for = "(databaseInfo,key) in databaseInformation" :key="key" >
        <a-card class="datatop">
          <a-icon type="check-circle" style="fontSize:16px;color:red" v-if="false"/>
          <a-icon type="close-circle" style="fontSize:16px;color:blue" />
          <span style="margin-left:100px;font-size:16px"><strong>information {
  {key+1}}</strong></span>
        </a-card>
        <a-card class="datacontent">
          <a-row>
            <a-col :span="4">  <a-icon type="database" theme="twoTone" style="fontSize:50px;color:blue;margin-top:10px" /></a-col>
            <a-col :span="10"> 
              <p><strong>库名称：</strong>{
  {databaseInfo.connectionName}}</p>
              <p><strong>IP：</strong>{
  {databaseInfo.databaseIp}}</p>
              <p><strong>描述: </strong>{
  {databaseInfo.databaseDescript || '无'}}</p>
            </a-col>
            <a-col :span="9" :offset="1">
             <p> <strong>类型：&