尝试验证 vue-form 生成器表单字段

Question

这里我使用的是 vue-form 生成器。我想验证声明为 Vue 表单生成器对象的字段表单。在此，当字段为空时不应导航到下一步；如果任何字段为空，则该字段边框应变为红色，并且不会导航到下一步。我正在非常努力地实现这一目标，但仍然没有这样做；如果有人有想法，请帮助我。

<div>
    <vue-form-g :schema="schema_third" :model="model" :options="formOptions"></vue-form-g>
<span class="prev_next">
    <button class="prev_next_btn" @click.prevent="prev()">Previous</button>
    <button class="prev_next_btn" @click.prevent="next()">Next</button>
</span>
</div>

vue 表单生成器

Vue.use(VueFormWizard)
new Vue({
 el: '#q-vikreya',

    components: {
        "vue-form-g": VueFormGenerator.component
    },

    data() {
            return {
            step:1,
            model: {},
        schema_third: {
            fields: [{
                type: "input",
                inputType: "text",
                placeholder: "Job title",
                required: true,
                model: "job_title",
                name: "Job_title",
                styleClasses: ["half-width col-xs-12 col-sm-6", "job_title"],
                validator: VueFormGenerator.validators.text
            }, {
                type: "input",
                inputType: "text",
                placeholder: "Experience",
                required: true,
                model: "Experience",
                styleClasses: ["half-width col-xs-12 col-sm-6", "Experience"],
                validator: VueFormGenerator.validators.text
            }, {
                type: "input",
                inputType: "text",
                placeholder: "Location",
                required: true,
                model: "Location",
                styleClasses: ["half-width col-xs-12 col-sm-6", "job_title"],
                validator: VueFormGenerator.validators.text
            }, {
                type: "input",
                inputType: "text",
                placeholder: "Industry",
                required: true,
                model: "Industry",
                styleClasses: ["half-width col-xs-12 col-sm-6", "Experience"],
                validator: VueFormGenerator.validators.text
            }, {
                type: "input",
                inputType: "text",
                placeholder: "Time",
                required: true,
                model: "Time",
                styleClasses: ["half-width col-xs-12 col-sm-6", "job_title"],
                validator: VueFormGenerator.validators.text
            }, {
                type: "input",
                inputType: "text",
                placeholder: "Time",
                required: true,
                model: "Time",
                styleClasses: ["half-width col-xs-12 col-sm-6", "Experience"],
                validator: VueFormGenerator.validators.text
            }]
         },
        formOptions: {
            validateAfterLoad: true,
            validateAfterChanged: true
        }
            };
    },
<!--/ By using this delimiters we were able to fix the vue.js compatibility with django. since the curly braces between django and-->
<!--    // vue.js conflicted, delimiters helped here to solve the conflicts-->
    delimiters: ["<%","%>"],
        ready: function() {
        console.log('ready');
    },

 methods: {
    prev() {
      if(this.checkForm()) {
        this.step--;
      }
    },
    next() {
      if(this.checkForm()) {
        this.step++;
      }
    },
    checkForm: function (e) {
      if (this.category && this.title) {
        return true;
      }

      this.errors = [];

      if (!this.category) {
        this.errors.push('Name required.');
      }
      if (!this.title) {
        this.errors.push('Age required.');
      }

      e.preventDefault();
    },

      submitForm: function(){
            axios({
                method : "POST",
                url: "{% url 'PostAd' %}", //django path name
                headers: {'X-CSRFTOKEN': '{{ csrf_token }}', 'Content-Type': 'application/json'},
                data : {"category":this.category, "title":this.title,
                "address":this.address,
                "city": this.city,
                "state": this.state,
                "zip": this.zip,
                "price": this.price,
                "description": this.description,
                "radio_price": this.radio_price,
                "Job_title": this.model,
                },//data
              }).then(response => {
              console.log("response");
              console.log(response.data);
                  this.success_msg = response.data['msg'];
                 window.location.replace('{% url "classifieds" %}')  // Replace home by the name of your home view

              }).catch(err => {
                     this.err_msg = err.response.data['err'];
              console.log("response1");
              console.log(err.response.data);

              });

          },
  }
})

Answer 1

你只需要使用你的“模型”变量，然后使用“schema_third.fields”并在里面循环。

循环后，您可以检查该模型键是否设置在“模型”对象中。如果未设置，则在每个字段的 styleClasses 中添加类“error-field”。如果设置了值，反之亦然删除该类。

以下是您需要添加到 checkForm 函数中的代码：

checkForm() {
      let fields = Object.assign([], this.schema_third.fields);
      let errors = [];

      fields.forEach((field, index) => {
        if (field.required && !this.model[field.model]) {
          fields[index].styleClasses.push("error-field");
          errors.push(field.placeholder + " is required");
        } else if (
          this.model[field.model] &&
          fields[index].styleClasses.includes("error-field")
        ) {
          let indexOfErrorClass = fields[index].styleClasses.indexOf(
            "error-field"
          );
          fields[index].styleClasses.splice(indexOfErrorClass, 1);
        }
      });
      this.schema_third.fields = fields;
      return errors.length === 0;
    },

样式类如下：

.error-field input{
  border: solid thin red;
}

整个 Form.vue 文件：

<template>
  <div>
    <vue-form-g
      :schema="schema_third"
      :model="model"
      :options="formOptions"
    ></vue-form-g>
    <span class="prev_next">
      <button class="prev_next_btn" @click="prev()">Previous</button>
      <button class="prev_next_btn" @click="next()">Next</button>
    </span>
  </div>
</template>

<script>
import axios from "axios";
import VueFormGenerator from "vue-form-generator";
export default {
  components: {
    "vue-form-g": VueFormGenerator.component,
  },

  data() {
    return {
      step: 1,
      formKey: 1,
      model: {
        job_title: null,
        Experience: null,
        Location: null,
        Industry: null,
        Time: null,
      },
      schema_third: {
        fields: [
          {
            type: "input",
            inputType: "text",
            placeholder: "Job title",
            required: true,
            model: "job_title",
            name: "Job_title",
            styleClasses: ["half-width col-xs-12 col-sm-6", "job_title"],
            validator: VueFormGenerator.validators.text,
          },
          {
            type: "input",
            inputType: "text",
            placeholder: "Experience",
            required: true,
            model: "Experience",
            styleClasses: ["half-width col-xs-12 col-sm-6", "Experience"],
            validator: VueFormGenerator.validators.text,
          },
          {
            type: "input",
            inputType: "text",
            placeholder: "Location",
            required: true,
            model: "Location",
            styleClasses: ["half-width col-xs-12 col-sm-6", "job_title"],
            validator: VueFormGenerator.validators.text,
          },
          {
            type: "input",
            inputType: "text",
            placeholder: "Industry",
            required: true,
            model: "Industry",
            styleClasses: ["half-width col-xs-12 col-sm-6", "Experience"],
            validator: VueFormGenerator.validators.text,
          },
          {
            type: "input",
            inputType: "text",
            placeholder: "Time",
            required: true,
            model: "Time",
            styleClasses: ["half-width col-xs-12 col-sm-6", "job_title"],
            validator: VueFormGenerator.validators.text,
          },
          {
            type: "input",
            inputType: "text",
            placeholder: "Time",
            required: true,
            model: "Time",
            styleClasses: ["half-width col-xs-12 col-sm-6", "Experience"],
            validator: VueFormGenerator.validators.text,
          },
        ],
      },
      formOptions: {
        validateAfterLoad: true,
        validateAfterChanged: true,
      },
    };
  },
  delimiters: ["<%", "%>"],
  ready: function () {
    console.log("ready");
  },
  methods: {
    prev() {
      if (this.checkForm()) {
        this.step--;
      }
    },
    next() {
      if (this.checkForm()) {
        this.step++;
      }
    },
    checkForm() {
      let fields = Object.assign([], this.schema_third.fields);
      let errors = [];

      fields.forEach((field, index) => {
        if (field.required && !this.model[field.model]) {
          fields[index].styleClasses.push("error-field");
          errors.push(field.placeholder + " is required");
        } else if (
          this.model[field.model] &&
          fields[index].styleClasses.includes("error-field")
        ) {
          let indexOfErrorClass = fields[index].styleClasses.indexOf(
            "error-field"
          );
          fields[index].styleClasses.splice(indexOfErrorClass, 1);
        }
      });
      this.schema_third.fields = fields;
      return errors.length === 0;
    },

    submitForm: function () {
      axios({
        method: "POST",
        url: "{% url 'PostAd' %}", //django path name
        headers: {
          "X-CSRFTOKEN": "{{ csrf_token }}",
          "Content-Type": "application/json",
        },
        data: {
          category: this.category,
          title: this.title,
          address: this.address,
          city: this.city,
          state: this.state,
          zip: this.zip,
          price: this.price,
          description: this.description,
          radio_price: this.radio_price,
          Job_title: this.model,
        }, //data
      })
        .then((response) => {
          console.log("response");
          console.log(response.data);
          this.success_msg = response.data["msg"];
          window.location.replace('{% url "classifieds" %}'); // Replace home by the name of your home view
        })
        .catch((err) => {
          this.err_msg = err.response.data["err"];
          console.log("response1");
          console.log(err.response.data);
        });
    },
  },
};
</script>

<style>
.error-field input {
  border: solid thin red;
}
</style>