Vuejs 2+表单验证

Question

既然vue-validator https://github.com/vuejs/vue-validator已经为Vuejs2做好了准备，那么实现前端验证的最佳方式是什么呢？

更新我发现了这个很棒的插件Vee Validate

Answer 1

在我看来，使用vuelidate是实现VueJS前端验证的一个好方法。

它使用起来非常简单，而且功能强大。它提供基于模型的验证，这意味着它是您在验证的数据中定义的，因此它与模板完全解耦。它带有通用的内置验证器，用于电子邮件、最小长度和最大长度或必需的验证。还有很多其他的。

Answer 2

由于最终都是Javascript，您还可以使用一些现有的Javascript验证库，如Parsely.js或Validate.js来将其连接起来。Validate.js库的一个好处是，如果你使用Vuex，它的格式可以很容易地存储在全局存储中：

var constraints = {
  creditCardNumber: {
    presence: true,
    format: {
      pattern: /^(34|37|4|5[1-5]).*$/,
      message: function(value, attribute, validatorOptions, attributes, globalOptions) {
        return validate.format("^%{num} is not a valid credit card number", {
          num: value
        });
      }
    },
    length: function(value, attributes, attributeName, options, constraints) {
      if (value) {
        // Amex
        if ((/^(34|37).*$/).test(value)) return {is: 15};
        // Visa, Mastercard
        if ((/^(4|5[1-5]).*$/).test(value)) return {is: 16};
      }
      // Unknown card, don't validate length
      return false;
    }
  },
  creditCardZip: function(value, attributes, attributeName, options, constraints) {
    if (!(/^(34|37).*$/).test(attributes.creditCardNumber)) return null;
    return {
      presence: {message: "is required when using AMEX"},
      length: {is: 5}
    };
  }
};

然后按如下方式使用：

validate({creditCardNumber: "4"}, constraints);
// => {"creditCardNumber": ["Credit card number is the wrong length (should be 16 characters)"]}

validate({creditCardNumber: "9999999999999999"}, constraints);
// => {"creditCardNumber": ["9999999999999999 is not a valid credit card number"]}

validate({creditCardNumber: "4242424242424242"}, constraints);
// => undefined

validate({creditCardNumber: "340000000000000"}, constraints);
// => {"creditCardZip": ["Credit card zip is required when using AMEX"]}

您还可以使用类似于@blur=validate(...)的代码将这些validate()函数连接到您的组件

Answer 3

目前没有太多的选择。看看vue-awesome，在那里你可以找到最相关的库。目前有两个。