Question

您好，

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

我还需要能够通过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')">

你可以看到你传递了值来验证哪个使它成为被动/实时，然后是一个类型来确定要运行哪个验证函数

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

1 个答案: