Javascript 使用Vue.js和Validate.js动态定义表单相关约束

我们正在开发一个应用程序，我们使用

Vue2

作为我们的javascript框架，我们还使用

validate.js

进行客户端表单验证，我们还定义了一个

form

类，并在所有表单中使用该类使代码可重用

这是

表单类

   class Form {
    constructor(formElm) {
    // get form data
    data = formToJSON(formElm.elements);

    this.originalData = data;

    for (let field in data) {
        this[field] = data[field];
    }

    this.errors = new Errors();
}

data() {
    let data = {};
    for (let property in this.originalData) {
        data[property] = this[property];
    }

    return data;
}

reset() {
    for (let field in this.originalData) {
        this[field] = '';
    }

    this.errors.clear();
}

post(url) {
    return this.submit('post', url);
}



  submit(requestType, url) {
    return new Promise((resolve, reject) => {
        axios[requestType](url, this.data())
             .then(response => {
                 this.onSuccess(response.data);
                 resolve(response.data);
             })
             .catch(error => {
                 this.onFail(error.response.data);
                 reject(error.response.data);
           });
      });
   }

  onSuccess(data) {
      //alert(data.message);
      this.reset();
  }

  onFail(errors) {
      this.errors.record(errors);
   }
 }

下面是使用

表单的
Vue
实例

 new Vue({
    el: "#form",
   data: {
       form: new Form(formElm)
   },
   methods: {
       onSubmit() {

        let formData = this.form.data();
        let form     = this.form;

        // setup the constraints for validate.js
        var constraints = {
            name: {
                presence: {
                    options: {
                        message: "Name is required."
                    }
                }
            },
            description: {
                presence: {
                    options: {
                        message: "Description is required."
                    }
                }
            }
        };

        // validate the fields
        validate.async(formData, constraints)
                .then(function(success) {
                    form.post('/admin/category');
                })
                .catch(function(error) {
                    form.onFail(error);
                });
    },

     onSuccess(response) {
         //alert(response.data.message);

         form.reset();
     }
   }
});

问题
我们需要修改代码，使
约束
动态传递到每个
Vue
实例，并根据表单字段创建。
我们应该对代码进行哪些修改