Question

我有一个输入字段，在 maxlength 的帮助下，我正在检查输入字段的长度并显示诸如“30 har only”之类的错误消息。所以现在我需要在出现错误消息时将边框颜色突出显示为红色。

<div class="input-wrapper">
                <div class="name-icon"></div>
                <input
                  type="text"
                  name="fullname"
                  id="fullname"
                  v-model="fullname"
                  v-model.trim="$v.fullname.$model"
                  :class="{ 'is-invalid': validationStatus($v.fullname) }"    
                   class="input-section"
                  :maxlength="max"
                  v-validate="'required'"
                  v-on:keypress="isLetter($event)"
                  placeholder="Enter your name"
                />

                <div v-if="!$v.fullname.maxLength" class="error-messages">
                  You can enter 30 characters
                  {{ $v.fullname.$params.maxLength.min }} only.
                </div>
              </div>

.input-section {
  border-radius: 4px;
  width: 359px;
  height: 42px;
  line-height: 42px;
  padding: 0 45px;
  border-radius: 4px;
  border: solid 1px #b1b8c9;
  background-color: #ffffff;
}

Answer 1

您可以使用 $invalid 状态添加带有边框的 CSS 类，例如：

class="form__input" v-bind:class="{'error-boarder' : $v.age.$invalid}"

CSS 类：

.error-boarder {
  border-color: red;
}

旧答案：尝试使用 :invalid CSS 伪类：

.input-sectio:invalid {
  background-color: red;
}

如何在Vuejs中显示错误消息时突出显示输入字段的边框颜色？

1 个答案: