MUKI AI Summary
Vue3 支援使用原生 HTML5 表單驗證，搭配正則表達式可增強驗證效果。在 VUE 中，透過 form 的 reportValidity() 方法驗證必填欄位，或使用 VUE 的 ref 獲取 DOM。表單需用 <form> 標籤，並於必填欄位加上 required 屬性。
可選用原生 JS 獲取 form 的 DOM element，或用 VUE 的 ref。在 setup() 中匯入 ref，宣告 form，並回傳。這些方法均可實現 HTML5 驗證功能，完整範例可參考 sandbox。...
介紹
表單驗證的套件有非常多種，但我覺得 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();
// 使用原生的 JavaScript 獲取 form 的 DOM element。
const form = document.querySelector("form");
if (form.reportValidity()) {
alert.value = "送出";
}
};
return { alert, add };
},
};
</script>使用 VUE 的 ref 獲取 DOM
如果不想用原生的 JS，我們也可以使用 VUE 的 ref 獲取 DOM。首先在 <form> 標籤增加 ref 屬性：
<!-- 在 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 }}接著就跟一般使用 ref 的寫法相同，「匯入(import)」，「使用」以及「回傳(return)」：
<script>
// 匯入 ref
import { ref } from "vue";
export default {
name: "App",
setup() {
const alert = ref("");
// 宣告 form
const form = ref(null);
const add = (e) => {
e.preventDefault();
// const form = document.querySelector("form");
if (form.value.reportValidity()) {
alert.value = "送出";
}
};
// 回傳 form
return { alert, add, form };
},
};
</script>範例
以上兩種寫法，都可以做到用原生 HTML5 驗證的效果
▼ 完整範例放在 sandbox 裡
歡迎給我點鼓勵，讓我知道你來過 ：）
13