element-form校验show-message
时间: 2024-12-24 15:33:10 浏览: 13
Element-Form 是 Vue.js 中的一个官方表单组件库,它提供了一套强大的表单验证功能。`show-message` 是 Element-Form 中的一个选项,用于控制验证失败时显示错误信息的行为。
当 `show-message` 属性设置为 `true` 或默认值时(即 `true` 或者不指定),如果表单验证出错,Element-Form 将会在输入元素旁边显示一个提示消息,告诉用户哪些字段需要修正。这个消息通常包含有关验证规则的详细说明,比如格式错误、必填项等。
如果你希望自定义错误消息的展示位置或者样式,可以设置 `show-message` 为一个函数,传入验证结果和当前的 form 实例,然后返回你想展示的消息内容以及它的位置和其它相关配置。
示例:
```html
<el-form :rules="formRules" show-message="handleMessage">
<!-- 表单元素 -->
</el-form>
<script>
export default {
methods: {
handleMessage({ field, messages }, instance) {
if (field === 'password') {
return { message: '密码至少6位', position: 'bottom' };
}
// 其他自定义逻辑...
},
},
data() {
return {
formRules: {},
};
},
};
</script>
```
阅读全文