2023-01-16
Vue3 使用 Vite 整合 axios 攔截器與 axios proxy
Vue
2022.05.03
表單驗證的套件有非常多種,但我覺得 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>
如果不想用原生的 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 }}
接著就跟一般使用 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>
ref
form
form
以上兩種寫法,都可以做到用原生 HTML5 驗證的效果
▼ 完整範例放在 sandbox 裡