是否在VueJS中验证模型中的数据？任何Vue验证器都不起作用

Question

你好,

正如你们许多人所知道的，你不能在大多数UI组件中使用Vue-validator，这使得验证变得很困难。我使用的是@mjanys的Vue Material Components，这是一个非常好的库。作者提供了一些东西来处理验证的结果-真/假和消息，这在这类库中很常见，但是我如何提供对模型中数据的实时验证？我希望我说得足够清楚，但如果不清楚，请让我知道，我会尝试解释更多。

我还需要能够通过ajax验证-例如，注册时唯一的用户名等。

Answer 1

所以它实际上很简单，但是你可以用几种方法来解决它。最简单的方法是创建一个验证器函数，将值和验证类型传递给该函数

我已经制作了一个小提琴来说明。对于验证，您可以编写自己的验证函数，也可以使用类似于validator.js的方法

https://jsfiddle.net/vbranden/joyeybq8/

总之，验证函数如下所示

  methods: {
    validate: function (value, type) {
        switch (type) {
        case 'age':
            return value > 0
        case 'alpha':
            return validator.isAlpha(value)
        case 'alphanumeric':
            return validator.isAlphaNumeric(value)
        case 'email':
            return validator.isEmail(value)
        default:
            return true
      }
    }
  }

数据看起来像

  data: {
    age: null,
    lastName: '',
    password: '',
    email: ''
  }

并且在组件中

<md-input :value.sync="email" type="email" :valid="validate(email, 'email')">

您可以看到，您将值传递给validate，这使得它成为反应/实时的，然后传递一个类型来确定要运行哪个验证函数