vue+element ui表单提交校验问题

在进行表单校验时，明明输入了值，提交时却还是提示需要输入，问题可能出现在以下几个方面：

1、el-form-item中的prop字段需要和v-model中绑定的字段值一致，且还需要和rules中设置的校验值一致；

2、el-form中需要用model绑定，并且绑定的字段名称需要和后面一致；

3、rules中的校验规则需要注意，例如：如果是对input输入框设置校验，触发条件应设置为"blur"；如果对select下拉框设置校验，触发条件应设置为"change"。如果有多个触发条件，则应该注意触发条件的顺序；

4、rules中的校验字段未在data中声明，如果字段未申明，那么就无法实现数据双向绑定的效果。

<el-form-item label="存货编号：" prop="mat_code">
            <el-input v-model="formData['mat_code']" placeholder="存货编号" class="el_input">
              <template slot="append">
                <div class="el_input_text" @click="mateVisible = true">选择存货</div>
              </template>
            </el-input>
          </el-form-item>
rules: {
    mat_code: [
                { required: true, message: "请选择存货编号", trigger: "change" },
              ],
}

例如，如果想要对“存货编号”这个字段设置必输校验，只像上述代码这样写是不行的，还必须要在data中声明mat_code这个字段：

data(){
    return{
        rules:{
            mat_code: [
                  { required: true, message: "请选择存货编号", trigger: "change" },
                  ],
        }
        formData:{
            mat_code:"",//声明mat_code字段
        }
    }
}

这样的话就可以解决校验不起作用的问题啦！