从输入字段 VeeValidate 中删除图标答案

【问题标题】：removing icon from input field VeeValidate从输入字段 VeeValidate 中删除图标
【发布时间】：2021-01-01 00:17:32
【问题描述】：

我是 Vue.js 的新手，我遇到了验证问题。我正在使用 Vee-Validate 框架进行验证。验证正在运行，但我从“is-danger”类中得到了这个红色圆圈图标。问题：如何设置只有这个红色边框，没有这个小图标？看下面的截图：

 <ValidationProvider
      :rules="{
      required: true,
      digitsRegex: /^(0|[1-9][0-9]{0,2}(?:(,[0-9]{3})*|[0-9]*))(\.[0-9]+){0,1}$/
      }"
      v-slot="{ errors, valid }"
       name="Discount"
  >
    <b-field
     :type="{ 'is-danger': errors[0], 'is-primary': valid }"
     >
      <b-input
         v-model="discount"
         step="any"
         type="text"
         :min="0"
         :max="sumWithoutDiscount"
      />
    </b-field>
       <span
           v-for="error in errors"
           :key="error.id"
           class="has-text-danger help"
       >{{ error }}</span
       >
  </ValidationProvider>

【问题讨论】：

不要使用is-danger 类，而是使用另一个只有您需要的样式的类？

标签： vue.js validation vee-validate

【解决方案1】：

如果您已共享您编写的验证代码会更好，但您可以参考下面的代码仅获取警告文本和红边文本框以及附加图像以进行输出。 p>

如果这能解决您的问题，请标记为正确答案

继续编码。

<template>
  <div class="column is-12">
    <label class="label" for="email">Email</label>
    <p :class="{ 'control': true }">
      <input
        v-validate="'required|email'"
        :class="{'input': true, 'is-danger': errors.has('email') }"
        name="email"
        type="text"
        placeholder="Email"
      >
      <span v-show="errors.has('email')" class="help is-danger">{{ errors.first('email') }}</span>
    </p>
  </div>
</template>

<script>
export default {
  name: "basic-example"
};
</script>

VeeValidate Example

【讨论】：

【解决方案2】：

我使用了 vee-validate3 并通过添加解决了这个问题

#password{
   background-image:none !important;
}

它工作正常，我这样做是因为我不想显示密码字段的复选或十字图标，希望这个答案对你有所帮助

【讨论】：