javascript - 使用 vuejs 输入字段实时验证

Question

我有一个输入字段，我想对其进行实时验证。由于它只有一个字段，我想避免使用整个库进行 vue 表单验证。

我想完成三件事:

1. 如果存在名字、空格和姓氏，则输入字段有效。例如，a c 有效，而 a 无效。尽管 a b c 是有效的。
2. 输入字段包装在 #wrapper 内，应使用 valid 或 invalid，具体取决于验证
3. 如果用户尝试发送无效字符串(通过单击按钮或按 Enter 键)，则应显示 .alert。

我尝试编写一个vue脚本:

computed: {
  inputClass: function () {
    var inputField=document.getElementById("inputField").value;
    if (inputField==null || inputField=="") {
      return 'invalid';
    } else {
      return 'valid';
    }
  }
}

遗憾的是，即使输入字段为空，该脚本也始终返回“有效”。

由于我出于其他原因使用 vue.js，因此在我的 vue 应用程序中实现它似乎是个好主意。但我可以使用 jQuery。我尝试使用以下脚本解决列表中的第三个需求:

$('button').on('click', function(){
  if( $(this).val().length === 0 ) {
    $('.alert').fadeIn();
  } else {
    $('.alert').hide();
  }
});

为了更容易理解I have created a JS Bin带有 HTML 标记和代码。

Answer 1

你应该仔细看看vuejs文档，看来你并没有真正理解这个框架的含义。

只有当实例的数据更新时，计算变量才会被重新计算。在这里，没有办法对任何事情使用react，因此 inputClass 永远不会再次被计算。

我修改了your example将您的输入绑定(bind)到实例。

我在数据属性和 html 中将其声明为 v-model。

var app = new Vue({
  el: '#app',
  data: {
    "input": "",
  },
  computed: {
    inputClass: function () {
      var inputField=document.getElementById("inputField").value;
      if (this.input === "") {
        return 'invalid';
      } else {
        return 'valid';
      }
    }
  }
});



      <input v-model="input" type="text" placeholder="Type your full name..." id="inputField">

现在可以使用了