在 Vue.js 中出现验证错误时如何突出显示输入的边框颜色？

Question

mobile: '',
  maxmobile: 10,

  validations: {


    mobile: {
     
    },
  }

<input class="input-mobile ml-10" type="text" placeholder="Your mobile number" id="mobile" name="mobile" v-model="mobile" v-on:keypress="isMobileLanding($event)" :maxlength="maxmobile" v-model.trim="$v.mobile.$model" v-bind:class="{'input-color-change': $v.mobile.$invalid}"
  @input="$v.mobile.$touch" />

<p v-if="$v.mobile.$dirty">
  <span class="form__alert" v-if="!$v.mobile.numeric">Must be numeric.</span>
  <span class="form__alert" v-if="$v.mobile.numeric && !$v.mobile.between">
        Must be between {{$v.mobile.$params.between.min}} and {{$v.mobile.$params.between.max}}.
      </span>
</p>

如何在 Vue.js 中验证错误时突出显示输入的边框颜色？

目前我的代码有问题。最初，输入边框被突出显示，但我只想在用户输入少于 10 位数的手机号码时突出显示它。如果用户输入所有 10 位数字，则不应出现边框颜色。

Answer 1

<template>
  <input
    id="mobile"
    v-model="mobile"
    v-model.trim="$v.mobile.$model"
    :class="['input-mobile ml-10', mobileIsValid ? null : 'input-color-change']"
    type="text"
    placeholder="Your mobile number"
    name="mobile"
    :maxlength="maxmobile"
    @keypress="isMobileLanding($event)"
  />
  <div v-if="!mobileIsValid" class="error-messages">
    Kindly check phone is above {{ validations.mobile.minLength }} and blow
    {{ validations.mobile.maxLength }}.
  </div>
</template>

<script>
export default {
  data() {
    return {
      maxmobile: 10,
      mobile: '',
      validations: {
        mobile: {
          required,
          minLength: minLength(10),
          maxLength: maxLength(9),
        },
        email: {
          required,
          email,
          maxLength: maxLength(30),
        },
      },
    }
  },
  computed: {
    mobileIsValid() {
      return (
        this.mobile.length >= this.validations.mobile.minLength &&
        this.mobile.length <= this.validations.mobile.maxLength
      )
    },
  },
}
</script>