设置为label_自定义组件设置自定义校验规则

最新推荐文章于 2023-02-03 10:42:04 发布

西岸先生

最新推荐文章于 2023-02-03 10:42:04 发布

阅读量301

点赞数 1

文章标签：设置为label

本文链接：https://blog.csdn.net/weixin_28902341/article/details/112721448

版权

本文介绍了如何在自定义组件内设置校验规则，以简化复杂的表单验证配置。通过el-form-renderer库，自定义组件可以内部定义rules，隐藏细节，使用者只需引入组件即可。示例展示了在your-component.vue中定义rules，并通过onInput方法处理用户输入。此外，rules还可以是函数，动态返回验证规则。但要注意，这种方式不支持全局注册的组件。

摘要由CSDN通过智能技术生成

为何要在自定义组件设置校验规则?

一个复杂的表单项配置, 往往需要定义一些规则(rules)来限制用户输入, 规则里面可能还会有自定义的验证器(validator), 这样的表单项多了之后, 就会导致页面文件的配置项变得很长很长.

现在 el-form-renderer 为自定义组件提供了一个接口, 自定义组件可以内部设置一些规则, 从而达到封装隐藏目的, 使用者可以不用再关心表单的验证规则。

只需引入一个组件, 它全帮你做好了!

教程

使用了 el-form-renderer 的页面

your-page.vue

<template>
  <el-form-renderer ref="form" :content="content"></el-form-renderer>
</template>

<script>
import YourComponent from './your-component.vue'
export default {
  data() {
    return {
      content: [
        {
          id: 'phone',
          label: 'phone',
          component: YourComponent
        }
      ]
    }
  }
}
</script>

组件

your-component.vue

<template>
  <input type="text" :value="value" @input="onInput">
</template>

<script>
export default {
  rules: [
    {
      required: true,
      message: '自定义组件的提醒消息'
    }
  ],
  props: ['value'],
  methods: {
    onInput(val) {
      this.$emit('input', val)
    }
  }
}
</script>

rules 也可以是个函数, 参数是当前表单项配置, 需要返回一个数组.

rules(item) {
  return [
    {
      required: true,
      message: `${item.id} 不能为空`
    }
  ]
}

在线Demo

点击查看

注意事项

暂不支持全局注册的组件

即使用 Vue.component('your-component', YourComponent) 注册的组件