Vue Form Rules 是一個基于 Vue.js 的表單校驗庫，它允許您在任何 Vue 組件中輕松定義和使用表單規則。此外，它還提供了許多方便的內置驗證規則和自定義驗證函數。

要開始使用 Vue Form Rules，您需要先安裝它：

npm install vue-form-rules --save

然后，您可以在任何 Vue 組件中導入它：

import { FormRules } from 'vue-form-rules';

接下來，您需要創建一個規則對象。規則對象是一個包含所有表單字段的對象，每個字段都和該字段的校驗規則相關聯。下面是一個示例規則對象：

const rules = {
username: [
{ required: true, message: '用戶名是必須的' },
{ min: 6, max: 20, message: '用戶名長度應為6到20個字符' }
],
password: [
{ required: true, message: '密碼是必須的' },
{ min: 6, max: 20, message: '密碼長度應為6到20個字符' }
],
email: [
{ required: true, message: '電子郵件是必須的' },
{ type: 'email', message: '電子郵件格式不正確' },
]
}

在以上示例中，我們為每個表單字段定義了一個規則數組。每個規則都是一個包含驗證條件和錯誤消息的對象。

接下來，您需要將規則對象傳遞給 FormRules 組件作為 props:

現在您已經成功定義了表單規則和組件，下一步是在提交表單時進行驗證。您可以使用 FormRules 組件中提供的方法來手動執行驗證，也可以使用內置的 submit 方法：

在以上示例中，當用戶點擊提交按鈕時，FormRules 組件將會自動檢查所有表單字段是否符合定義好的規則，如果有任何錯誤將拋出一個 Error 對象。您可以在您的組件中以以下方式捕獲錯誤：

try {
await this.$refs.formRules.submit();
} catch (error) {
console.error(error);
}

以上就是使用 Vue Form Rules 的基本流程。它是一個非常方便的工具，可以幫助您快速構建符合規范的表單。