Form

这是一个Form 表单

基础用法

这是一个表单

{ "msg": "", "name": "", "email": "", "sex": "" }

*msg:

4-6位

*name:

email:

sex:

<script setup lang="ts">
import { reactive, ref } from 'vue';
import type { FormInstance } from '@/index';

const formRef = ref<FormInstance>();
const form = reactive({
  msg: '',
  name: '',
  email: '',
  sex: '',
});

const rules = {
  msg: { type: 'string', required: true, min: 4, max: 6 },
  email: { type: 'email' },
};

function validate() {
  formRef.value?.validate();
}

function clearValidate() {
  formRef.value?.clearValidate();
}

const handlerValidate = (...args: any[]) => console.log(args);
</script>

<template>
  {{ form }}
  <v-form ref="formRef" label-suffix=":" :model="form" :rules="rules" @validate="handlerValidate">
    <v-form-item name="msg" label="msg" help="4-6位">
      <v-input v-model="form.msg" />
    </v-form-item>
    <v-form-item name="name" label="name" required>
      <v-input v-model="form.name" />
    </v-form-item>
    <v-form-item name="email" label="email">
      <v-input v-model="form.email" />
    </v-form-item>
    <v-form-item label="sex">
      <v-input v-model="form.sex" />
    </v-form-item>

    <v-button type="button" @click="validate">
      validate
    </v-button>
    <v-button type="button" @click="clearValidate">
      clearValidate
    </v-button>
  </v-form>
</template>

Form API

Form 属性

属性名	说明	类型	默认值
labelSuffix	表单标签的后缀	string	-
model	表单数据对象	object	-
rules	表单验证规则, 参考async-validator	object	-

Form 插槽

插槽名	描述
default	默认插槽

Form Item API

Form Item 属性

属性名	说明	类型	默认值
label	标签文本	string	-
for	label 原生属性	string	-
name	表单字段名称	string	-
help	说明内容	string	-
status	校验状态	string	-
rules	表单验证规则	object	-
validator	校验函数	function	-
error	错误信息	string	-
required	是否为必填项	boolean	false
labelWidth	标签宽度	string	-
showErrorMessage	是否为凸起按钮	boolean	true

Form Item 插槽

插槽名	描述
default	默认插槽