Vue的el-form表单校验显示问题

Question

问题描述

el-form表单校验时如何将不符合校验规则的数据字体改为红色

问题出现的环境背景及自己尝试过哪些方法

上网查了半天,都只能修改提示信息,不能修改源数据;考虑过每个输入框都加一个id,靠id来设置红色字体,再写一个自定义校验:当不符合规则时,找到对应的id修改样式.这个方法由于表单内数据量大,一个个设置id很繁琐...

你期待的结果是什么？实际看到的错误信息又是什么？

vue校验只能设置提示信息不能修改源数据吗?还有没有比每个输入框设置id更简便的实现思路

Answer 1

el-form 必填的时候会在el-form-item上面添加类名is-required 校验失败会添加类名 is-error
那么你只需要修改后面css即可。可能需要深度deep

修改label字体

.is-required .el-form-item__label {
  color: red;
}

修改input字体

.is-required .el-form-item__label .el-input .el-input__inner {
  color: red;
}

Answer 2

只要加几行css就行。
对于传统的el-input

.is-error input,.is-required input {
  color:red
} 

如果对于select,textarea等其他表单控件也要改，就把input换成对应数据源的标签下。