Form

EsForm is a form container component used for data collection, validation, and submission. It supports async validation, custom rules, reset, and clearing methods.

Basic Usage

Email

Password

<script setup lang="ts">
import { reactive, ref } from 'vue'
import EsForm from '@/components/Form/Form.vue'
import EsFormItem from '@/components/Form/FormItem.vue'
import Input from '@/components/Input/Input.vue'
import Button from '@/components/Button/Button.vue'
const model = reactive({
  email: '',
  password: ''
})

const formRef = ref()
const submit = async () => {
  try {
    await formRef.value.validate()
    alert('Passed!')
  } catch (e) {
    alert('Validation failed')
  }
}
</script>

<template>
  <EsForm :model="model" ref="formRef">
    <EsFormItem prop="email" label="Email">
      <Input v-model="model.email" placeholder="Enter email" />
    </EsFormItem>
    <EsFormItem prop="password" label="Password">
      <Input v-model="model.password" placeholder="Enter password" />
    </EsFormItem>
    <EsFormItem>
      <Button @click.prevent="submit" type="primary">Submit</Button>
    </EsFormItem>
  </EsForm>
</template>

Validation

*Email

*Password

*Agreement

<script setup lang="ts">
import { reactive, ref } from 'vue'
import EsForm from '@/components/Form/Form.vue'
import EsFormItem from '@/components/Form/FormItem.vue'
import Input from '@/components/Input/Input.vue'
import Button from '@/components/Button/Button.vue'
import Switch from '@/components/Switch/Switch.vue'
const model = reactive({
  email: '',
  password: '',
  agreement: false
})

const rules = {
  email: [
    { type: 'email', required: true, message: '请输入合法邮箱', trigger: 'blur' }
  ],
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' },
    { min: 6, message: '密码至少6位', trigger: 'blur' }
  ],
  agreement: [
    { type: 'enum', enum: [true], required: true, message: '请同意协议', trigger: 'change' }
  ]
}

const formRef = ref()
const submit = async () => {
  try {
    await formRef.value.validate()
    alert('Passed!')
  } catch (e) {
    alert('Validation failed')
  }
}
</script>

<template>
  <EsForm :model="model" :rules="rules" ref="formRef">
    <EsFormItem prop="email" label="Email">
      <Input v-model="model.email" placeholder="Enter email" />
    </EsFormItem>
    <EsFormItem prop="password" label="Password">
      <Input v-model="model.password" type="password" />
    </EsFormItem>
    <EsFormItem prop="agreement" label="Agreement">
      <Switch v-model="model.agreement" />
    </EsFormItem>
    <EsFormItem>
      <Button @click.prevent="submit" type="primary">Submit</Button>
    </EsFormItem>
  </EsForm>
</template>

Reset and Clear Validation

*Email

*Password

<script setup lang="ts">
import { reactive, ref } from 'vue'
import EsForm from '@/components/Form/Form.vue'
import EsFormItem from '@/components/Form/FormItem.vue'
import Input from '@/components/Input/Input.vue'
import Button from '@/components/Button/Button.vue'
const model = reactive({
  email: '',
  password: ''
})

const rules = {
  email: [{ required: true, message: '请输入邮箱', trigger: 'blur' }],
  password: [{ required: true, message: '请输入密码', trigger: 'blur' }]
}

const formRef = ref()

const submit = () => {
  formRef.value.validate().then(() => alert('Passed!')).catch(() => alert('Failed'))
}

const reset = () => {
  formRef.value.resetFields()
}

const clear = () => {
  formRef.value.clearValidate()
}
</script>

<template>
  <EsForm :model="model" :rules="rules" ref="formRef">
    <EsFormItem prop="email" label="Email">
      <Input v-model="model.email" placeholder="Enter email" />
    </EsFormItem>
    <EsFormItem prop="password" label="Password">
      <Input v-model="model.password" type="password" />
    </EsFormItem>
    <EsFormItem>
      <Button @click.prevent="submit" type="primary">Submit</Button>
      <Button @click.prevent="reset" type="danger" plain>Reset</Button>
      <Button @click.prevent="clear" type="warning" plain>Clear Validate</Button>
    </EsFormItem>
  </EsForm>
</template>

Triggering Validation

*Name

*Zone

<script setup lang="ts">
import { reactive, ref } from 'vue'
import EsForm from '@/components/Form/Form.vue'
import EsFormItem from '@/components/Form/FormItem.vue'
import Input from '@/components/Input/Input.vue'
import Button from '@/components/Button/Button.vue'
import Select from '@/components/Select/Select.vue'
const model = reactive({
  name: '',
  zone: ''
})
const options = [
  { label: 'zone 1', value: 'one' },
  { label: 'zone 2', value: 'two' },
  { label: 'zone 3', value: 'three' }
]

const rules = {
  name: [
    { required: true, message: '请输入姓名', trigger: 'blur' }
  ],
  zone: [
    { required: true, message: '请选择区域', trigger: 'change' }
  ]
}

const formRef = ref()
const submit = () => {
  formRef.value.validate().then(() => alert('提交成功')).catch(() => alert('校验失败'))
}
</script>

<template>
  <EsForm :model="model" :rules="rules" ref="formRef">
    <EsFormItem prop="name" label="Name">
      <Input v-model="model.name" placeholder="Blur trigger" />
    </EsFormItem>
    <EsFormItem prop="zone"  label="Zone">
      <Select v-model="model.zone" :options="options" />
    </EsFormItem>
    <EsFormItem>
      <Button @click.prevent="submit" type="primary">Submit</button>
    </EsFormItem>
  </EsForm>
</template>

---

EsForm Attributes

Name	Description	Type	Default
model	Form data object (reactive)	Record<string, any>	—
rules	Validation rule object	FormRules	—

---

EsForm Methods

Use ref to access the EsForm instance and call the following methods:

Method	Description
validate()	Validate all fields, returns Promise
resetFields()	Reset all field values
clearValidate()	Clear validation state of all fields

---

EsFormItem Attributes

Name	Description	Type	Default
label	Label text	string	—
prop	Field name in the model	string	—

---

Validation Rules (FormRules)

export interface FormRules {
  [prop: string]: Array<FormRule>
}

export interface FormRule {
  required?: boolean
  type?: string // e.g. "string", "email", "enum"
  min?: number
  max?: number
  enum?: any[]
  message?: string
  trigger?: 'blur' | 'change'
  validator?: (value: any) => boolean | string
}