elementUI 级联选择框表单验证

今天遇到了一个需求：进行级联选择框的表单验证，突然有点懵逼。感觉应该和正常的表单验证类似，但不是很清晰，后来还是在博客园找到了相关参考文章。

先上代码：

<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">

  <el-form-item label="选择分类" prop="sorts">

     <el-cascader

       :options="options"

       change-on-select

       filterable

       v-model="ruleForm.sorts"

       clearable></el-cascader>

  </el-form-item>

</el-form>

data() {

  /*表单验证*/

  ruleForm: {

    sorts: '',

  },

  /*验证规则*/

  rules: {

    sorts: [

        { type: 'arary', required: true, message: '请选择分类', trigger: 'change'}

    ],

  }

}

实际上看上面的代码和表单验证并无太大区别，只是将 el-table-item 里面的 el-input 标签换成了 el-cascader，其表单验证以及规则都是相似的。

需要注意的是：

级联选择框验证规则的触发事件是 change 事件，当级联选择器的内容发生变化时会触发验证。
如果验证无法生效，首先需要检查 prop 是否绑定了表单的验证规则，以及 el-cascader 里面的 v-model 是否绑定了表单验证属性；然后由于级联选择器选中的内容是以数组的形式存在，要注意设置验证规则里面的 type 值为 array。

参考文章：https://www.cnblogs.com/fur-mat/p/11984242.html

巴特西

elementUI 级联选择框表单验证

最新文章

热门文章

巴特西

elementUI 级联选择框 表单验证

最新文章

热门文章

elementUI 级联选择框表单验证