Question

我们正在开发一个应用程序，我们正在使用Vue2作为我们的javascript框架，我们还使用validate.js进行客户端表单验证，我们还定义了一个Form类并使用它以所有形式使代码可重用。

这是Form class

   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

的form实例

 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();
     }
   }
});

问题我们需要以constraints动态传递给每个Vue实例并创建的方式修改代码，具体取决于表单字段。我们应该对代码做出哪些修改？

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

0 个答案: