vue3 + elementui-plus 表單驗證使用 ref

升級到 vue3 後,elementui 也有推出 vue3 版本叫做 elementui-plus,可以點這裡去官網了解一下,名字聽起來就很屌啊!

官網的範例有很詳細的解說使用方法,可是他竟然沒有舉例 Vue Composition API 方式的寫法,啊我不用 Composition API 我升級到 vue3 幹嘛?

下面就來寫一下上網查到的資料,看看到底要怎樣使用 v-model + ref + setup()

 

表單 template

<el-form ref="loginFormRef" :model="loginFormModel" :rules="rules">
  <el-form-item prop="username">
    <el-input v-model="loginFormModel.username" placeholder="帳號" />
  </el-form-item>
  <el-form-item prop="password">
    <el-input
      v-model="loginFormModel.password"
      type="password"
      placeholder="密碼"
    />
  </el-form-item>
  <el-form-item>
    <el-button type="primary" @click="handleLogin">
      Login
    </el-button>
  </el-form-item>
</el-form>

 

script

先把有用到的東西引用進來

import { reactive, ref } from "vue";

宣告變數

setup() {
  const loginFormModel = reactive({ username: "", password: "" });
  const loginFormRef = ref(null);
  const rules = {
    username: [{ required: true, message: "请输入帳號", trigger: "change" }],
    password: [{ required: true, message: "请输入密碼", trigger: "change" }],
  };
  
  return {
    loginFormModel,
    loginFormRef,
    rules,
  };
},

到這一步已經可以進行表單驗證了,但是如果要按下按鈕之後才觸發驗證的話,可以寫在function裏:

const handleLogin = () => {
  loginFormRef.value.validate(valid => {
    if (!valid) return;
  //... 登入~~~  
  });
};

學習程式原來可以這麼簡單:六角學院線上課程

初學者如何成為vue前端工程師:查看課程內容

---------------------------

| 軟體開發 | 網站建置 | 網頁系統 | 資料庫網站 |

| 客製化網站 (報名系統、投票系統、掛號系統...) |

| 前後端技術合作 |

歡迎與我們聯繫:jessica@penueling.com

加入Line立即聊聊:@539mjyid

0
0 回復

發表評論

Want to join the discussion?
Feel free to contribute!

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。