Vuejs中显示错误信息时如何高亮显示输入框的边框颜色?
How to highlight border color of input field when error message display in Vuejs?
我有一个输入字段,在 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;
}
您可以使用 $invalid
状态添加一个 CSS class,边框如下:
class="form__input" v-bind:class="{'error-boarder' : $v.age.$invalid}"
CSS class:
.error-boarder {
border-color: red;
}
旧答案:尝试使用 :invalid
CSS 伪 class:
.input-sectio:invalid {
background-color: red;
}
我有一个输入字段,在 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;
}
您可以使用 $invalid
状态添加一个 CSS class,边框如下:
class="form__input" v-bind:class="{'error-boarder' : $v.age.$invalid}"
CSS class:
.error-boarder {
border-color: red;
}
旧答案:尝试使用 :invalid
CSS 伪 class:
.input-sectio:invalid {
background-color: red;
}