Vue 3是一款流行的JavaScript框架，它提供了豐富的工具和方法來簡化網頁應用程序開發。表單驗證是Web開發中的一個重要方面，因為它幫助開發人員確保用戶輸入的可靠性和有效性。Vue 3提供了一種內置的表單驗證方法，使開發人員能夠輕松實現表單驗證。

Vue 3表單驗證的思想是將驗證規則和邏輯與HTML表單元素綁定，當用戶輸入不符合驗證規則時，將顯示錯誤消息。以下是一個簡單的表單驗證示例：

<template>
<form @submit.prevent="submitForm">
<label>Name:</label>
<input v-model="name" type="text" :class="{ 'is-invalid': !isValidName }">
<div v-if="!isValidName" class="invalid-feedback">Please enter a valid name.</div>
<button type="submit">Submit</button>
</form>
</template>
<script>
export default {
data() {
return {
name: '',
};
},
computed: {
isValidName() {
return /^[a-zA-Z]*$/.test(this.name);
},
},
methods: {
submitForm() {
// submit form data
},
},
};
</script>

在該示例中，一個input元素通過v-model綁定到了組件實例的data內的name屬性。該屬性會傳遞到computed計算屬性isValidName中，進行表單驗證。isValidName使用JavaScript正則表達式來判斷name屬性值是否符合指定規則。如果無效，將添加CSS類名'is-invalid'，以及顯示錯誤消息“Please enter a valid name.”。

需要注意的是，在以上示例中，form元素使用了@submit.prevent修飾符來防止提交表單。submitForm是一個方法，可以在表單驗證通過時被調用。

使用Vue 3的內置表單驗證方法，可以幫助開發人員輕松地實現可靠的表單驗證，避免了很多不必要的編碼工作。在實際開發中，使用該方法可以大大提高表單輸入數據的可靠性和有效性。