Question

我正在使用Vue.js创建一个登录表单并验证它。

我想要的是如果输入字段为空显示错误（输入字段有红色边框），但问题是它背后的逻辑创建。

如何在Vue.js中只使用一个方法处理两个输入字段并检查它们是否为空？我们假设有十个输入，我不能只写十种方法！

＆＃13;

new Vue({
  el: "#app",
  data: {
    email: '',
    password: '',
    hasError: false
  },
  methods: {
  	validateFields() {
    	if(!this.email && !this.password) {
        	this.hasError = true;
        } else {
        	this.hasError = false;
        }
    }
  }
});

＆＃13;

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
}

.hasError {
    border-color: red !important;
}

＆＃13;

<div id="app">
    <input type="text" v-model="email" @input="validateFields" :class="{hasError: hasError}">
    <input type="password" v-model="password" @input="validateFields" :class="{hasError: hasError}">
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.min.js"></script>

＆＃13;

正如您所看到的，它显示异常行为，因为密码字段显示错误，尽管我还没有在该字段中输入任何内容。我该如何解决这个问题？

Answer 1

您可以使用自定义输入组件进行验证或使用第三方验证组件，请参阅Custom Vue Material md-Input how to get isDirty or isTouched

如何在Vue.js中使用一个方法处理两个输入字段？

1 个答案: