删除vue js中表单字段的错误边框

Question

我有一个表单，并在提交过程中显示每个表单字段的红色错误边框。我的要求是我想在焦点事件中删除这些边框。

我想在我的Vue JS项目中实现它。我已经安装了Js包。

我在“已安装”功能中编写了我的代码。

mounted: function () {

             $("body").on("focus", ".error-border", function () {
               $(this).removeClass("error-border")
             })
        }

Answer 1

我认为你只需要使用VueJS数据就可以了。例如，您可以拥有这样的模板......

<div id="app">
  <form action="">
    <input type="text" @focus="focused = true" @blur="focused = false">
    <p>{{ focused }}</p> // Displaying value to debug
  </form>
</div>

...而你的Vue代码看起来就像那样

new Vue({
  el: "#app",
  data() {
    return {
        focused: false
    }
  }
})

这是一个fiddle自己尝试。

当你的输入被聚焦时，使用@focus会触发事件，而当你的输入没有时，使用@blur。话虽如此，你可以做任何你想要改变边框颜色的东西。当VueJS watchers改变时，我会使用focused来改变颜色。

对于那部分，我让你看到我上面链接的文档。

Answer 2

快速说明：尝试查看轻量级验证框架（如vuelidate）是否对您的代码有帮助。如果表单中有大量输入，表单验证可能会变得非常混乱。

我创建了这个小提琴，让你了解如何使用附加到v-on:focused事件的vue方法来做到这一点

new Vue({
  el: "#app",
  data() {
    return {
    	inputError: true
    }
  },
  methods: {
  	toggleBorder: function(event) {
      this.inputError = true
      event.target.classList.remove('red-border')
    }
  }
})

.red-border {
  border: 1px solid #f00;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <form action="">
    <input type="text" @focus="toggleBorder" :class="{'red-border': inputError}">
  </form>
</div>

正如其中一条评论中所提到的，尽量不要将jQuery与vue值一起使用，因为你经常需要编写额外的逻辑来使两者协同工作

Answer 3

我注意到你正在使用Body标签触发焦点事件来删除css类，但是这种行为主要用于输入。

如果要在焦点事件发生时从元素中删除类，可以使用@focus指令..这里是一个示例：

<script>
new Vue({
  el: '#app',
  data: {
    displayError : true
  },

});
</script>

HTML

<div id="app">
<input 
 @focus="displayError = false" 
 :class="{'error-border': displayError}” />

</div>

CSS

.error-border {
  border: 1px solid red;
}

您可以在计算属性中显示该类或作为示例。

Answer 4

在Vue中工作时直接操作DOM几乎不是一个好主意 - 不是使用jQuery，而是使用vanillaJS。当Vue覆盖你已经改变的DOM的部分时，你将不可避免地最终得到Vue和非Vue代码之间的冲突;并引入数据模型与其DOM表示不同步的错误。

利用框架：让Vue担心DOM，而是关注组件数据。

处理表单验证的方法有很多种;如果你不想一直到真正的validation library一个简单的策略是使用计算函数来检查每个输入的有效性：

new Vue({
  el: '#app',
  data: {
    foo: ''
  },
  computed: {
    fooIsInvalid() {
      return this.foo === '' // your validation rules here
    }
  }

});

input.invalid {border-color:red}

<script src="https://unpkg.com/vue@latest/dist/vue.js"></script>
<div id="app">
  <input v-model="foo" :class="{invalid: fooIsInvalid}">
</div>

或者，您可以依赖焦点和输入事件来设置数据模型值而不是计算函数：

new Vue({
  el: '#app',
  data: {
    foo: '',
    fooIsInvalid: false
  },
  methods: {
    validate() {
      this.fooIsInvalid = !!(this.foo === '')
    }
  }
});

input.invalid {border-color: red}

<script src="https://unpkg.com/vue@latest/dist/vue.js"></script>
<div id="app">
  <input v-model="foo" @focus="validate()" @input="validate()" :class="{invalid: fooIsInvalid}">
</div>

另一种方法是由Vue Cookbook建议的（基本上是单个“错误”数组，填写提交，而不是每个表单字段的单独变量）。或者对于更可重用的方法，您可以构建自己的输入字段组件，根据其v模型设置自己的“isValid”变量（尽管此时您基本上将重新发明现有的验证库，并且应该只使用现有的代码。）