组件必填验证

通过自定义属性 required，可以为组件添加必填验证。此功能适用于多种表单组件，并支持不同类型的 value。本文将介绍 required 属性的类型、基本用法。

类型

type Required = boolean | string | {
    message ?: String; // 自定义错误信息
    trigger ?: String; // 触发验证的事件，例如 'blur' 或 'change'
    required ?: boolean; // 是否为必填项
    validator ?: Function; // 自定义验证函数
}

示例

设置 input 必填

通过简单的 required: true，您可以为 input 组件添加必填验证。当用户未填写该字段时，表单验证将失败。

input

复制成功!

<template>
  <div>
    <form-create :rule="rule" v-model:api="fApi" :option="options"/>
  </div>
</template>

<script>
export default {
  data() {
    return {
      fApi: {},
      options: {
        onSubmit: (formData) => {
          alert(JSON.stringify(formData))
        }
      },
      rule: [
        {
          type: 'input',
          field: 'input',
          title: 'input',
          value: '',
          effect: {
            required: true
          }
        }
      ]
    }

  }
}
</script>

自定义错误信息

您可以通过 required: '请输入内容'，定制化必填验证的错误信息。这在多语言支持或需要精确提示时非常有用。

input

复制成功!

<template>
  <div>
    <form-create :rule="rule" v-model:api="fApi" :option="options"/>
  </div>
</template>

<script>
export default {
  data() {
    return {
      fApi: {},
      options: {
        onSubmit: (formData) => {
          alert(JSON.stringify(formData))
        }
      },
      rule: [
        {
          type: 'input',
          field: 'input',
          title: 'input',
          value: '',
          effect: {
            required: '请输入内容'
          }
        }
      ]
    }

  }
}
</script>