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不在焦点上时触发事件。如此说来，您可以做任何想要更改边框颜色的操作。当focused更改时，我将使用VueJS watchers更改颜色。

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

Answer 2

我注意到您正在使用The 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 3

快速笔记：尝试看看像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 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”变量（尽管此时，您将基本上是在重新发明现有的验证库，并且可能应该只使用现有的代码）

在Vue JS中删除表单字段的错误边框

4 个答案: