如果我没有在 Vuejs 中输入数据，如何以红色突出显示输入字段的边框？答案

【问题标题】：How to highlight border of input field in red color if i does not enter the data in Vuejs?如果我没有在 Vuejs 中输入数据，如何以红色突出显示输入字段的边框？
【发布时间】：2021-04-21 04:15:20
【问题描述】：

.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;
}

<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" v-on:keypress="isLetter($event)" placeholder="Enter your name" />


<input class="input-section label-set" type="text" id="mobile" v-model="mobile" v-model.trim="$v.mobile.$model" :class="{ 'is-invalid': validationStatus($v.mobile) }" placeholder="Enter your mobile number" v-on:keypress="isMobile($event)" />

如何以红色突出显示输入字段的边框？假设我有两个字段。如果用户尝试在第二个字段中输入而不输入一个字段，则第一个字段的边框颜色应变为红色，否则为正常。

我有一个使用引导表单控件的想法，但是我想在 css 中使用它。

【问题讨论】：

标签： html css vue.js

【解决方案1】：

CSS 可以根据输入元素的 value 属性设置样式，例如：

input#mobile:not([value]) {
   border: 1px solid red;
}

但您不一定能够获取 HTML 元素/节点的值，因为它正在实时更改。为此，您可能需要某种脚本解决方案。

您可以使用oninput event 来捕获用户输入并相应地更新 value 属性，但如果您使用的是框架 - 您可能希望使用它来设置 value 属性。

<input type="text" id="mobile" oninput="this.setAttribute('value', this.value);" />

【讨论】：

【解决方案2】：

你可以这样使用：

/* If input is not empty */
input:not(:placeholder-on) {
  /* You need to add a placeholder to your fields. For example: <input "placeholder=" "/> */
  border-color: green;
}

/* If input is empty */
input:placeholder-on {
  border-color: red;
}

【讨论】：

我的输入字段已经有了占位符，所以在 css 输入中基于我给定的输入类。如果已作为 input:not(:placeholder-on){..} 和 input:placeholder-on {...} 给出，但我没有得到任何更改。

【解决方案3】：

您在问题中标记了 JavaScript，这是您可以在 JS 中执行此操作的方法。

使用 querySelectorAll 运行选择器 nodeList 然后在 eventTarget 上添加一个 blur eventListener 并检查当前循环元素值是否设置为空或只有空白，e.target.value.trim().length == 0，如果是，添加一个类更改输入标签的样式，如果该类不为空，则删除该类。

const inputs = document.querySelectorAll('.input-section')

inputs.forEach(input => {
  input.addEventListener('blur', (e) => {
    if(e.target.value.trim().length == 0){
      e.target.classList.add('warning')
    }else{
      e.target.classList.remove('warning')
    }
  })
})

.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;
}

.warning {
  border: solid 2px #F00;
}

<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" v-on:keypress="isLetter($event)" placeholder="Enter your name" />


<input class="input-section label-set" type="text" id="mobile" v-model="mobile" v-model.trim="$v.mobile.$model" :class="{ 'is-invalid': validationStatus($v.mobile) }" placeholder="Enter your mobile number" v-on:keypress="isMobile($event)" />

【讨论】：