Element select表单必填验证

特别注意:如第一段代码这里的区别是prop和v-model绑定的值不一样,这样的话是不行的,他们两个的值必须一样!!!!!而且还有一种情况,就是roleStatus必须要放在form里面,而且还必须是一个数组!!!!


错误写法prop和v-model不一致

<el-form label-width="300px" :rules="rules" :model="changeSourceDataForm">
          <el-form-item label="民政部门儿童登记信息: " prop="civilChildrenName11">
            <el-select v-model="changeSourceDataForm.civilChildrenName"  multiple filterable placeholder="请选择民政部门儿童登记信息"
            >
              <el-option v-for="item in changeSourceData.civilChildrens" :key="item.id" :label="item.tableName"
                         :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
</el-form>

正确做法 写法prop和v-model 一致

<el-form label-width="300px" :rules="rules" :model="changeSourceDataForm">
          <el-form-item label="民政部门儿童登记信息: " prop="civilChildrenName">
            <el-select v-model="changeSourceDataForm.civilChildrenName"  multiple filterable placeholder="请选择民政部门儿童登记信息"
            >
              <el-option v-for="item in changeSourceData.civilChildrens" :key="item.id" :label="item.tableName"
                         :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
</el-form>

这注意 trigger 和 type,下拉框一般是change来触发验证,type是你v-model绑定的值看看是什么类型,是什么就写什么,我这是数组就写的array。

    // 表单校验
        rules: {
          civilChildrenName: [
            {required: true, message: "民政部门儿童登记信息不能为空", trigger: ["blur",'change'],type: 'array'}
            ]
          }

posted @ 2023-07-04 18:39  菜鸟辉哥  阅读(355)  评论(0编辑  收藏  举报