Vue 的 el-form 組件可以使用自定義校驗規則進行表單驗證。自定義校驗規則可以通過傳遞一個函數來實現，該函數接受要校驗的字段的值作為參數，并返回一個布爾值或一個 Promise 對象。

下面是一個示例，演示如何在 el-form 中使用自定義校驗規則：

<template>
<el-form ref="form" :model="form" :rules="rules" label-width="80px">
<el-form-item label="用戶名" prop="username" :rules="usernameRules">
<el-input v-model="form.username"></el-input>
</el-form-item>
 
<el-form-item>
<el-button type="primary" @click="submitForm">提交</el-button>
<el-button @click="resetForm">重置</el-button>
</el-form-item>
</el-form>
</template>
 
<script>
export default {
data() {
return {
form: {
username: ''
},
rules: {
username: [
{ required: true, message: '請輸入用戶名', trigger: 'blur' }
]
}
};
},
methods: {
submitForm() {
this.$refs.form.validate(valid => {
if (valid) {
// 表單驗證通過，提交表單
console.log('提交表單');
} else {
// 表單驗證失敗，打印錯誤信息
console.log('表單驗證失敗');
return false;
}
});
},
resetForm() {
this.$refs.form.resetFields();
}
},
computed: {
usernameRules() {
return [
{ required: true, message: '請輸入用戶名', trigger: 'blur' },
{ validator: this.validateUsername, trigger: 'blur' }
];
}
},
methods: {
validateUsername(rule, value, callback) {
// 自定義校驗規則
if (value === 'admin') {
callback(new Error('用戶名已存在'));
} else {
callback();
}
}
}
};
</script>

在上述例子中，我們定義了一個表單項 "用戶名"，并給它設置了兩個校驗規則，一個是必填規則，一個是自定義規則。自定義規則通過 `validator` 屬性指向一個函數，該函數會在校驗時調用。函數接受三個參數：`rule` 表示當前字段的驗證規則，`value` 表示當前字段的值，`callback` 用來返回校驗結果。當校驗不通過時，通過調用 `callback` 函數并傳遞錯誤消息來報告校驗失敗。

這只是一個簡單的例子，你可以根據你的具體需求來定義更復雜的自定義校驗規則。