t-form

Form 表单

组件介绍

表单组件，支持表单验证规则后端控制，支持form-item点击映射到input获取到焦点提升用户体验，支持表单下任意组件参与布局，支持自定义函数表单验证，支持自定义数据校验、长度校验证、数据大小判断，支持重置。

平台兼容

Harmony	H5	Android	iOS	小程序	UTS
✅	✅	✅	✅	✅	✅

基础用法

<template>
  <t-form :model="formData" :rules="formRules" ref="formRef">
    <t-form-item label="用户名" prop="username" required>
      <t-input v-model="formData.username" placeholder="请输入用户名"></t-input>
    </t-form-item>
    <t-form-item label="密码" prop="password" required>
      <t-input v-model="formData.password" type="password" placeholder="请输入密码"></t-input>
    </t-form-item>
    <t-form-item label="邮箱" prop="email">
      <t-input v-model="formData.email" placeholder="请输入邮箱"></t-input>
    </t-form-item>
    <t-form-item label="手机号" prop="phone">
      <t-input v-model="formData.phone" placeholder="请输入手机号"></t-input>
    </t-form-item>
    <t-form-item>
      <t-button type="primary" @click="handleSubmit">提交</t-button>
      <t-button @click="handleReset">重置</t-button>
    </t-form-item>
  </t-form>
</template>

<script setup>
const formRef = ref(null);
const formData = ref({
  username: '',
  password: '',
  email: '',
  phone: ''
});

const formRules = ref({
  username: [
    { required: true, message: '请输入用户名', trigger: 'blur' },
    { min: 2, max: 20, message: '用户名长度为2-20个字符', trigger: 'blur' }
  ],
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' },
    { min: 6, message: '密码长度至少6位', trigger: 'blur' }
  ],
  email: [
    { type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur' }
  ],
  phone: [
    { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号', trigger: 'blur' }
  ]
});

function handleSubmit() {
  if (formRef.value.validate()) {
    console.log('表单验证通过', formData.value);
    // 提交表单数据
  }
}

function handleReset() {
  formRef.value.reset();
}
</script>

Props

属性名	类型	默认值	说明	可选值
size	String	""	组件尺寸	large, medium, small, mini
type	String	""	组件类型	info, primary, error, warning, success
disabled	Boolean	false	组件是否禁用	true, false
hover	Boolean	false	是否有点击效果	true, false
path	String	""	点击组件后跳转的页面路径	-
effect	String	""	组件显示主题	normal, dark, light, plain
showLabel	Boolean	true	统一设置表单子组合是否显示标题	true, false
headerClass	String	""	标题盒子的样式	-
direction	String	"row"	统一设置表单子项的布局方向	row, column
rules	Object	{}	表单的验证规则	-
rulesClass	String	""	验证失败提示文字的样式	-
labelClass	String	""	标题标签的样式	-
childClass	String	""	统一设置子组件样式	-
requiredAsterisk	String	"*"	必填时的提示符	-
requiredAsteriskClass	String	"mt-10"	必填提示符的样式	-
hideRequiredAsterisk	Boolean	false	是否隐藏必填文本	true, false
showMessage	Boolean	true	是否显示验证信息	true, false
bottomLine	Boolean	false	是否显示底部线条	true, false
model	Object	{}	表单绑定的对象	-

Events

事件名	说明	回调参数
click	点击时触发	-
transitionend	动画结束时触发	-
initFinished	组件初始化完成触发	组件的节点信息
touchstart	触摸开始时触发	触摸事件对象
touchend	触摸结束时触发	触摸事件对象
touchmove	触摸移动时触发	触摸事件对象
touchcancel	触摸取消时触发	触摸事件对象
reset	重置表单时触发	-

Methods

方法名	说明	参数	返回值
validate	验证表单	无	Boolean
reset	重置表单	无	无

Slots

插槽名	说明
default	表单内容插槽，用于放置t-form-item子组件

校验规则

规则类型	说明	示例
required	必填	{ required: true, message: '请输入用户名' }
min	最小长度	{ min: 6, message: '长度至少6位' }
max	最大长度	{ max: 20, message: '长度最多20位' }
pattern	正则表达式	{ pattern: /^1[3-9]\d{9}$/, message: '手机号格式错误' }
type	数据类型	{ type: 'email', message: '邮箱格式错误' }
validator	自定义验证函数	{ validator: (rule, value) => value > 0, message: '必须大于0' }