<template><el-form :model="user" :rules="rules" ref="loginForm" label-width="auto" style="max-width: 600px"><el-form-item label="用戶名" prop="name"><el-input v-model="user.name" id="name" placeholder="請輸入用戶名" /></el-form-item><el-form-item label="密碼" prop="pass"><el-input v-model="user.pass" id="pass" placeholder="請輸入密碼" /></el-form-item><el-form-item><el-button type="primary" @click="onSubmit">登錄</el-button></el-form-item></el-form>
</template><script lang="ts" setup>
import { ref, reactive } from 'vue'
import { ElMessage } from 'element-plus'// 響應式的對象
const user = reactive({name: '',pass: '',
})// 設置驗證規則
const rules = {name: [{ required: true, message: '請輸入用戶名', trigger: 'blur' },{ min: 3, max: 30, message: '長度在 3 到 30 個字符', trigger: 'blur' },],pass: [{ required: true, message: '請輸入密碼', trigger: 'blur' }],
}// 創建對表單的引用
const loginForm = ref(null)// 點擊登錄按鈕的時候，驗證是否滿足rules規則
const onSubmit = () => {if (loginForm.value) {loginForm.value.validate((valid: boolean) => {if (valid) {// 表單驗證通過，執行登錄邏輯console.log(user)ElMessage.success('登錄成功')} else {// 表單驗證未通過，顯示錯誤信息ElMessage.error('請檢查輸入的內容')return false}})}
}
</script>

解釋

1. 創建響應式對象：

   • 使用 reactive 創建響應式的 user 對象。
   • 使用 ref 創建對表單的引用 loginForm。

2. 設置驗證規則：

   • 定義 rules 對象，包含用戶名和密碼的驗證規則。

3. 模板中使用 ref 屬性：

   • 在 <el-form> 元素上使用 ref="loginForm"，將其引用注冊到 loginForm。

4. onSubmit 方法：

   • 在 onSubmit 方法中，通過 loginForm.value 訪問表單，并調用 validate 方法驗證表單。
   • validate 方法執行后，傳遞一個布爾值 valid 到回調函數中。如果 valid 為 true，則表示表單驗證通過；否則，顯示錯誤消息。

5. 顯示消息：

   • 使用 ElMessage 顯示成功或失敗的消息。（ElMessage是EleMent Plus提供的信息組件）