使用element的form表单,实现显示后端错误信息,并且如果有错误信息(前端通过rules检测的错误信息或者后端传过来的错误信息(如该用户已经注册或该邮箱已经存))点击提交按钮不会再次发起异步请求
在使用Element UI的<el-form>
组件时,你可以通过以下步骤实现显示后端错误信息:
- 使用
<el-form>
组件并定义你的表单字段。 - 使用
<el-form-item>
组件并设置prop
属性,与你的rules
验证规则对应。 - 使用
<el-form>
的status-icon
或inline
等属性来改善用户体验。 - 在你的Vue组件的
data
中定义一个errors
对象来存储后端返回的错误信息。 - 在你的方法中,当你从后端获取错误信息时,更新
errors
对象。 - 使用
v-if
或v-for
指令在你的表单元素旁边显示错误信息。
以下是一个简单的示例代码:
<template>
<el-form :model="form" :rules="rules" ref="form">
<el-form-item label="用户名" prop="username">
<el-input v-model="form.username"></el-input>
<div v-if="errors.username" class="error">{{ errors.username[0] }}</div>
</el-form-item>
<el-form-item label="密码" prop="password">
<el-input type="password" v-model="form.password"></el-input>
<div v-if="errors.password" class="error">{{ errors.password[0] }}</div>
</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' }
]
},
errors: {}
};
},
methods: {
submitForm(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
// 发送数据到后端...
} else {
// 获取后端错误信息
this.fetchBackendErrors();
return false;
}
});
},
fetchBackendErrors() {
// 模拟从后端获取错误信息
this.errors = {
username: ['后端用户名错误信息'],
password: ['后端密码错误信息']
};
}
}
};
</script>
<style>
.error {
color: red;
margin-left: 10px;
}
</style>
在这个例子中,当表单提交失败时,submitForm
方法会调用fetchBackendErrors
方法来模拟从后端获取错误信息,并将它们存储在errors
对象中。然后,在表单项旁边,你可以使用v-if
指令来显示这些错误信息。
请注意,这个例子中的fetchBackendErrors
方法是模拟从后端获取错误的。在实际应用中,你需要替换为实际从后端接口获取错误信息的逻辑。
评论已关闭