Element-plus

Appearance

Form 表单组件 ​

表单组件，包含表单验证、字段管理等功能。

基础用法 ​

基础的表单用法，包含表单验证功能。

Activity name
Activity zone
Instant delivery
Activity form
<template>
  <my-form
    :model="form"
    :rules="rules"
    label-width="auto"
    style="max-width: 600px"
  >
    <my-form-item label="Activity name">
      <my-input v-model="form.name" />
    </my-form-item>
    <my-form-item label="Activity zone">
      <my-select
        v-model="form.region"
        placeholder="please select your zone"
      >
        <my-option
          label="Zone one"
          value="shanghai"
        />
        <my-option
          label="Zone two"
          value="beijing"
        />
      </my-select>
    </my-form-item>
    <my-form-item label="Instant delivery">
      <my-switch v-model="form.delivery" />
    </my-form-item>
    <my-form-item label="Activity form">
      <my-input
        v-model="form.desc"
        type="textarea"
      />
    </my-form-item>
    <my-form-item>
      <my-button
        type="primary"
        @click="onSubmit"
        >Create</my-button
      >
      <my-button>Cancel</my-button>
    </my-form-item>
  </my-form>
</template>

<script setup>
  import { reactive } from 'vue'
  const form = reactive({
    name: '',
    region: '',
    delivery: false,
    desc: '',
  })

  const rules = {}

  const onSubmit = () => {
    console.log('submit!', form)
  }
</script>

表单验证 ​

Form 组件允许你验证用户的输入是否符合规范，来帮助你找到和纠正错误。

Form 组件提供了表单验证的功能，只需为 rules 属性传入约定的验证规则，并将 form-Item 的 prop 属性设置为需要验证的特殊键值即可。 校验规则参见 async-validator

Activity name
Activity zone
Instant delivery
Activity form
<template>
  <my-form
    ref="formRef"
    :model="form"
    :rules="rules"
  >
    <my-form-item
      label="Activity name"
      prop="name"
      required
    >
      <my-input v-model="form.name" />
    </my-form-item>
    <my-form-item
      label="Activity zone"
      prop="region"
      required
    >
      <my-select
        v-model="form.region"
        placeholder="please select your zone"
      >
        <my-option
          label="Zone one"
          value="shanghai"
        />
        <my-option
          label="Zone two"
          value="beijing"
        />
      </my-select>
    </my-form-item>
    <my-form-item
      label="Instant delivery"
      prop="delivery"
    >
      <my-switch v-model="form.delivery" />
    </my-form-item>
    <my-form-item
      label="Activity form"
      prop="desc"
      required
    >
      <my-input
        v-model="form.desc"
        type="textarea"
      />
    </my-form-item>
    <my-form-item>
      <my-button
        type="primary"
        @click="onSubmit"
        required
        >Create
      </my-button>
      <my-button @click="reset">Cancel</my-button>
    </my-form-item>
  </my-form>
</template>

<script setup>
  import { reactive, ref } from 'vue'
  const formRef = ref()
  const form = reactive({
    name: '',
    region: '',
    delivery: false,
    desc: '',
  })

  const rules = {
    name: [
      { required: true, message: '请输入活动名称', trigger: 'blur' },
      { min: 3, max: 20, message: '长度在 3 到 20 个字符', trigger: 'blur' },
    ],
    region: [{ required: true, message: '请选择活动区域', trigger: 'change' }],
    desc: [{ required: true, message: '请填写活动形式', trigger: 'blur' }],
  }

  const onSubmit = async () => {
    formRef.value.validate()
  }

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

自定义校验规则​ ​

这个例子中展示了如何使用自定义验证规则来完成密码的二次验证。

Password
Confirm
Age
<template>
  <my-form
    ref="formRef"
    style="max-width: 600px"
    :model="ruleForm"
    status-icon
    :rules="rules"
    label-width="auto"
    class="demo-ruleForm"
  >
    <my-form-item
      label="Password"
      prop="pass"
    >
      <my-input
        v-model="ruleForm.pass"
        autocomplete="off"
      />
    </my-form-item>
    <my-form-item
      label="Confirm"
      prop="checkPass"
    >
      <my-input
        v-model="ruleForm.checkPass"
        autocomplete="off"
      />
    </my-form-item>
    <my-form-item
      label="Age"
      prop="age"
    >
      <my-input v-model.number="ruleForm.age" />
    </my-form-item>
    <my-form-item>
      <my-button
        type="primary"
        @click="submitForm"
      >
        Submit
      </my-button>
      <my-button @click="resetForm">Reset</my-button>
    </my-form-item>
  </my-form>
</template>

<script setup>
  import { reactive, ref } from 'vue'
  const formRef = ref()
  const ruleForm = reactive({
    pass: '',
    checkPass: '',
    age: '',
  })

  const rules = reactive({
    pass: [
      {
        validator: (rule, value, callback) => {
          if (value.length < 6) {
            callback(new Error('请输入6位以上密码'))
          } else {
            callback()
          }
        },
        trigger: 'blur',
      },
    ],
    checkPass: [
      {
        validator: (rule, value, callback) => {
          if (value !== ruleForm.pass) {
            callback(new Error('两次输入密码不一致'))
          } else {
            callback()
          }
        },
        trigger: 'blur',
      },
    ],
    age: [
      {
        validator: (rule, value, callback) => {
          if (value < 18) {
            callback(new Error('年龄必须大于18岁'))
          } else {
            callback()
          }
        },
        trigger: 'blur',
      },
    ],
  })

  const submitForm = () => {
    formRef.value.validate().then(() => {
      console.log('校验通过')
    })
  }

  const resetForm = () => {
    formRef.value.resetFields()
  }
</script>

Form API ​

Form Attributes ​

属性名说明类型默认值
model表单数据对象Record<string, any>-
rules表单验证规则，更多内容可以参考 async-validatorRecord<string, RuleFormItem[]>-
disabled是否禁用表单所有组件booleanfalse

Form Slots ​

插槽名说明类型
default表单内容区域-

Form Exposes ​

方法名说明参数返回值
validate对整个表单进行校验-Promise<any>
resetFields重置所有字段并移除校验结果-void
clearValidate移除表单项的校验结果-void

FormItem API ​

FormItem Attributes ​

属性名说明类型默认值
label标签文本string-
prop表单域 model 字段string-
required是否必填booleanfalse
disabled是否禁用该表单项booleanfalse

FormItem Slots ​

插槽名说明类型
default表单的内容-
label标签位置显示的内容{ label: string }

FormItem Exposes ​

方法名说明参数返回值
validate触发表单项校验trigger?: stringPromise<any>
resetField重置当前字段-void
clearValidate移除校验结果-void