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示例小程序码