AntDesign表单验证

在实现输入错误或者为空的情况下 如下图(有错误提示，不可提交)

AB142DD0-13FE-472F-999B-350FCDE0C9B2.png

ok直接上代码吧

<template>
  <div class="modal_content">
    <a-form :form="form" @submit="handleSubmit">
      <a-form-item label="文章栏目" :label-col="labelCol" :wrapper-col="wrapperCol">
        <a-select
        placeholder="请选择"
        v-decorator="['article_id', { rules: [{ required: true, message: '文章栏目不能为空！' }] }]"
         @change="handleSelectChange">
          <a-select-option
            placeholder="请选择"
            v-for="(item, index) in article"
            :key="item.index"
            :title="item.article_name"
            :value="item.article_id"
            >{{ item.article_name}}</a-select-option>
        </a-select>
      </a-form-item>

      <a-form-item label="细分领域" :label-col="labelCol" :wrapper-col="wrapperCol">
        <a-select
          placeholder="请选择"
          v-decorator="['niche_id', { rules: [{ required: true, message: '细分领域不能为空！' }] }]"
          @change="handleSelectChange"
        >
          <a-select-option
            v-for="(item, index) in niche"
            :key="item.index"
            :title="item.niche_name"
            :value="item.niche_id"
          >{{ item.niche_name }}</a-select-option>
        </a-select>
      </a-form-item>

      <a-form-item label="标签" :label-col="labelCol" :wrapper-col="wrapperCol">
        <a-checkbox-group
          v-decorator="['label_id', { rules: [{ required: true, message: '标签不能为空！' }] }]"
        >
          <div class="check-wrap">
            <a-checkbox
              v-for="item in label"
              :key="item.label_id"
              :value="item.label_id"
            >{{ item.label_name }}</a-checkbox>
          </div>
        </a-checkbox-group>
      </a-form-item>

          <a-form-item label="封面图上传" :label-col="labelCol" :wrapper-col="wrapperCol">
            <a-upload
              v-decorator="['img_name', { rules: [{ required: true, message: '封面图不能为空！' }],}]"
              name="file"
              list-type="picture-card"
              class="avatar-uploader"
              :show-upload-list="false"
              action="http://192.168.110.41:8000/quick_poll/api_back_alert_upload/"
              :before-upload="beforeUpload"
              @change="handleChange"
            >
              <img v-if="imageUrl" style="height:20%;" :src="imageUrl" alt="avatar">
              <div v-else>
                <a-icon :type="loading ? 'loading' : 'plus'" />
                <!-- <div class="ant-upload-text">Upload</div> -->
              </div>
            </a-upload>
          </a-form-item>

      <a-form-item label="资讯标题" :label-col="labelCol" :wrapper-col="wrapperCol">
        <a-input
          placeholder="请输入内容"
          autocomplete="off"
          v-decorator="['news_title', { rules: [{ required: true, message: '标题不能为空！', }] }]"
        ></a-input>
      </a-form-item>

      <a-form-item label="地域" :label-col="labelCol" :wrapper-col="wrapperCol">
        <a-select
          placeholder="请选择"
          v-decorator="['regional_id', { rules: [{ required: true, message: '地域不能为空！' }] }]"
          @change="handleSelectChange"
        >
          <a-select-option
            v-for="(item, index) in regional"
            :key="item.index"
            :title="item.regional_name"
            :value="item.regional_id"
          >{{ item.regional_name }}</a-select-option>
        </a-select>
      </a-form-item>

      <a-form-item label="来源" :label-col="labelCol" :wrapper-col="wrapperCol">
        <a-select
          placeholder="请选择"
          v-decorator="['source_id', { rules: [{ required: true, message: '来源不能为空！' }] }]"
          @change="handleSelectChange"
        >
          <a-select-option
            v-for="item in source"
            :key="item.source_id"
            :title="item.source_name"
            :value="item.source_id"
          >{{ item.source_name }}</a-select-option>
        </a-select>
      </a-form-item>

      <a-form-item label="作者" :label-col="labelCol" :wrapper-col="wrapperCol">
        <a-select
          placeholder="请选择"
          v-decorator="['author_id', { rules: [{ required: true, message: '作者不能为空！' }] }]"
          @change="handleSelectChange"
        >
          <a-select-option
            v-for="item in author"
            :key="item.author_id"
            :title="item.author_name"
            :value="item.author_id"
          >{{ item.author_name }}</a-select-option>
        </a-select>
      </a-form-item>

      <a-form-item label="摘要" :label-col="labelCol" :wrapper-col="wrapperCol">
        <a-input
          type="textarea"
          :rows="2"
          placeholder="请输入内容"
          autocomplete="off"
          v-decorator="['abstract', { rules: [{ required: true, message: '摘要不能为空！', }] }]"
        ></a-input>
      </a-form-item>

      <a-form-item label="内容" :label-col="labelCol" :wrapper-col="wrapperCol">
        <a-card style="height:260px">
          <quill-editor style="height: 100px;" @change="content">
            <div slot="header"></div>
            <div></div>
          </quill-editor>
        </a-card>
      </a-form-item>

          <a-form-item :wrapper-col="button">
            <a-button type="primary" html-type="submit">添加</a-button>
            <a-button style="margin-left:20px;" @click="CancelColumn">取消</a-button>
          </a-form-item>
      
    </a-form>
  </div>
</template>

<script>
import { getNewsAdd } from '@/api/news'
import { addNews } from '@/api/news'
import { quillEditor } from 'vue-quill-editor'
import { postImageData } from '@/api/news'
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'

function getBase64(img, callback) {
  const reader = new FileReader()
  reader.addEventListener('load', () => callback(reader.result))
  reader.readAsDataURL(img)
}

export default {
  name: 'AddForm',
  // 注册组键
  components: {
    quillEditor
  },
  // 获取到绑定值
  props: ['offModel'],

  data() {
    return {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 4 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 19 }
      },
      button: {
        span: 18,
        offset: 4
      },
      loading: false,
      imageUrl: '',
      img_name: '',
      content1: '',
      article: '',
      niche: [],
      label: [],
      author: [],
      source: [],
      regional: [],
      form: this.$form.createForm(this)
    }
  },
  mounted() {
    getNewsAdd().then(resp => {
      this.article = resp.data.article
      this.niche = resp.data.niche
      this.label = resp.data.label
      this.author = resp.data.author
      this.source = resp.data.source
      this.regional = resp.data.regional
    })
  },

  methods: {

    // 表单是验证
    handleSubmit(e) {
      e.preventDefault()
      this.form.validateFields({ force: true }, (err, values) => {
        if (!err) {
          // 验证成功后发送请求
          values.img_name = this.img_name
          values.content = this.content1
          const param_q = new URLSearchParams(values)
          addNews(param_q).then(resp => {
            this.$store.dispatch('get_news')
          })
          this.offModel()
          this.$message({ type: 'success', message: '添加成功!' })
        } else {
          this.form.setFieldsValue({
            note: `Hi, ${value === 'male' ? 'man' : 'lady'}!`
          })
        }
      })
    },
    // 下拉的内容
    handleSelectChange(value) {},

    // 编辑器的内容
    content(value) {
      this.content1 = value.html
    },

    CancelColumn() {
      this.$message({ type: 'info', message: '已取消添加' })
      this.offModel()
    },

    handleChange(info) {
      if (info.file.status === 'uploading') {
        this.loading = true
        return
      }
      if (info.file.status === 'done') {
        // Get this url from response in real world.
        getBase64(info.file.originFileObj, imageUrl => {
          this.imageUrl = imageUrl
          this.loading = false
          this.img_name = info.file.response.msg
        })
      }
    },
    // 上传文件之前的钩子，参数为上传的文件
    beforeUpload(file) {
      const isJPG = file.type === 'image/jpeg'
      if (!isJPG) {
        this.$message('请上传jpg格式')
      }
      const isLt2M = file.size / 1024 / 1024 < 2
      if (!isLt2M) {
        this.$message('请上传图片小于2MB!')
      }
      return isJPG && isLt2M
    }
  }
}
</script>

<style lang="scss">
.flex_box {
  width: 100%;
  display: flex;
  flex-flow: row;
  &_flxed {
    width: 100%;
  }
}
// 图片上传样式
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
.check-wrap {
  padding: 10px 15px;
  border: 1px solid rgba(0, 0, 0, 0.15);
  .ant-checkbox-wrapper {
    padding: 5px 0;
    &:first-child {
      margin-left: 8px;
    }
  }
}
</style>