ThorUI文档

# 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: ''
 			}
 		}
 	},
 	methods: {
 		//注意：v2.9.2+后此方法做了调整，返回数据也做了相应调整
 		submit() {
 			if(!this.$refs.form) return;
 			this.$refs.form.validate(this.formData, rules).then(res => {
 				if (res.isPass) {
 					console.log(this.formData)
 					console.log('校验通过！')
 					//this.tui.toast 等api 参考 【快手上手】文档使用
 					// this.tui.toast('校验通过！')
 				} else {
 					console.log(res)
 				}
 			}).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

    属性名 类型 说明 默认值
    model V2.9.2+ Object 表单数据对象，结合tui-form-item（表单项）组件校验时必传【仅uni-app版本】 {}
    backgroundColor String 表单背景颜色 transparent
    padding String 表单padding值 0
    showMessage Boolean 是否顶部弹出方式显示校验错误信息【为false时则可关联tui-form-item（表单项）组件显示校验错误信息】 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

    TIP

    结合 tui-form-item 组件显示校验错误信息时，需注意：

    • 属性 showMessage 必须设置为 false

    • uni-app版本 组件必须设置 model 属性值

    • 方法 validate 第三个参数必须传 true

    • 微信小程序原生版本页面初始化完后 必须先调用 setWatcherInstance 方法 设置页面实例。

    # Events

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

    # Methods

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

    方法名 说明 传入参数 回调参数
    validate 父级页面调用组件该方法进行表单验证
       model：表单数据对象,
      rules：表单验证规则,
      checkAll：是否返回所有错误信息
    		 { isPass:是否校验通过,errorMsg:错误消息 }
    validateField V2.9.2+ 验证具体的一个或多个字段
       props：字段,
      rules：表单验证规则,
      model：表单数据对象
    		 { isPass:是否校验通过,errorMsg:错误消息 }
    setWatcherInstance V2.9.2+ 设置页面实例，开启表单数据监听【仅微信小程序版本使用】
      instance：页面实例
    		-
    immediateValidate V2.9.2+ 结合tui-form-item组件进行校验时 是否开启即时校验
       isOpen：是否开启,
      rules：表单验证规则
    		-
    clearValidate V2.9.2+ 清除指定字段的表单验证信息，不传参数则清除所有字段验证信息
       props：prop或prop数组
    		-
    //方法说明，其中 setWatcherInstance 方法仅微信小程序原生版本使用

//父级页面调用组件该方法进行表单验证	
//{Object} model 表单数据对象
//{Array} rules 表单验证规则
//{Boolean} checkAll 是否返回所有错误信息【结合tui-form-item 组件校验时必须传true】
validate(model, rules, checkAll = false)


/**
 * 验证具体的某个字段（V2.9.2+）
 * @param {Array<string> ｜ String} props 字段key，可传格式如：['name','age'] 或者 'name'
 * @param {Array} rules 表单验证规则，当传null 或空数组时使用FormItem组件内rules
 * @param {Object} model 表单数据对象，不传则使用属性中model值
 */
validateField(props, rules, model) 
				

//设置页面实例，开启表单数据监听【仅微信小程序原生版本使用（结合tui-form-item 组件校验时必须调用）】
//instance ：页面实例 this【必传参数】
setWatcherInstance(instance)


//结合 tui-form-item 组件进行校验时 是否开启即时校验
//{Boolean} isOpen 是否开启即时校验【必传参数】
//{Array} rules 表单验证规则【必传参数】
immediateValidate(isOpen, rules = [])


//清除指定字段的表单验证信息，不传props参数则清除所有字段验证信息
// {Array<string> ｜ String} props 字段信息，如：'name' 或 ['name','age']
clearValidate(props = [])
    方法调用
    //uni-app，需等组件初始化完成后调用方法
this.$refs.form.validate(this.formData,this.rules,false).then(res => {
	if (res.isPass) {
		console.log(this.formData)
		console.log('校验通过！')
		//this.tui.toast 等api 参考 【快手上手】文档使用
		// this.tui.toast('校验通过！')
	} else {
		console.log(res)
	}
}).catch(errors => {
	console.log(errors)
})

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

    # 预览

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

    # 特别说明

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

    # 线上程序扫码预览

    ThorUI组件库 H5二维码 ThorUI示例
    ThorUI组件库小程序码 H5二维码 ThorUI示例小程序码
    Last Updated: 11/3/2023, 11:51:55 PM

    ← tui-form-item 表单项 →