Vuejs 2 +表单验证

时间:2016-10-24 02:52:22

标签: javascript forms validation vue.js vuejs2

由于vue-validator https://github.com/vuejs/vue-validator已准备好用于Vuejs 2,实现前端验证的最佳方法是什么?

UPDATE 我找到了这个很棒的插件 Vee Validate

5 个答案:

答案 0 :(得分:3)

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

使用起来非常简单,功能强大。它提供基于模型的验证,这意味着它是您在验证的数据中定义的内容,因此它与模板完全分离。它配有常见的内置验证器,适用于电子邮件,最小和最大长度或要求。还有很多其他人。

答案 1 :(得分:2)

由于它最终都是Javascript,您还可以使用一些现有的Javascript验证库,如Parsely.jsValidate.js来解决这个问题。有关Validate.js库的一个好处是,如果你正在使用Vuex,它的格式可以很容易地存储在全局商店中:

private static $sort_options = array(
    'Alphabetical' => 'URLSegment',
    'Lowest Price' => 'BasePrice'
);

然后使用:

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

行中的某些内容将这些validate()函数挂钩到您的组件

答案 2 :(得分:1)

目前没有太多选择。查看vue-awesome,您可以在其中找到最相关的库。目前有2个。

答案 3 :(得分:1)

如果你正在使用semantic-ui或它的选项,他们会有一个惊人的表单验证插件。

semantic-ui-form-validation

我已经将它与Vuejs一起使用,效果很好。

答案 4 :(得分:0)

我发现这个验证器简单,灵活,文档齐全。它涵盖了在Vue Js中验证表单的大多数场景。

我过去使用过Jquery验证器插件。与此相比,这个简单的vue-validator在灵活性和验证硬编码和动态生成表单的能力方面非常突出。

https://github.com/semisleep/simple-vue-validator

我将它广泛用于我的SaaS项目,到目前为止它已经非常好了。