如果你想使用 Element UI 的 el-form 组件的原始方法来实现动态调整某个表单域的验证规则，并在失去焦点时调用接口判断是否验证通过，并自定义提示内容，可以使用自定义校验函数和异步校验功能。
下面是一个示例，演示了如何利用 el-form 组件提供的自定义校验函数和异步校验功能来实现需求：
<template>
<el-form ref="myForm" :model="formData" :rules="formRules" label-width="100px">
<el-form-item label="用户名" prop="username">
<el-input v-model="formData.username" @blur="validateUsername"></el-input>
</el-form-item>
<!-- 其他表单项 -->
<el-form-item>
<el-button type="primary" @click="submitForm">提交</el-button>
</el-form-item>
</el-form>
</template>
<script>
export default { data() { return { formData: { username: '' }, formRules: { username: [ { validator: this.validateUsername, trigger: 'blur' } ] } }; }, methods: { // 提交表单 submitForm() { this.$refs.myForm.validate((valid) => {
if (valid) { // 表单验证通过，执行提交操作 // 可以在这里调用后端接口等 console.log('表单验证通过，提交表单数据：', this.formData); } else { // 表单验证失败 console.log('表单验证失败，请检查输入'); return false; } }); },
// 自定义用户名校验函数 validateUsername(rule, value, callback) {
// 调用后端接口判断用户名是否可用 // 这里用 setTimeout 模拟异步调用 setTimeout(() => { const username = value; // 假设接口返回的数据结构为 { valid: true/false, message: '错误提示信息' } const response = { valid: false, message: '用户名已存在' }; // 假设用户名已存在
if (response.valid) {
// 用户名可用，清空错误提示
callback(); } else {
// 用户名不可用，设置错误提示信息
callback(new Error(response.message)); } }, 500); // 假设接口调用需要 500 毫秒 }
}
};</script>
在自定义校验函数 validateUsername 中，我们模拟了一个异步调用后端接口的过程，来判断用户名是否可用。根据接口返回的结果，我们在回调函数中调用 callback 来返回验证结果，如果验证通过，就调用 callback()，如果验证失败，就调用 callback(new Error('错误提示信息')) 来返回错误信息。
这样，当用户输入完用户名后，失去焦点时会自动调用接口来判断用户名是否可用，并根据接口返回的结果显示自定义的错误提示信息，实现了动态调整某个表单域的验证规则，并自定义提示内容的功能。
