如何在vue中使用element實(shí)現(xiàn)表單校驗(yàn)功能

本篇文章給大家分享的是有關(guān)如何在vue中使用element實(shí)現(xiàn)表單校驗(yàn)功能，小編覺得挺實(shí)用的，因此分享給大家學(xué)習(xí)，希望大家閱讀完這篇文章后可以有所收獲，話不多說，跟著小編一起來看看吧。

template代碼:

 <el-form
      :model="Opinion"
      ref="MyOpinion"
      :rules="rules"
      size="small"
      class="lj-form lj-form-s1"
     >
      <el-form-item label="審核意見: " prop="txt" >
       <el-input type="textarea" :rows="5" v-model="Opinion.txt"></el-input>
      </el-form-item>
     </el-form>

data定義數(shù)據(jù)代碼:

  data() {
   return {
 Opinion: {
     radio: "1",
     txt: "",
     value: ""
    },
    rules: {
     txt: [{ required: true, message: "請(qǐng)輸入審核意見", trigger: "blur" }]
    }
   };
  },

methods方法代碼:

 async approval() {
    let _this = this;
 this.$refs.MyOpinion.validate(async valid => {
      if (valid) {
       const res2 = await _this.$axios.post(`/approve/approve_refuse`, {
        ...obj
       });
       if (res2.data.error == 0) {
        _this.$message.success(res2.data.message);
       }
       _this.innerVisible = false;
       _this.visibleApply = false;
      }
     });
 }

　　注意點(diǎn):①定義prop的時(shí)候,值要求是屬于form綁定的model數(shù)據(jù)對(duì)象里面,同時(shí)名字要一樣;

　　　　　 ②data中定義rules要在定義表單的數(shù)據(jù)之后(我一般放在data的最后面)

vue是什么

Vue是一套用于構(gòu)建用戶界面的漸進(jìn)式JavaScript框架，Vue與其它大型框架的區(qū)別是，使用Vue可以自底向上逐層應(yīng)用，其核心庫只關(guān)注視圖層，方便與第三方庫和項(xiàng)目整合，且使用Vue可以采用單文件組件和Vue生態(tài)系統(tǒng)支持的庫開發(fā)復(fù)雜的單頁應(yīng)用。

以上就是如何在vue中使用element實(shí)現(xiàn)表單校驗(yàn)功能，小編相信有部分知識(shí)點(diǎn)可能是我們?nèi)粘９ぷ鲿?huì)見到或用到的。希望你能通過這篇文章學(xué)到更多知識(shí)。更多詳情敬請(qǐng)關(guān)注億速云行業(yè)資訊頻道。