如何将输入字段边框颜色更改为红色。当字段为空时

Question

在这里，我编写了一个用于验证 Vue 中的表单输入字段的代码。当输入字段为空时，它工作正常，表单没有导航到下一步。我的问题是，当该字段为空时，用户尝试导航到下一步，输入字段边框颜色应变为红色。如果一个字段为空，而用户正尝试导航另一步骤，则导航应阻止，并且空字段的边框应显示为红色。

<div id="vk_app">
  <form>
  
  <div v-if="step === 1">

    <h1>Step One</h1>
    <p>
    <legend for="name">Your Name:</legend>
    <input id="name" name="name" v-model="name">
    <input id="name" name="name" v-model="age">
    </p>

    <button @click.prevent="next()">Next</button>

  </div>
  <div v-if="step === 2">
      <template>
       <input id="name" name="name" v-model="address">
        <input id="name" name="name" v-model="h_no">
        <input id="name" name="name" v-model="mobile">
        <button @click.prevent="prev()">Previous</button>
        <button @click.prevent="next()">Next</button>
      </template>
  </div>

  <div v-if="step === 3">
    <template>
       <input id="name" name="name" v-model="subject">
        <input id="name" name="name" v-model="occupation">
        <button @click.prevent="prev()">Previous</button>
        <button @click.prevent="next()">Next</button>
      </template>

    <button @click.prevent="prev()">Previous</button>
    <button @click.prevent="submit()">Save</button>

  </div>
  </form>
</div>

vue.js

const app = new Vue({
  el:'#vk_app',
  data() {
    return {
      step:1,
        name:null,
        age:null,
        city:null,
        state:null,
    }
  },
  methods:{
    prev() {
      if(this.checkForm()) {
        this.step--;
      }
    },
    next() {
      if(this.checkForm()) {
        this.step++;
      }
    },
    checkForm: function (e) {
      if (this.name && this.age) {
        return true;
      }

      this.errors = [];

      if (!this.name) {
        this.errors.push('Name required.');
      }
      if (!this.age) {
        this.errors.push('Age required.');
      }

      e.preventDefault();
    }
    }
});

Answer 1

这是我对您的代码示例的回答，当您单击 next 按钮时，它将起作用。

更新的 HTML 和输入：

<div id="vk_app">
    <form>
      <div v-if="step === 1">
        <h1>Step One</h1>
        <legend for="name">Your Name:</legend>
        <input id="name" :class="errorField.name ? 'error-input' : ''" name="name" v-model="name" />
        <input id="name" :class="errorField.age ? 'error-input' : ''" name="name" v-model="age" />
        <button @click.prevent="next()">Next</button>
      </div>
      <div v-if="step === 2">
          <template>
          <input id="name" name="name" :class="errorField.address ? 'error-input' : ''" v-model="address" />
            <input id="name" name="name" :class="errorField.h_no ? 'error-input' : ''" v-model="h_no" />
            <input id="name" name="name" :class="errorField.mobile ? 'error-input' : ''" v-model="mobile" />
            <button @click.prevent="prev()">Previous</button>
            <button @click.prevent="next()">Next</button>
          </template>
      </div>
      <div v-if="step === 3">
        <template>
          <input id="name" name="name" v-model="subject">
            <input id="name" name="name" v-model="occupation">
            <button @click.prevent="prev()">Previous</button>
            <button @click.prevent="next()">Next</button>
          </template>
        <button @click.prevent="prev()">Previous</button>
        <button @click.prevent="submit()">Save</button>
      </div>
    </form>
  </div>

Vue 函数和数据更新：

data() {
      return {
        errorField: { name: false, age: false, city: false, state: false },
        step:1,
          name:null,
          age:null,
          city:null,
          state:null,
      }
    },
    methods:{
      prev() {
        if(this.checkForm()) {
          this.step--;
        }
      },
      next() {
        if(this.checkForm()) {
          this.step++;
        }
      },
      checkForm: function (e) {
        if (this.name && this.age) {
          return true;
        }

        this.errors = [];

        if (!this.name) {
          this.errorField.name = true
          this.errors.push('Name required.');
        }
        if (!this.age) {
          this.errorField.age = true
          this.errors.push('Age required.');
        }
      }
    }

Answer 2

由于这个功能（无效输入上的红色边框）更频繁地需要，我们可以使用动态类：

在样式部分定义一个类

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

并在模板部分添加

:class="{'input--error':!name}"

输入标签使其看起来像：

 <input id="name" name="name"  v-model="name" :class="{'input--error':!name}"/>

整个代码如下所示：

<template>
    <div>
        <!-- Using dynamic classes -->
        <input id="name" name="name"  v-model="name" :class="{'input--error':!name}"/>
        <input id="name" name="name" v-model="age" :class="{'input--error':!age}"/>
    </div>
</template>
<script>
export default {
    data(){
        return{
            name:null,
            age:null
        }
    }
}
</script>
<style scoped>
.input--error{
    border-color:red;
}
</style>

我们也可以直接在 input 标签的 style 属性中添加：

<input id="name" name="name" v-model="mobile" :style="!mobile ? 'border-color:red':''">

这会不必要地过度拥挤代码。

Answer 3

我们有一个blur 事件。 当 blur 事件触发时，如果输入框为空（或任何你想要的），在输入框中添加一个类，例如“red”。

<input id="name" name="name" v-model="name" @blur="validation($event.target)">

const validation = el => {
    if (!el.value) {
        // this is a very simple examples. I don't recommend using jQuery.
        $(el).addClass('red'); 
    }
};

添加。

您可以在 Next() 方法上使用该方法。

<input id="name" name="name" v-model="name" ref="name">
const next = () => {
    const inputName = this.$refs.name; // this if for just Vue2.
    if (!inputName.value) {
        $(inputName).addClass('red');
    }
};