vue.js

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > vue.js > Vue3 antDesignVue表单校验

Vue3+antDesignVue实现表单校验的方法

作者:m87里的光

这篇文章主要为大家详细介绍了基于Vue3和antDesignVue实现表单校验的方法,文中的示例代码讲解详细,具有一定的参考价值,需要的小伙伴可以了解下

<a-form
      ref="form"
      :model="form"
      :rules="rules"
      :label-col="{ md: { span: 6 }, sm: { span: 24 } }"
      :wrapper-col="{ md: { span: 18 }, sm: { span: 24 } }"
    >
      <!--      <a-form-item label='创建人:' name='createdBy'>-->
      <!--        <a-input-number v-model:value='form.createdBy' placeholder='请输入创建人' allow-clear autocomplete='off' style="width: 100%" />-->
      <!--      </a-form-item>-->
 
      <a-form-item label="项目编号:" name="projectCode">
        <a-input v-model:value="form.projectCode" placeholder="请输入项目编号" style="width: 50%" allow-clear autocomplete="off" />
      </a-form-item>
      <a-form-item label="项目名称:" name="projectName">
        <a-input v-model:value="form.projectName" placeholder="请输入项目名称" style="width: 50%" allow-clear autocomplete="off" />
      </a-form-item>
      <a-form-item label="项目承担单位:" name="company">
        <a-input v-model:value="form.company" placeholder="请输入项目承担单位" style="width: 50%" allow-clear autocomplete="off" />
      </a-form-item>
      <a-form-item label="项目目的和意义:" name="purpose">
        <a-textarea v-model:value="form.purpose" placeholder="请输入项目目的和意义" style="width: 50%" allow-clear autocomplete="off" />
      </a-form-item>
      <a-form-item label="技术水平:" name="level">
        <a-select
          ref="select"
          v-model:value="form.level"
          style="width: 40%"
          placeholder="请选择技术水平"
          @focus="focus"
          @change="handleChange"
        >
          <a-select-option value="国际先进">国际先进</a-select-option>
          <a-select-option value="国际领先">国际领先</a-select-option>
          <a-select-option value="国内先进">国内先进</a-select-option>
          <a-select-option value="国内领先">国内领先</a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item label="项目类型:" name="projectType">
        <a-select
          ref="select"
          v-model:value="form.projectType"
          placeholder="请选择项目类型"
          style="width: 40%"
          @focus="focus"
          @change="handleChange"
        >
          <a-select-option value="产学研合作">产学研合作</a-select-option>
          <a-select-option value="自主研发">自主研发</a-select-option>
          <a-select-option value="其他">其他</a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item label="项目主要内容:" name="content">
        <a-textarea v-model:value="form.content" placeholder="请输入项目主要内容" style="width: 50%" allow-clear autocomplete="off" />
      </a-form-item>
      <a-form-item label="项目前期准备工作、调研计划:" name="plan">
        <a-textarea
          v-model:value="form.plan"
          placeholder="请输入项目前期准备工作、调研计划"
          style="width: 50%"
          allow-clear
          autocomplete="off"
        />
      </a-form-item>
      <a-form-item label="项目预计科技投入总额:" name="investment">
        <a-input-number
          v-model:value="form.investment"
          placeholder="请输入项目预计科技投入总额"
          style="width: 50%"
          allow-clear
          autocomplete="off"
          addon-before="RMB"
          addon-after="万元"
        />
      </a-form-item>
      <a-form-item label="前期准备工作进展、项目调研进展:" name="progress">
        <a-textarea
          v-model:value="form.progress"
          placeholder="请输入前期准备工作进展、项目调研进展"
          style="width: 50%"
          allow-clear
          autocomplete="off"
        />
      </a-form-item>
      <a-form-item label="已累计投入总额:" name="spent">
        <a-input-number
          v-model:value="form.spent"
          placeholder="请输入已累计投入总额"
          style="width: 50%"
          allow-clear
          autocomplete="off"
          addon-before="RMB"
          addon-after="万元"
        />
      </a-form-item>
      <a-form-item label="项目调研报告(或总结):" name="report">
        <a-upload
          name="file"
          ref="uploadRef"
          class="upload-list"
          v-model:file-list="fileList"
          :multiple="false"
          :action="FileUploadUrl"
          :headers="headers"
          :before-upload="beforeUpload"
          :custom-request="customRequest"
          @change="handleChange"
          @remove="handleRemove"
        >
          <a-button v-if="fileList.length < 1">
            <template #icon>
              <CloudUploadOutlined />
            </template>
            <span>选择文件</span>
          </a-button>
        </a-upload>
      </a-form-item>
    </a-form>

 data() {
    return {
      fileList: [],
 
      // 表单数据
      form: Object.assign({}, this.data),
      // 表单验证规则
      rules: {
        createdBy: [{ required: true, message: '请输入创建人', type: 'number', trigger: 'blur' }],
        projectName: [{ required: true, message: '请输入项目名称', type: 'string', trigger: 'blur' }],
        company: [{ required: true, message: '请输入项目承担单位', type: 'string', trigger: 'blur' }],
        purpose: [{ required: true, message: '请输入项目目的和意义', type: 'string', trigger: 'blur' }],
        level: [{ required: true, message: '请输入技术水平', type: 'string', trigger: 'blur' }],
        projectType: [{ required: true, message: '请输入项目类型', type: 'string', trigger: 'blur' }],
        content: [{ required: true, message: '请输入项目主要内容', type: 'string', trigger: 'blur' }],
        plan: [{ required: true, message: '请输入项目前期准备工作、调研计划', type: 'string', trigger: 'blur' }],
        investment: [{ required: true, message: '请输入项目预计科技投入总额', type: 'number', trigger: 'blur' }],
        postTime: [{ required: true, message: '请输入', type: 'string', trigger: 'blur' }],
        status: [{ required: true, message: '请输入', type: 'string', trigger: 'blur' }],
        progress: [{ required: true, message: '请输入前期准备工作进展、项目调研进展', type: 'string', trigger: 'blur' }],
        report: [{ required: true, message: '请输入项目调研报告(或总结)', type: 'change', trigger: 'blur' }],
        projectCode: [{ required: true, message: '请输入项目编号', type: 'string', trigger: 'blur' }],
        spent: [{ required: true, message: '请输入已累计投入总额', type: 'number', trigger: 'blur' }]
      },
      // 提交状态
      loading: false,
      headers: {
        Authorization: getToken()
      },
      // 是否是修改
      isUpdate: false
    };
  },

到此这篇关于Vue3+antDesignVue实现表单校验的方法的文章就介绍到这了,更多相关Vue3 antDesignVue表单校验内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

您可能感兴趣的文章:
阅读全文