# tui-form 表单验证

介绍

tui-form组件主要用于表单校验,提供了常用的表单校验方法,支持自定义扩展校验方法,提供了错误信息展示等。

# 引入

# uni-app引入

第一种,手动引入(可全局引入)

import tuiForm from "@/components/thorui/tui-form/tui-form"
export default {
	components:{
		tuiForm
	}
}

第二种,开启easycom组件模式,如果不了解如何配置,可先查看 官网文档 (opens new window)

# uni-app版本平台差异说明

App-Nvue App-vue H5 微信小程序 支付宝小程序 百度小程序 字节小程序 QQ小程序

# 微信小程序引入(可在app.json中全局引入)

{
  "usingComponents": {
    "tui-form": "/components/thorui/tui-form/tui-form"
  }
}

# 代码演示

部分功能演示,具体可参考示例程序以及文档API。

基本使用

通过 model 属性设置表单数据对象, rules 属性设置表单验证规则。

<!--部分平台不支持在props中嵌套传入Function函数,model和rules参数不再建议由props传入,推荐在校验方法中传入。-->

<!--uni-app-->
<tui-form ref="form" :model="formData" :rules="rules"></tui-form>
<!--推荐写法-->
<tui-form ref="form"></tui-form>

<!--微信小程序-->
<tui-form id="form" model="{{formData}}" rules="{{rules}}"></tui-form>
<!--推荐写法-->
<tui-form id="form"></tui-form>

# Slots

名称 说明
default 标签显示内容,表单元素

# Props

参数 类型 说明 默认值
model Object 表单数据对象 { }
rules Array 表单验证规则,如果含有自定义规则,请在校验方法中传入该参数 [ ]
backgroundColor String 表单背景颜色 transparent
padding String 表单padding值 0
showMessage Boolean 是否显示校验错误信息 true
radius String 表单圆角值 0
disabled Boolean 是否禁用该表单内的所有组件,透明遮罩层 false
tipTop Number 提示框top值,单位px H5:44,非H5:0
tipPadding String 错误提示框padding值 20rpx
tipBackgroundColor String 错误提示框背景色 #f74d54
tipSize Number 错误提示字体大小,单位rpx 28
tipColor String 错误提示字体颜色 #fff
tipRidus String 错误提示框圆角值 12rpx
duration Number 错误消息显示时间,单位ms 2000

# Methods

部分平台不支持在props中嵌套传入Function函数,model和rules参数由props传入改为校验方法validate中传入。

方法名 说明 传入参数 回调参数
validate 父级调用组件该方法进行表单验证 { model:表单数据对象,rules:表单验证规则 } { isPass:是否校验通过,errorMsg:错误消息 }
方法调用
//uni-app
this.$refs.form.validate(this.formData,this.rules).then(res => {
	console.log(this.formData)
	this.tui.toast('校验通过!')
}).catch(errors => {
	console.log(errors)
})

//微信小程序
this.selectComponent("#form").validate(this.data.formData,this.data.rules).then(res => {
  // console.log(this.data.formData)
  tui.toast('校验通过!')
}).catch(errors => {
  console.log(errors)
})

# 预览

请以移动端效果为准,touch事件目前尚未在PC端做兼容。

# 线上程序扫码预览

ThorUI组件库 H5二维码 ThorUI示例
ThorUI组件库小程序码 H5二维码 ThorUI示例小程序码