更改 Yii2 中验证错误消息的字体颜色？答案

【问题标题】：Change the font colour of validation error message in Yii2?更改 Yii2 中验证错误消息的字体颜色？
【发布时间】：2020-06-15 13:45:21
【问题描述】：

如何在 Yii2 中更改验证错误消息的字体颜色？

这是我按下创建按钮后价格为空的表单，因此它触发了验证消息“不能为空”。但我希望用户可以轻松识别消息。目前验证工作完美，但用户将努力查看他们在哪里犯了错误，特别是在大型表单上。如您所见，没有引导颜色，例如。与消息关联的“警告”。该消息并不突出。

我最好在 css 或 Assetmanager 中寻找可以调整的全局设置，这样我就不必在规则部分为每个模型的属性调整每个必需的“消息”。

我在跑步：

wampserver 上的 yii2 2.0.35 php 7.4.4

这是我的模型下的代码：

public function rules()
{
    return [
        [['listprice'], 'required'],

This is my composer.json

请问有人可以帮忙吗？我希望所有错误消息都最好是红色的。

感谢 Bizley 的回复。好的，这是我的 DOM。

Dom 在这里引用了 reboot.scss 和 root.scss：

这是我的 AppAsset：

class AppAsset extends AssetBundle
{

    public $sourcePath = '@app/assets/app';
    public $baseUrl = '@app';

    public $css = [
        '//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font- 
        awesome.min.css',        
    ];

    public $js = [ 'js/scripts2.js',
                   'js/scripts_slider.js',
                   'js/scripts_gocardless.js'
    ];

    public $depends = [
        'yii\web\YiiAsset',
        'yii\bootstrap4\BootstrapAsset',
        'yii\web\JqueryAsset',
    ];
}

这是\vendor\yiisoft\yii2-bootstrap4\src下的vendor BootstrapAsset

<?php

namespace yii\bootstrap4;

use yii\web\AssetBundle;

class BootstrapAsset extends AssetBundle
{
    public $sourcePath = '@npm/bootstrap/dist';
    public $css = [
        'css/bootstrap.css',
    ];
}

如果我将 AppAsset 更改为：

'yii\bootstrap\BootstrapAsset'

...我在这里得到了肯定的结果：

通过您推荐的插入，我将其放入 vendor/bower-asset/bootstrap.css 中，这是旧版本的引导程序，并且在我重新启动浏览器后它可以工作。

bootstrap4 在 vendor/npm-asset 的 bootstrap.css 下工作的等效命令是什么？

【问题讨论】：

您不应该修改vendor 文件夹中的任何内容，因为当您更新作曲家依赖项时，所有更改都将丢失。您应该将自定义 CSS 放入将随您的应用程序加载的样式表文件中 - 在 /frontend/assets 中创建您自己的资产并通过它加载 css。阅读yiiframework.com/doc/guide/2.0/en/structure-assets
好的。我插入了 .has-error .help-block { color: red; } 进入 frontend/assets/app/css/site.css 并将路径 'css/site.css' 包含到我的 AppAsset 的 $public 变量数组中并且工作正常。
在阅读github.com/yiisoft/yii2-bootstrap/issues/151 之后，我将 .has-danger .help-block {color: red;} 插入到 frontend/assets/app/css/site.css 中，包括路径 'css/site.css' 到我的 AppAsset 的 $public 变量数组中，并将 $depends 变量从 'yii\bootstrap\BootstrapAsset' 更改为 'yii\bootstrap4\BootstrapAsset' 现在我收到红色错误消息非常适合 Bootstrap 4。

标签： php yii2

【解决方案1】：

最简单的方法是验证其 CSS 并进行调整。右键单击错误消息并从菜单中选择Inspect Element（或Inspect 或类似名称，具体取决于浏览器）。您应该会看到 DOM 树，其中包含类似

<p class="help-block help-block-error ">Error message</p>

这可能因您的代码而异，但在 Yii 2 中，默认情况下这是插入验证错误的方式。现在只需在样式表中设置help-block-error 类的样式，例如

.help-block-error {
    color: red;
}

【讨论】：

【解决方案2】：

最快的方法，把这个样式写在你的css文件里，比如“style.min.css”：

.help-block {
    color: red;
}

红色或任何你想要的颜色。

【讨论】：