vue2+element，实现form表单，自定义校验错误信息提示展示内容 实现代码

在Vue2配合Element UI中，你可以使用Element提供的内置验证功能结合自定义指令或方法来自定义表单验证错误信息。这里是一个简单的例子： 首先，在Vue组件中引入所需的依赖： ```html <script src="https://unpkg.com/[email protected]/dist/index.js"></script> <link rel="stylesheet" href="https://unpkg.com/[email protected]/lib/theme-chalk/index.css"> ``` 然后，创建一个Vue实例并定义表单数据和验证规则： ```js export default { data() { return { form: { username: '', password: '' }, rules: { username: [{ required: true, message: '用户名不能为空', trigger: 'blur' }], password: [{ required: true, message: '密码不能为空', trigger: 'blur' }] }, validationErrorMessage: {} }; }, methods: { validateForm() { this.$refs.form.validate((valid) => { if (valid) { console.log('提交表单'); } else { // 获取每个验证失败的字段及对应的错误消息 for (let field in this.rules) { if (!this.rules[field][0].trigger || !this.rules[field][0].required) continue; const errors = this.errorsMap[field]; if (errors && errors.length > 0) { this.validationErrorMessage[field] = errors[0].message; } } } }); } }, watch: { $data() { // 清空错误消息，防止旧的数据影响新的验证结果 this.validationErrorMessage = {}; } }, components: { ElForm, ElFormItem }, }; ``` 在HTML中使用`ElForm`和`ElFormItem`: ```html <template> <div> <el-form ref="form" :model="form" :validate-on-rule-change="true" @validate="validateForm"> <el-form-item label="用户名" :rules="rules.username"> <el-input v-model.trim="form.username"></el-input> <span v-if="validationErrorMessage.username" class="error-message">{{ validationErrorMessage.username }}</span> </el-form-item> <el-form-item label="密码" :rules="rules.password"> <el-input type="password" v-model.trim="form.password"></el-input> <span v-if="validationErrorMessage.password" class="error-message">{{ validationErrorMessage.password }}</span> </el-form-item> <!-- 其他表单项... --> <el-form-item> <el-button type="primary" @click="validateForm">提交</el-button> </el-form-item> </el-form> </div> </template> ``` 这样，当表单验证失败时，对应的错误信息会在相应的输入框下方显示。记得添加CSS样式以美化错误消息的显示。