Element UI 使用表單驗證通常涉及兩個主要組件：el-form?和?el-form-item。

el-form?負責管理表單數據和驗證規則，而?el-form-item?用于定義需要驗證的表單項。

<template><el-form :model="form" :rules="rules" ref="form" label-width="100px"><el-form-item label="用戶名" prop="username"><el-input v-model="form.username"></el-input></el-form-item><el-form-item label="密碼" prop="password"><el-input type="password" v-model="form.password"></el-input></el-form-item><el-form-item><el-button type="primary" @click="submitForm('form')">提交</el-button></el-form-item></el-form>
</template><script>export default {data() {return {form: {username: '',password: ''},rules: {username: [{ required: true, message: '請輸入用戶名', trigger: 'blur' }],password: [{ required: true, message: '請輸入密碼', trigger: 'blur' },{ min: 6, max: 12, message: '密碼長度在 6 到 12 個字符', trigger: 'blur' }]}};},methods: {submitForm(formName) {this.$refs[formName].validate((valid) => {if (valid) {alert('提交成功!');} else {console.log('驗證失敗');return false;}});}}};
</script>