# tui-form 表单验证

介绍

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

# 引入

# uni-app引入

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

import tuiForm from "@/components/thorui/tui-form/tui-form.vue"
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 属性设置表单验证规则。

<!--uni-app-->
<tui-form ref="form">
  <tui-input label="姓名" borderTop placeholder="请输入姓名" v-model="name"></tui-input>
  <tui-input label="手机号" :lineLeft="false" placeholder="请输入手机号" v-model="mobile"></tui-input>
</tui-form>

<!--微信小程序-->
<tui-form id="form">
  <tui-input label="姓名" borderTop placeholder="请输入姓名" model:value="{{name}}"></tui-input>
  <tui-input label="手机号" lineLeft="{{false}}" placeholder="请输入手机号" model:value="{{mobile}}"></tui-input>
</tui-form>
//data数据
{
	name: '',
	mobile: ''
}

// 校验规则
const rules = [{
	name: "name",
	rule: ["required", "isChinese", "minLength:2", "maxLength:6"],
	msg: ["请输入姓名", "姓名必须全部为中文", "姓名必须2个或以上字符", "姓名不能超过6个字符"]
}, {
	name: "mobile",
	rule: ["required", "isMobile"],
	msg: ["请输入手机号", "请输入正确的手机号"]
}]
	
//提交验证  uni-app写法
submit() {
	let formData={
		name:this.name,
		mobile:this.mobile
	}
	this.$refs.form.validate(formData,rules).then(res => {
		this.tui.toast('校验通过!')
	}).catch(errors => {
		console.log(errors)
	})
}

//提交验证  微信小程序写法
submit() {
	let formData={
		name:this.data.name,
		mobile:this.data.mobile
	}
	this.selectComponent("#form").validate(formData,rules).then(res => {
	  tui.toast('校验通过!')
	}).catch(errors => {
	  console.log(errors)
	})
}

# Slots

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

# Props

参数 类型 说明 默认值
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

rules 所有内置校验规则 查看:表单验证规则

方法名 说明 传入参数 回调参数
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示例小程序码