2022.05.03

VUE3 做原生的 HTML5 表單驗證

文章索引

介紹

表單驗證的套件有非常多種，但我覺得 HTML5 的表單驗證就已經很好用了，如果再搭配正則表達式也可以做出非常多的驗證規格。

所以在此筆記一下，如何在 VUE 裡面使用原生的 HTML5 表單驗證 (PS. VUE2 也通用喔)

表單模板

首先製作一個簡易的表單，記得一定要用 <form>...</form> 標籤，以及將 required 屬性標示在必填的欄位上。

<form>
  <p>姓名：<input type="text" required /></p>
  <p>(姓名為必填欄位)</p>
  <p>電話：<input type="text" /></p>
  <p>地址：<input type="text" /></p>
  <button @click="add">新增</button>
</form>
{{ alert }}

驗證語法

接著使用 form 的 reportValidity() 方法，就可以幫你驗證必填的欄位是否空白。

<script>
import { ref } from "vue";
export default {
  name: "App",
  setup() {
    const alert = ref("");
    const add = (e) => {
      e.preventDefault();
      const form = document.querySelector("form");
      if (form.reportValidity()) {
        alert.value = "送出";
      }
    };
    return { alert, add };
  },
};
</script>

Line 9：使用原生的 JavaScript 獲取 form 的 DOM element。

使用 VUE 的 ref 獲取 DOM

如果不想用原生的 JS，我們也可以使用 VUE 的 ref 獲取 DOM。首先在 <form> 標籤增加 ref 屬性：

<form ref="form">
  <p>姓名：<input type="text" required /></p>
  <p>(姓名為必填欄位)</p>
  <p>電話：<input type="text" /></p>
  <p>地址：<input type="text" /></p>
  <button @click="add">新增</button>
</form>
{{ alert }}

Line 1：在 form 標籤增加 ref 屬性

接著就跟一般使用 ref 的寫法相同，「匯入(import)」，「使用」以及「回傳(return)」：

<script>
import { ref } from "vue";
export default {
  name: "App",
  setup() {
    const alert = ref("");
    const form = ref(null);
    const add = (e) => {
      e.preventDefault();
      // const form = document.querySelector("form");
      if (form.value.reportValidity()) {
        alert.value = "送出";
      }
    };
    return { alert, add, form };
  },
};
</script>

Line 2：匯入 ref

Line 7：宣告 form

Line 15：回傳 form