ui-form 表单容器组件

版本：v2.3.11

表单容器组件用于管理表单数据、验证规则和提交事件，支持多种验证方式和自定义样式

基本使用

<template>
  <div class="form-demo">
    <ui-form ref="formRef" :model="formData" :rules="rules">
      <ui-form-item prop="name" label="姓名">
        <ui-form-input v-model="formData.name" placeholder="请输入姓 />
      </ui-form-item>
      <ui-form-item prop="email" label="邮箱">
        <ui-form-input v-model="formData.email" placeholder="请输入邮 type="email" />
      </ui-form-item>
      <ui-form-item>
        <ui-button type="primary" @click="submitForm">提交</ui-button>
      </ui-form-item>
    </ui-form>
  </div>
</template>

<script setup>
import { ref } from 'vue';
const formRef = ref(null);
const formData = ref({
  name: '',
  email: ''
});
const rules = {
  name: [{ required: true, message: '请输入姓, trigger: 'blur' }],
  email: [{ required: true, message: '请输入邮, trigger: 'blur' },
          { type: 'email', message: '请输入正确的邮箱格式', trigger: 'blur' }]
};

const submitForm = () => {
  formRef.value.validate((valid) => {
    if (valid) {
      console.log('表单验证通过', formData.value);
    } else {
      console.log('表单验证失败');
    }
  });
};
</script>

<style scoped>
.form-demo {
  padding: 20px;
}
</style>

Props

参数	类型	默认值	说明
model	Object	-	表单数据对象
rules	Object	-	表单验证规则
labelPosition	String	'left'	标签位置，可选值：left、top、right
labelWidth	Number/String	80px	标签宽度
disabled	Boolean	false	是否禁用表单内所有控

Methods

方法名	说明	参数	返回值
validate	验证表单	(callback: Function) 验证完成后的回调函数	-
validateField	验证指定字段	(prop: String, callback: Function) 字段名和验证完成后的回调函数	-
resetFields	重置表单	-	-
clearValidate	清除表单验证信息	(props: Array) 需要清除验证信息的字段名数	-

Events

事件	说明	回调参数
submit	表单提交时触	-

Slots

名称	说明
default	表单内容，包含表单项

在线演示

扫码或点击链接在手机上查看完整演示

https://shadow-ui3-demo.nooko.cn/#/pages/base/form/form