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。

基本使用

uni-app 通过 ref 来注册组件引用信息，引用信息将会注册在父组件的 $refs 对象上。注册完成后，我们可以通过 this.$refs.xxx 访问到对应的组件实例，并调用上面的实例方法。

微信小程序原生 可在父组件里调用 this.selectComponent ，获取子组件的实例对象，调用时需要传入一个匹配选择器 selector。

<template>
 <view class="container">
 	<view class="tui-page__bd">
 		<tui-form ref="form">
 			<tui-input label="手机号" :lineLeft="false" placeholder="请输入手机号" v-model="formData.mobile"></tui-input>
 			<tui-input label="邮箱" :lineLeft="false" placeholder="请输入邮箱" v-model="formData.email"></tui-input>
 			<tui-input label="身份证" :lineLeft="false" placeholder="请输入身份证号码" v-model="formData.idCard"></tui-input>
 			<tui-input label="密码" password :lineLeft="false" placeholder="请输入密码" v-model="formData.password">
 			</tui-input>
 			<tui-input label="确认密码" password :lineLeft="false" placeholder="请输入确认密码" v-model="formData.confirmPwd">
 			</tui-input>
 			<view class="tui-btn__box">
 				<tui-button width="400rpx" height="84rpx" bold @click="submit">提交</tui-button>
 			</view>
 		</tui-form>
 	</view>
 </view>
</template>

<script>
 //表单校验规则
 const rules = [{
 	name: "mobile",
 	rule: ["required", "isMobile"],
 	msg: ["请输入手机号", "请输入正确的手机号"]
 }, {
 	name: "email",
 	rule: ["required", "isEmail"],
 	msg: ["请输入邮箱", "请输入正确的邮箱"]
 }, {
 	name: "idCard",
 	rule: ["required", "isIdCard"],
 	msg: ["请输入身份证号码", "请输入正确的身份证号码"]
 }, {
 	name: "password",
 	rule: ["required", "isEnAndNo"],
 	msg: ["请输入密码", "密码为8~20位数字和字母组合"]
 }, {
 	name: "confirmPwd",
 	rule: ["required", "isSame:password"],
 	msg: ["请输入确认密码", "两次输入的密码不一致"]
 }];
 export default {
 	data() {
 		return {
 			//表单数据
 			formData: {
 				mobile: '',
 				email: '',
 				idCard: '',
 				password: '',
 				confirmPwd: ''
 			},
 			rules: rules
 		}
 	},
 	methods: {
 		submit() {
 			if(!this.$refs.form) return;
 			this.$refs.form.validate(this.formData,this.rules).then(res => {
 				console.log(this.formData)
 				console.log('校验通过！')
 				//this.tui.toast 等api 参考 【快手上手】文档使用
 				// this.tui.toast('校验通过！')
 			}).catch(errors => {
 				console.log(errors)
 			})
 		}
 	}
 }
</script>

<style>
 .tui-title {
 	width: 100%;
 	font-size: 28rpx;
 	color: #888;
 	padding: 30rpx;
 	box-sizing: border-box;
 }
 
 .tui-btn__box {
 	width: 100%;
 	padding: 60rpx 30rpx;
 	box-sizing: border-box;
 }
</style>

<!--微信小程序-->
<view class="container">
<view class="tui-page__bd">
  <tui-form id="form">
    <tui-input label="手机号" lineLeft="{{false}}" placeholder="请输入手机号" model:value="{{mobile}}"></tui-input>
    <tui-input label="邮箱" lineLeft="{{false}}" placeholder="请输入邮箱" model:value="{{email}}"></tui-input>
    <tui-input label="身份证" lineLeft="{{false}}" placeholder="请输入身份证号码" model:value="{{idCard}}"></tui-input>
    <tui-input label="密码" password lineLeft="{{false}}" placeholder="请输入密码" model:value="{{password}}">
    </tui-input>
    <tui-input label="确认密码" password lineLeft="{{false}}" placeholder="请输入确认密码" model:value="{{confirmPwd}}">
    </tui-input>
    <view class="tui-btn__box">
      <tui-button width="400rpx" height="84rpx" bold bindclick="submit">提交</tui-button>
    </view>
  </tui-form>
</view>
</view>

// data 数据 及 方法
// //表单校验规则配置
const rules = [{
  name: "mobile",
  rule: ["required", "isMobile"],
  msg: ["请输入手机号", "请输入正确的手机号"]
}, {
  name: "email",
  rule: ["required", "isEmail"],
  msg: ["请输入邮箱", "请输入正确的邮箱"]
}, {
  name: "idCard",
  rule: ["required", "isIdCard"],
  msg: ["请输入身份证号码", "请输入正确的身份证号码"]
}, {
  name: "password",
  rule: ["required", "isEnAndNo"],
  msg: ["请输入密码", "密码为8~20位数字和字母组合"]
}, {
  name: "confirmPwd",
  rule: ["required", "isSame:password"],
  msg: ["请输入确认密码", "两次输入的密码不一致"]
}];
let form;
Page({
  data: {
    //表单数据 （小程序双向绑定不支持formData.name格式）
    name: '',
    mobile: '',
    email: '',
    idCard: '',
    password: '',
    confirmPwd: '',
    formData: {},
    //校验规则
    rules: rules
  },
  onReady: function () {
    form = this.selectComponent("#form")
  },
  submit() {
    if (!form) return;
    let {
      formData,
      rules,
      ...rest
    } = this.data;
    //表单数据
    console.log(rest)
    this.setData({
      formData: rest
    })
    form.validate(rest,this.data.rules).then(res => {
      console.log('校验通过！')
    }).catch(errors => {
      console.log(errors)
    })
  }
})

.tui-title {
	width: 100%;
	font-size: 28rpx;
	color: #888;
	padding: 30rpx;
	box-sizing: border-box;
}

.tui-btn__box {
	width: 100%;
	padding: 60rpx 30rpx;
	box-sizing: border-box;
}

// Make sure to add code blocks to your code group

TIP

所有校验规则定义请查看 表单验证规则 方法说明。

Slots

插槽名称	说明
default	标签显示内容，表单元素

Props

属性名	类型	说明	默认值
backgroundColor	String	表单背景颜色	transparent
padding	String	表单padding值	0
showMessage	Boolean	是否显示校验错误信息	true
radius	String	表单圆角值	0
disabled	Boolean	是否禁用该表单内的所有组件，透明遮罩层	false
tipTop	Number,String	提示框top值，单位px	H5：44，非H5：0
tipPadding	String	错误提示框padding值	20rpx
tipBackgroundColor	String	错误提示框背景色	#f74d54
tipSize	Number,String	错误提示字体大小，单位rpx	28
tipColor	String	错误提示字体颜色	#fff
tipRidus	String	错误提示框圆角值	12rpx
duration	Number,String	错误消息显示时间，单位ms	2000

Events

事件名	说明	回调参数
-	-	-

Methods

rules 所有内置校验规则 查看：表单验证规则，如何调用方法详见 进阶用法 介绍

方法名	说明	传入参数	回调参数
validate	父级调用组件该方法进行表单验证	{ model:表单数据对象,rules:表单验证规则 }	{ isPass:是否校验通过,errorMsg:错误消息 }

方法调用

//uni-app，需等组件初始化完成后调用方法
this.$refs.form.validate(this.formData,this.rules).then(res => {
	console.log(this.formData)
	 console.log('校验通过！')
}).catch(errors => {
	console.log(errors)
})

//微信小程序，需等组件初始化完成后调用方法
this.selectComponent("#form").validate(this.data.formData,this.data.rules).then(res => {
  // console.log(this.data.formData)
  console.log('校验通过！')
}).catch(errors => {
  console.log(errors)
})

预览

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

特别说明

该组件为 会员组件，非开源内容，需开通会员才可获取使用。

线上程序扫码预览

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