Laravel中密码错误时如何将密码输入框边框设为红色？

步骤1：添加错误样式类 #

在你的CSS代码中新增一个专门标记错误输入框的样式类，确保错误状态下边框能显示红色：

.input-error {
    border: 2px solid red !important;
}

使用!important是为了覆盖原有input标签的边框样式，保证错误样式优先生效。

步骤2：动态给密码输入框添加错误类 #

在密码输入框的HTML标签中，通过Laravel的$errors对象判断wachtwoord字段是否存在验证错误，动态添加上面定义的错误类：

<div class="Button1">
    <input type="password"
           name="wachtwoord" 
           placeholder="Max 4 numbers"
           maxlength="4"
           class="{{ $errors->has('wachtwoord') ? 'input-error' : '' }}">
</div>

这里利用三元运算符实现：当wachtwoord字段存在错误时，为输入框添加input-error类，否则不添加任何额外类。

额外优化建议（可选） #

目前你的表单结构存在不合理之处——提交按钮在<form>标签内，但密码输入框在标签外，这可能导致表单提交时无法正确获取输入值。建议将输入框移入表单内，修正后的表单结构如下：

<div class="Button2">
    <form action="/auth" method="post">
        @csrf
        <div class="passw">Wachtwoord :</div>
        <div class="Button1">
            <input type="password"
                   name="wachtwoord" 
                   placeholder="Max 4 numbers"
                   maxlength="4"
                   class="{{ $errors->has('wachtwoord') ? 'input-error' : '' }}">
        </div>
        <button type="submit" name="submit" value="submit">Log in</button> 
    </form>
</div>

内容的提问来源于stack exchange，提问作者Interestn_