tui-form-item 表单项 V2.0.0+ 会员组件

介绍

表单项，展示表单页面的信息结构样式，可结合Form组件做校验提示。

引入

uni-app引入

第一种，手动引入（可全局引入）

import tuiFormItem from "@/components/thorui/tui-form-item/tui-form-item.vue"
export default {
	components:{
		tuiFormItem
	}
}

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

uni-app版本平台差异说明

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

微信小程序引入（可在app.json中全局引入）

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

代码演示

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

基础使用

通过 label 属性设置标题内容。

<!--uni-app-->
<tui-form-item label="标题文本">
	<tui-input padding="0" :borderBottom="false" placeholder="文本输入框"></tui-input>
</tui-form-item>
<tui-form-item label="标题文本">
	<tui-switch scaleRatio=".8"></tui-switch>
</tui-form-item>

<!--微信小程序-->
<tui-form-item label="标题文本">
	<tui-input padding="0" borderBottom="{{false}}" placeholder="文本输入框"></tui-input>
</tui-form-item>
<tui-form-item label="标题文本">
	<tui-switch scaleRatio=".8"></tui-switch>
</tui-form-item>

内容居右

通过 label 属性设置标题内容，使用插槽设置右侧展示内容。

<!--uni-app-->
<tui-form-item label="内容居右">
	<template v-slot:right>
		<tui-switch scaleRatio=".8"></tui-switch>
	</template>
</tui-form-item>

<!--微信小程序-->
<tui-form-item label="内容居右">
   <tui-switch slot="right" scaleRatio=".8"></tui-switch>
</tui-form-item>

选择/带星号

通过 label 属性设置标题内容，asterisk 属性设置是否带星号，arrow 属性设置是否为选择模式（带箭头），highlight 属性设置点击效果 。

<!--uni-app-->
<tui-form-item label="选择标题" asterisk arrow highlight>
	<tui-input padding="0" :borderBottom="false" placeholder="请选择" disabled backgroundColor="transparent"></tui-input>
</tui-form-item>

<!--微信小程序-->
<tui-form-item label="选择标题" asterisk arrow highlight>
	<tui-input padding="0" borderBottom="{{false}}" placeholder="请选择" disabled backgroundColor="transparent"></tui-input>
</tui-form-item>

结合 tui-form 组件做表单校验

V2.9.2+

<template>
 <view class="container">
 	<tui-form ref="form" :show-message="false" :model="formData">
 		<tui-form-item asterisk label="评分" prop="score">
 			<tui-grade :width="24" :score="formData.score" @change="change"></tui-grade>
 		</tui-form-item>
 		<tui-form-item label="姓名" asterisk prop="name">
 			<tui-input padding="0" :borderBottom="false" placeholder="请输入姓名"
 				v-model="formData.name"></tui-input>
 		</tui-form-item>
 		<tui-form-item asterisk label="地区" arrow highlight prop="area" @click="pickerShow">
 			<tui-input padding="0" :borderBottom="false" placeholder="请选择" disabled
 				backgroundColor="transparent" v-model="formData.area"></tui-input>
 		</tui-form-item>
 		<tui-form-item asterisk label="验证码" prop="code">
 			<tui-input padding="0" :borderBottom="false" placeholder="请输入验证码"
 				v-model="formData.code"></tui-input>
 			<template v-slot:right>
 				<tui-form-button width="188rpx" height="64rpx" background="#f2f2f2" color="#5677fc" size="24"
 					bold radius="12rpx">获取验证码</tui-form-button>
 			</template>
 		</tui-form-item>
 		<view class="tui-title">错误提示内容右对齐</view>
 		<tui-form-item label="身高" asterisk prop="height" :position="3">
 			<tui-input padding="0" :borderBottom="false" placeholder="请输入" textRight
 				v-model="formData.height"></tui-input>
 			<template v-slot:right>
 				<text style="padding-left: 12rpx;">cm</text>
 			</template>
 		</tui-form-item>
 		<tui-form-item label="备注内容" asterisk prop="remark" :position="3">
 			<tui-input padding="0" :borderBottom="false" placeholder="请输入..." textRight
 				v-model="formData.remark"></tui-input>
 		</tui-form-item>
 		<view class="tui-title">错误提示内容与标题对齐</view>
 		<tui-form-item :bottom-border="false" asterisk label="详细内容" prop="content" :position="1">
 			<template v-slot:row>
 				<tui-textarea padding="0 30rpx 30rpx" :border-top="false" placeholder="请输入内容" is-counter
 					v-model="formData.content"></tui-textarea>
 			</template>
 		</tui-form-item>
 		<view class="tui-btn__box">
 			<tui-button width="400rpx" height="84rpx" bold @click="submit">提交</tui-button>
 		</view>
 	</tui-form>
 	<tui-picker :show="show" :pickerData="areaData" @hide="pickerHide" @change="pickerChange">
 	</tui-picker>
 </view>
</template>

<script>
 const rules = [{
 	name: "score",
 	rule: ["range:[0.5,5]"],
 	msg: ["请选择评分"]
 }, {
 	name: "name",
 	rule: ["required", "isChinese", "minLength:2", "maxLength:6"],
 	msg: ["请输入姓名", "姓名必须全部为中文", "姓名必须2个或以上字符", "姓名不能超过6个字符"]
 }, {
 	name: "area",
 	rule: ["required"],
 	msg: ["请选择地区"]
 }, {
 	name: "code",
 	rule: ["required", "minLength:4"],
 	msg: ["请输入验证码", "验证码不少于4位"]
 }, {
 	name: "height",
 	rule: ["required", "isNum"],
 	msg: ["请输入身高", "身高只能填数字"]
 }, {
 	name: "remark",
 	rule: ["required"],
 	msg: ["请输入备注"]
 }, {
 	name: "content",
 	rule: ["required"],
 	msg: ["请输入详细内容"]
 }];
 export default {
 	data() {
 		return {
 			areaData: [{
 				text: "中国",
 				value: "1001"
 			}, {
 				text: "美国",
 				value: "1002"
 			}, {
 				text: "俄罗斯",
 				value: "1003"
 			}],
 			show: false,
 			//仅对部分数据进行收集演示
 			formData: {
 				//评分
 				score: 0,
 				//姓名
 				name: '',
 				//地区
 				area: '',
 				//验证码
 				code: '',
 				//身高
 				height: '',
 				//备注
 				remark: '',
 				//详细内容
 				content: ''
 			}
 		}
 	},
 	onReady() {
 		//开启即时校验，开启后输入即校验【参数必传】，第一参数：是否开启；第二参数：校验规则
 		// this.$refs.form && this.$refs.form.immediateValidate(true, rules)
 	},
 	methods: {
 		change(e) {
 			console.log(e)
 			this.formData.score = e.score
 		},
 		pickerShow() {
 			this.show = true
 		},
 		pickerHide() {
 			this.show = false
 		},
 		pickerChange(e) {
 			console.log(e)
 			this.formData.area = e.text
 		},
 		submit() {
 			//注：结合FormItem校验，validate方法第三个参数必须传true
 			this.$refs.form.validate(this.formData, rules, true).then(res => {
 				if (res.isPass) {
 					console.log(this.formData)
 					console.log('校验通过！')
 				} 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 0;
 	display: flex;
 	justify-content: center;
 }
</style>

<!--微信小程序 注意：示例中使用的组件请自行引入-->
<view class="container">
 <tui-form id="form" show-message="{{false}}">
   <tui-form-item asterisk label="评分" prop="score">
     <tui-grade width="{{24}}" score="{{score}}" bindchange="change"></tui-grade>
   </tui-form-item>
   <tui-form-item label="姓名" asterisk prop="name">
     <tui-input padding="0" borderBottom="{{false}}" placeholder="请输入姓名" model:value="{{name}}"></tui-input>
   </tui-form-item>
   <tui-form-item asterisk label="地区" arrow highlight prop="area" bindclick="pickerShow">
     <tui-input padding="0" borderBottom="{{false}}" placeholder="请选择" disabled backgroundColor="transparent" model:value="{{area}}"></tui-input>
   </tui-form-item>
   <tui-form-item label="验证码" asterisk prop="code">
     <tui-input padding="0" borderBottom="{{false}}" placeholder="请输入" model:value="{{code}}"></tui-input>
     <tui-form-button slot="right" width="188rpx" height="64rpx" background="#f2f2f2" color="#5677fc" size="24" bold radius="12rpx">获取验证码</tui-form-button>
   </tui-form-item>
   <view class="tui-title">错误提示内容右对齐</view>
   <tui-form-item label="身高" asterisk prop="height" position="{{3}}">
     <tui-input padding="0" borderBottom="{{false}}" placeholder="请输入身高" textRight model:value="{{height}}"></tui-input>
     <text slot="right" style="padding-left: 12rpx;">cm</text>
   </tui-form-item>
   <tui-form-item label="备注内容" asterisk prop="remark" position="{{3}}">
     <tui-input padding="0" borderBottom="{{false}}" placeholder="请输入..." textRight model:value="{{remark}}"></tui-input>
   </tui-form-item>
   <view class="tui-title">错误提示内容与标题对齐</view>
   <tui-form-item bottom-border="{{false}}" asterisk label="详细内容" prop="content" position="{{1}}">
     <tui-textarea slot="row" padding="0 30rpx 30rpx" border-top="{{false}}" placeholder="请输入内容" is-counter model:value="{{content}}"></tui-textarea>
   </tui-form-item>
   <view class="tui-btn__box">
     <tui-form-button width="400rpx" height="84rpx" radius="16rpx" bindclick="submit">提交</tui-form-button>
   </view>
 </tui-form>
<tui-picker show="{{show}}" pickerData="{{areaData}}" bindhide="pickerHide" bindchange="pickerChange">
</tui-picker>
</view>

let form;
const rules = [{
  name: "score",
  rule: ["range:[0.5,5]"],
  msg: ["请选择评分"]
}, {
  name: "name",
  rule: ["required", "isChinese", "minLength:2", "maxLength:6"],
  msg: ["请输入姓名", "姓名必须全部为中文", "姓名必须2个或以上字符", "姓名不能超过6个字符"]
}, {
  name: "area",
  rule: ["required"],
  msg: ["请选择地区"]
}, {
  name: "code",
  rule: ["required", "minLength:4"],
  msg: ["请输入验证码", "验证码不少于4位"]
}, {
  name: "height",
  rule: ["required", "isNum"],
  msg: ["请输入身高", "身高只能填数字"]
}, {
  name: "remark",
  rule: ["required"],
  msg: ["请输入备注"]
}, {
  name: "content",
  rule: ["required"],
  msg: ["请输入详细内容"]
}];
Page({
  data: {
    areaData: [{
      text: "中国",
      value: "1001"
    }, {
      text: "美国",
      value: "1002"
    }, {
      text: "俄罗斯",
      value: "1003"
    }],
    show: false,
    //====== 以下是收集的表单数据，仅对必填数据进行收集演示
    //评分
    score: 0,
    //姓名
    name: '',
    //地区
    area: '',
    //验证码
    code: '',
    //身高
    height: '',
    //备注
    remark: '',
    //详细内容
    content: ''
  },
  onReady() {
    form = this.selectComponent('#form')
    //设置页面实例，开启表单数据监听【必须执行】
    form && form.setWatcherInstance(this)
    //开启即时校验，开启后输入即校验【方法参数必传】，第一参数：是否开启；第二参数：校验规则
    // form && form.immediateValidate(true, rules)
  },
  change(e) {
    this.setData({
      score: e.detail.score
    })
  },
  pickerShow() {
    this.setData({
      show: true
    })
  },
  pickerHide() {
    this.setData({
      show: false
    })
  },
  pickerChange(e) {
    console.log(e.detail)
    this.setData({
      area: e.detail.text
    })
  },
  submit() {
    if (!form) return;
    //注：结合FormItem校验，validate方法第三个参数必须传true
    let {
      areaData,
      show,
      //表单数据
      ...rest
    } = this.data
    form.validate(rest, rules, true).then(res => {
      if (res.isPass) {
        //表单数据
        console.log(rest)
        console.log('校验通过！')
      } else {
        console.log(res)
      }
    }).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 0;
  display: flex;
  justify-content: center;
}

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

Slots

插槽名称	说明
default	内容居左展示，仅接标题后面
right	内容居右展示
row V2.9.2+	上下排列时自定义显示内容

Props

属性名	类型	说明	默认值
padding	String	padding值	28rpx 30rpx
marginTop	Number, String	margin-top值，单位rpx	0
marginBottom	Number, String	margin-bottom值，单位rpx	0
label	String	标题文本	-
labelSize	Number, String	标题文本字体大小，单位rpx	32
labelColor	String	标题文本颜色	#333
labelFontWeight V2.8.0+	Number, String	标题文本字重	400
labelWidth	Number, String	标题文本宽度，单位rpx	160
labelRight	Number, String	标题文本距离右侧内容距离，单位rpx	16
asterisk	Boolean	是否带星号	false
asteriskColor	String	星号颜色	#EB0909
background	String	背景颜色	#fff
highlight	Boolean	是否有点击效果	false
arrow	Boolean	是否带箭头	false
arrowColor	String	箭头颜色	#c0c0c0
bottomBorder	Boolean	是否显示底部边框	true
borderColor	String	底部边框颜色	#eaeef1
left	Number, String	底部边框距离左侧距离，单位rpx	30
right	Number, String	底部边框距离右侧距离，单位rpx	0
radius	String	圆角值	0rpx
index	Number, String	自定义参数，点击时回传	0
prop V2.9.2+	String	表单域 model 字段，在使用校验时该属性是必填的	-
absolute V2.9.2+	Boolean	错误提示信息布局方式是否使用绝对定位	true
position V2.9.2+	Number, String	错误提示位置：1-标题左对齐 2-内容左对齐 3-居右对齐	2
rules V2.9.2+	Object	表单验证规则，如果平台不支持嵌套传入函数，则使用setRules方法传入	{}

// 属性 rules 格式 如下示例所示，包含属性 name，msg，rule 或 validator 
{
	name: "amount",
	rule: ["required", "isAmount"],
	msg: ["请输入金额", "请输入正确的金额，允许保留两位小数"]
}

//或如下格式，其中 rule 和 validator 可以并存，注：如果使用自定函数校验，请使用 setRules 方法传入校验规则

{
	name: "agree",
	validator: [{
		msg: "请勾选并同意《用户协议》",
		method: checkAgreement
	}]
}

TIP

结合 tui-form 组件做表单校验提示时，需注意：

• prop 属性必填的，不填写则不显示错误消息
• absolute 属性 为 true 时需注意控制提示信息内容长度，尽量不要太长超过一行。

Events

注：uni-app端绑定事件使用@前缀，如@click；微信小程序原生使用bind前缀，如bindclick

事件名	说明	回调参数
click	点击时触发	{index:自定义参数}

Methods

如何调用方法详见 进阶用法 介绍

方法名	说明	传入参数	回调参数
setRulesV2.9.2+	设置校验规则	rules：校验规则	-
validate V2.9.2+	验证方法，父级需要有 tui-form 组件才会生效	value：value 值，不传则使用 tui-form 组件model中值	{ isPass:是否校验通过,errorMsg:错误消息 }
clearValidate V2.9.2+	清除验证信息	-	-

//方法说明

/**
 * 设置校验规则
 * @param {Object} rules 校验规则，具体格式见上方 属性rules 说明
 */
setRules(rules)


/**
 * 验证方法
 * @param {any} value 值，当前item项需要验证的值，不传则使用tui-form组件model中值
 */
validate(value)


//清除表单验证信息
clearValidate()

预览

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

特别说明

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

线上程序扫码预览

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