Question

我有一个输入字段，我想要进行实时验证。作为唯一的单个字段，我想避免使用整个库进行vue表单验证。

我想完成三件事：

如果有名字，空格和姓氏，则输入字段有效。例如a c有效，而a则无效。虽然a b c有效。
输入字段包含在#wrapper中，该处理器应使用valid或invalid，具体取决于验证
如果用户尝试发送无效字符串（通过单击按钮或按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();
  }
});

使用HTML标记和代码更容易理解I have created a JS Bin。

Answer 1

你应该阅读vuejs文档，看来你并没有真正掌握框架的内容。

只有在更新实例数据时才会重新计算计算变量。在这里，没有办法对任何事情作出反应，因此inputClass永远不会再次计算。

我已修改your example以将您的输入绑定到实例。

我在数据适当性和html中将其声明为v模型。

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">

现在它正在运作

使用vuejs输入字段实时验证

1 个答案: