Vue.js 如何为任何空输入字段验证vue表单生成器架构字段_Vue.js

Vue.js 如何为任何空输入字段验证vue表单生成器架构字段

vue.js

Vue.js 如何为任何空输入字段验证vue表单生成器架构字段,vue.js,Vue.js,在这里，我编写了一个验证vue表单生成器输入字段的代码。这里我为这两个组件编写了两个vue生成器表单组件，我有两个模式。在该模式中，我希望验证每个字段的有效性。与第一个屏幕上的空白字段一样，“下一步”按钮不应启用，应禁用，直到所有输入字段都已填充。所以这里我想验证一个输入字段，如果它是空的，下一步按钮应该禁用。因此，如果有人对此有想法，请帮助我 <div> <vue-form-g :schema="schema_third"

在这里，我编写了一个验证vue表单生成器输入字段的代码。这里我为这两个组件编写了两个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="prev()">Previous</button>
      <button class="prev_next_btn" @click="next()">Next</button>
    </span>
  </div>


以前的
下一个


以前的
下一个

vue.js

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,
        type: null,
        origin: null,
        Age: null,
        Size: null,
        Maker: null,
        Material: null,
        other_spec: 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,
          },
        ],
      },
      
      schema_Antiques: {
            fields: [{
                type: "input",
                inputType: "text",
                placeholder: "Type",
                model: "type",
                styleClasses: ["half-width col-xs-12 col-sm-6", "job_title"]
            }, {
                type: "input",
                inputType: "text",
                placeholder: "Origin",
                required: true,
                model: "Origin",
                styleClasses: ["half-width col-xs-12 col-sm-6", "Experience"]
            }, {
                type: "input",
                inputType: "number",
                placeholder: "Age",
                required: true,
                model: "Age",
                styleClasses: ["half-width col-xs-12 col-sm-6", "job_title"]
            }, {
                type: "input",
                inputType: "text",
                placeholder: "Condition",
                required: true,
                model: "Condition",
                styleClasses: ["half-width col-xs-12 col-sm-6", "Experience"]
            }, {
                type: "input",
                inputType: "number",
                placeholder: "Size",
                required: true,
                model: "Size",
                styleClasses: ["half-width col-xs-12 col-sm-6", "job_title"]
            }, {
                type: "input",
                inputType: "text",
                placeholder: "Maker",
                required: true,
                model: "Maker",
                styleClasses: ["half-width col-xs-12 col-sm-6", "Experience"]
            }, {
                type: "input",
                inputType: "text",
                placeholder: "Material",
                required: true,
                model: "Material",
                styleClasses: ["half-width col-xs-12 col-sm-4", "job_title"]
            }, {
                type: "textArea",
                model: "other_spec",
                max: 500,
                placeholder: "Other spec:",
                styleClasses: ["half-width col-xs-12 col-sm-3", "Experience"]
            }]
        },
      
      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>

导出默认值{
组成部分：{
“vue-form-g”：VueFormGenerator.component，
},
数据（）{
返回{
步骤：1，
formKey:1，
型号：{
职务名称：空，
经验：空，
位置：空，
行业：空，
时间：空，
类型：null，
来源：空，
年龄：空，
大小：空，
Maker:null，
材料：空，
其他规格：空，
},
第三种模式：{
字段：[
{
键入：“输入”，
输入类型：“文本”，
占位符：“职务”，
要求：正确，
型号：“职务”，
姓名：“职务”，
样式类：[“半宽col-xs-12 col-sm-6”，“职务”]，
验证程序：VueFormGenerator.validators.text，
},
{
键入：“输入”，
输入类型：“文本”，
占位符：“经验”，
要求：正确，
模型：“经验”，
样式类：[“半宽col-xs-12 col-sm-6”，“体验”]，
验证程序：VueFormGenerator.validators.text，
},
{
键入：“输入”，
输入类型：“文本”，
占位符：“位置”，
要求：正确，
型号：“位置”，
样式类：[“半宽col-xs-12 col-sm-6”，“职务”]，
验证程序：VueFormGenerator.validators.text，
},
{
键入：“输入”，
输入类型：“文本”，
占位符：“工业”，
要求：正确，
模型：“工业”，
样式类：[“半宽col-xs-12 col-sm-6”，“体验”]，
验证程序：VueFormGenerator.validators.text，
},
{
键入：“输入”，
输入类型：“文本”，
占位符：“时间”，
要求：正确，
模型：“时间”，
样式类：[“半宽col-xs-12 col-sm-6”，“职务”]，
验证程序：VueFormGenerator.validators.text，
},
{
键入：“输入”，
输入类型：“文本”，
占位符：“时间”，
要求：正确，
模型：“时间”，
样式类：[“半宽col-xs-12 col-sm-6”，“体验”]，
验证程序：VueFormGenerator.validators.text，
},
],
},
古董：{
字段：[{
键入：“输入”，
输入类型：“文本”，
占位符：“类型”，
型号：“类型”，
样式类：[“半宽col-xs-12 col-sm-6”，“职务”]
}, {
键入：“输入”，
输入类型：“文本”，
占位符：“原点”，
要求：正确，
型号：“原产地”，
样式类：[“半宽col-xs-12 col-sm-6”，“体验”]
}, {
键入：“输入”，
输入类型：“编号”，
占位符：“年龄”，
要求：正确，
模型：“年龄”，
样式类：[“半宽col-xs-12 col-sm-6”，“职务”]
}, {
键入：“输入”，
输入类型：“文本”，
占位符：“条件”，
要求：正确，
模型：“条件”，
样式类：[“半宽col-xs-12 col-sm-6”，“体验”]
}, {
键入：“输入”，
输入类型：“编号”，
占位符：“大小”，
要求：正确，
型号：“尺寸”，
样式类：[“半宽col-xs-12 col-sm-6”，“职务”]
}, {
键入：“输入”，
输入类型：“文本”，
占位符：“制造者”，
要求：正确，
型号：“制造商”，
样式类：[“半宽col-xs-12 col-sm-6”，“体验”]
}, {
键入：“输入”，
输入类型：“文本”，
占位符：“材料”，
要求：正确，
型号：“材料”，
样式类：[“半宽col-xs-12 col-sm-4”，“职务”]
}, {
键入：“textArea”，
型号：“其他规格”，
最高：500，
占位符：“其他规范：”，
样式类：[“半宽col-xs-12 col-sm-3”，“体验”]
}]
},
表格选项：{
validateAfterLoad:true，
validateAfterChanged:true，
},
};
},
分隔符：[“”]，
就绪：函数（）{
控制台日志（“就绪”）；
},
方法：{
prev（）{
if（this.checkForm（））{
这一步--；
}
},
下一个（）{
if（this.checkForm（））{
这个.step++；
}
},
检查表（）{
让fields=Object.assign（[]，this.schema\u third.fields）；
让错误=[]；
fields.forEach（（字段，索引）=>{
if（field.required&！this.model[field.model]）{
字段[index].styleClasses.push（“错误字段”）；
错误。推送（需要field.placeholder+）；
}否则如果(
this.model[field.model]&&
字段[index].styleClasses.includes（“e
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,
        type: null,
        origin: null,
        Age: null,
        Size: null,
        Maker: null,
        Material: null,
        other_spec: 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,
          },
        ],
      },
      
      schema_Antiques: {
            fields: [{
                type: "input",
                inputType: "text",
                placeholder: "Type",
                model: "type",
                styleClasses: ["half-width col-xs-12 col-sm-6", "job_title"]
            }, {
                type: "input",
                inputType: "text",
                placeholder: "Origin",
                required: true,
                model: "Origin",
                styleClasses: ["half-width col-xs-12 col-sm-6", "Experience"]
            }, {
                type: "input",
                inputType: "number",
                placeholder: "Age",
                required: true,
                model: "Age",
                styleClasses: ["half-width col-xs-12 col-sm-6", "job_title"]
            }, {
                type: "input",
                inputType: "text",
                placeholder: "Condition",
                required: true,
                model: "Condition",
                styleClasses: ["half-width col-xs-12 col-sm-6", "Experience"]
            }, {
                type: "input",
                inputType: "number",
                placeholder: "Size",
                required: true,
                model: "Size",
                styleClasses: ["half-width col-xs-12 col-sm-6", "job_title"]
            }, {
                type: "input",
                inputType: "text",
                placeholder: "Maker",
                required: true,
                model: "Maker",
                styleClasses: ["half-width col-xs-12 col-sm-6", "Experience"]
            }, {
                type: "input",
                inputType: "text",
                placeholder: "Material",
                required: true,
                model: "Material",
                styleClasses: ["half-width col-xs-12 col-sm-4", "job_title"]
            }, {
                type: "textArea",
                model: "other_spec",
                max: 500,
                placeholder: "Other spec:",
                styleClasses: ["half-width col-xs-12 col-sm-3", "Experience"]
            }]
        },
      
      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>