欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Vue3+antDesignVue實(shí)現(xiàn)表單校驗的方法

 更新時間：2024年01月19日 09:43:23   作者：m87里的光  
這篇文章主要為大家詳細(xì)介紹了基于Vue3和antDesignVue實(shí)現(xiàn)表單校驗的方法,文中的示例代碼講解詳細(xì),具有一定的參考價值,需要的小伙伴可以了解下

一

<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='創(chuàng)建人:' name='createdBy'>-->
      <!--        <a-input-number v-model:value='form.createdBy' placeholder='請輸入創(chuàng)建人' 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="項目承擔(dān)單位:" name="company">
        <a-input v-model:value="form.company" placeholder="請輸入項目承擔(dān)單位" 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="技術(shù)水平:" name="level">
        <a-select
          ref="select"
          v-model:value="form.level"
          style="width: 40%"
          placeholder="請選擇技術(shù)水平"
          @focus="focus"
          @change="handleChange"
        >
          <a-select-option value="國際先進(jìn)">國際先進(jìn)</a-select-option>
          <a-select-option value="國際領(lǐng)先">國際領(lǐng)先</a-select-option>
          <a-select-option value="國內(nèi)先進(jìn)">國內(nèi)先進(jìn)</a-select-option>
          <a-select-option value="國內(nèi)領(lǐng)先">國內(nèi)領(lǐng)先</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="產(chǎn)學(xué)研合作">產(chǎn)學(xué)研合作</a-select-option>
          <a-select-option value="自主研發(fā)">自主研發(fā)</a-select-option>
          <a-select-option value="其他">其他</a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item label="項目主要內(nèi)容:" name="content">
        <a-textarea v-model:value="form.content" placeholder="請輸入項目主要內(nèi)容" style="width: 50%" allow-clear autocomplete="off" />
      </a-form-item>
      <a-form-item label="項目前期準(zhǔn)備工作、調(diào)研計劃:" name="plan">
        <a-textarea
          v-model:value="form.plan"
          placeholder="請輸入項目前期準(zhǔn)備工作、調(diào)研計劃"
          style="width: 50%"
          allow-clear
          autocomplete="off"
        />
      </a-form-item>
      <a-form-item label="項目預(yù)計科技投入總額:" name="investment">
        <a-input-number
          v-model:value="form.investment"
          placeholder="請輸入項目預(yù)計科技投入總額"
          style="width: 50%"
          allow-clear
          autocomplete="off"
          addon-before="RMB"
          addon-after="萬元"
        />
      </a-form-item>
      <a-form-item label="前期準(zhǔn)備工作進(jìn)展、項目調(diào)研進(jìn)展:" name="progress">
        <a-textarea
          v-model:value="form.progress"
          placeholder="請輸入前期準(zhǔn)備工作進(jìn)展、項目調(diào)研進(jìn)展"
          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="項目調(diào)研報告（或總結(jié)）:" 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: [],
 
      // 表單數(shù)據(jù)
      form: Object.assign({}, this.data),
      // 表單驗證規(guī)則
      rules: {
        createdBy: [{ required: true, message: '請輸入創(chuàng)建人', type: 'number', trigger: 'blur' }],
        projectName: [{ required: true, message: '請輸入項目名稱', type: 'string', trigger: 'blur' }],
        company: [{ required: true, message: '請輸入項目承擔(dān)單位', type: 'string', trigger: 'blur' }],
        purpose: [{ required: true, message: '請輸入項目目的和意義', type: 'string', trigger: 'blur' }],
        level: [{ required: true, message: '請輸入技術(shù)水平', type: 'string', trigger: 'blur' }],
        projectType: [{ required: true, message: '請輸入項目類型', type: 'string', trigger: 'blur' }],
        content: [{ required: true, message: '請輸入項目主要內(nèi)容', type: 'string', trigger: 'blur' }],
        plan: [{ required: true, message: '請輸入項目前期準(zhǔn)備工作、調(diào)研計劃', type: 'string', trigger: 'blur' }],
        investment: [{ required: true, message: '請輸入項目預(yù)計科技投入總額', type: 'number', trigger: 'blur' }],
        postTime: [{ required: true, message: '請輸入', type: 'string', trigger: 'blur' }],
        status: [{ required: true, message: '請輸入', type: 'string', trigger: 'blur' }],
        progress: [{ required: true, message: '請輸入前期準(zhǔn)備工作進(jìn)展、項目調(diào)研進(jìn)展', type: 'string', trigger: 'blur' }],
        report: [{ required: true, message: '請輸入項目調(diào)研報告（或總結(jié)）', type: 'change', trigger: 'blur' }],
        projectCode: [{ required: true, message: '請輸入項目編號', type: 'string', trigger: 'blur' }],
        spent: [{ required: true, message: '請輸入已累計投入總額', type: 'number', trigger: 'blur' }]
      },
      // 提交狀態(tài)
      loading: false,
      headers: {
        Authorization: getToken()
      },
      // 是否是修改
      isUpdate: false
    };
  },

到此這篇關(guān)于Vue3+antDesignVue實(shí)現(xiàn)表單校驗的方法的文章就介紹到這了,更多相關(guān)Vue3 antDesignVue表單校驗內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

相關(guān)文章

  • vue組件和iframe頁面的相互傳參問題及解決

    vue組件和iframe頁面的相互傳參問題及解決

    這篇文章主要介紹了vue組件和iframe頁面的相互傳參問題及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
    2022-05-05
  • vue中解決chrome瀏覽器自動播放音頻和MP3語音打包到線上的實(shí)現(xiàn)方法

    vue中解決chrome瀏覽器自動播放音頻和MP3語音打包到線上的實(shí)現(xiàn)方法

    這篇文章主要介紹了vue中解決chrome瀏覽器自動播放音頻和MP3語音打包到線上的實(shí)現(xiàn)方法,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下
    2020-10-10
  • vite分目錄打包及去掉默認(rèn)的.gz?文件的操作方法

    vite分目錄打包及去掉默認(rèn)的.gz?文件的操作方法

    Vite在默認(rèn)配置下會將資源打包至assets文件夾并添加哈希值,不同于Webpack的多文件夾存放方式,Vite只對public文件夾不進(jìn)行打包處理,而Webpack不打包public和static文件夾,本文介紹vite分目錄打包及去掉默認(rèn)的.gz?文件的操作方法,感興趣的朋友一起看看吧
    2024-09-09
  • Vue.js 圖標(biāo)選擇組件實(shí)踐詳解

    Vue.js 圖標(biāo)選擇組件實(shí)踐詳解

    這篇文章主要介紹了Vue.js 圖標(biāo)選擇組件實(shí)踐詳解，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
    2018-12-12
  • vue接入騰訊防水墻代碼

    vue接入騰訊防水墻代碼

    這篇文章主要介紹了vue接入騰訊防水墻代碼，代碼超級簡單，非常不錯，具有一定的參考借鑒價值 ,需要的朋友可以參考下
    2019-05-05
  • Element UI表單組件進(jìn)行通信的代碼詳解

    Element UI表單組件進(jìn)行通信的代碼詳解

    Element UI是一個為Vue.js開發(fā)的優(yōu)秀 UI 組件庫,它提供了豐富的組件,包括表單組件,Element UI的表單組件可以幫助開發(fā)者快速構(gòu)建和管理表單,提高開發(fā)效率,在實(shí)際開發(fā)中,我們經(jīng)常需要在表單組件之間進(jìn)行通信,本文將詳細(xì)介紹Element UI表單組件如何進(jìn)行通信
    2025-02-02
  • vuex vue簡單使用知識點(diǎn)總結(jié)

    vuex vue簡單使用知識點(diǎn)總結(jié)

    在本篇文章里小編給大家整理了關(guān)于vuex vue簡單使用知識點(diǎn)總結(jié)，有需要的朋友們可以參考下。
    2019-08-08
  • vue和webpack打包項目相對路徑修改的方法

    vue和webpack打包項目相對路徑修改的方法

    這篇文章主要介紹了vue和webpack打包項目相對路徑修改的方法,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
    2018-06-06
  • vue3 setup() 高級用法示例詳解

    vue3 setup() 高級用法示例詳解

    從 vue2 升級到 vue3，vue3 是可以兼容 vue2 的，所以 vue3 可以采用 vue2 的選項式API。這篇文章主要介紹了vue3 setup() 高級用法,需要的朋友可以參考下
    2021-11-11
  • element中el-table中的el-input校驗的實(shí)現(xiàn)

    element中el-table中的el-input校驗的實(shí)現(xiàn)

    本文主要介紹了element中el-table中的el-input校驗的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2022-08-08

最新評論