# im-form 表单组件使用说明

## 特性

- ✅ 支持多种布局（水平、垂直、行内）
- ✅ 完整的表单验证系统
- ✅ 响应式设计，适配移动端
- ✅ TypeScript 强类型支持
- ✅ 自定义验证规则
- ✅ 实时验证和提交验证
- ✅ 错误提示和状态显示
- ✅ 支持动态表单
- ✅ 丰富的表单方法

## 快速开始

### 基础使用

```vue
<template>
  <im-form v-model:model="formData" @submit="handleSubmit">
    <im-form-item label="用户名" prop="username" :rules="[rules.required()]">
      <im-input v-model="formData.username" placeholder="请输入用户名" />
    </im-form-item>
    
    <im-form-item label="密码" prop="password" :rules="[rules.required(), rules.minLength(6)]">
      <im-input v-model="formData.password" type="password" placeholder="请输入密码" />
    </im-form-item>
  </im-form>
</template>

```

### 验证规则

```typescript
import { builtInRules } from '@/components/im-form/rules'

const rules = builtInRules

// 内置规则
rules.required('必填项')
rules.email('邮箱格式错误')
rules.phone('手机号格式错误')
rules.minLength(6, '至少6个字符')
rules.maxLength(20, '最多20个字符')
rules.range(18, 100, '年龄范围18-100')
rules.pattern(/^\d+$/, '请输入数字')

// 自定义规则
const customRule = {
  validator: (value) => {
    if (value !== 'admin') {
      return '只能输入admin'
    }
    return true
  }
}

```

### 表单方法

```typescript
// 通过 ref 调用
const formRef = ref()

// 验证表单
formRef.value.validate()

// 重置表单
formRef.value.reset()

// 清除验证状态
formRef.value.clearValidate()

// 设置表单数据
formRef.value.setModel({ username: '张三', email: 'test@example.com' })

// 获取表单数据
const data = formRef.value.getModel()

// 设置字段值
formRef.value.setFieldValue('username', '李四')

// 获取字段值
const value = formRef.value.getFieldValue('username')

```

### ImForm Props

```table
参数	说明	类型	默认值
model	表单数据对象	Record<string, any>	{}
layout	表单布局	'horizontal' | 'vertical' | 'inline'	'vertical'
size	表单尺寸	'small' | 'medium' | 'large'	'medium'
labelWidth	标签宽度	string | number	-
labelAlign	标签对齐方式	'left' | 'right' | 'top'	'right'
colon	是否显示冒号	boolean	true
disabled	是否禁用	boolean	false
readonly	是否只读	boolean	false
showValidateStatus	显示验证状态	boolean	true
validateOnChange	输入时验证	boolean	true
validateOnBlur	失焦时验证	boolean	true
validateOnSubmit	提交时验证	boolean	true
scrollToFirstError	滚动到第一个错误项	boolean	true
```

### ImFormItem Props

```table
参数	说明	类型	默认值
prop	字段名	string	-
label	标签文本	string	-
rules	验证规则	FormRule | FormRule[]	-
required	是否必填	boolean	false
help	帮助文本	string	-
error	错误信息	string	-
extra	额外信息	string	-
disabled	是否禁用	boolean	false
readonly	是否只读	boolean	false
```