Form 表单

由输入框、选择器、单选框、多选框等控件组成，用以收集、校验、提交数据 支持表单组件列表

• t-input
• t-textarea
• t-radio-group
• t-checkbox-group
• t-datetime-picker
• t-pca-picker
• t-code-input
• t-calendar
• t-stepper
• t-rate
• t-switch
• t-upload
• t-slider
• t-picker-color
• t-picker-city
• t-picker-date
• t-select

支持的验证规则

• 必填校验

{ type: 'required', message: '请输入活动名称' }

• 长度校验

{ type: 'length', min: 3, max: 5, message: '字符串长度必须为3-5之间' }

• 数字验证

{ type: 'range', min: 3, max: 5, message: '数字必须在3-5之间' }
{ type: 'range', max: 5, message: '数字大小必须小于6' }
{ type: 'range', min: 3, message: '数字大小必须大于2' }

• 自定义验证

	{
	type: 'function',
	fun: (e : any) : boolean => {
		return isPhone(`${e}`)
	},
	message: '手机号正则验证失败'
}

支持平台

安卓	ios	web	微信小程序	支付宝小程序	QQ小程序
√	√	√	x	x	x

示例

<template>
	<t-page title="表单" class="p.30">
		<t-card title="Form 表单" class="mb.30"
			sub-title="支持自定义数据校验,长度校验证,数据大小判断 支持重置,支持form-item点击映射到input组件提升用户体验 支持表单下任意组件参与布局,支持自定义表单验证"></t-card>
		<t-form class="tdr-tdb-tdp" :disabled="disabled" ref="ruleForm" :rules="rules" child-class="ptb.20">
			<t-form-item label="活动名称" prop="name">
				<t-input v-model="(formData.name as string)" class="ff-sta.r-pr.0" effect="plain"
					:border="false"></t-input>
			</t-form-item>
			<t-form-item label="活动区域" prop="region">
				<t-radio-group v-model="(formData.region as string)" child-class="mb.0">
					<t-radio v-for="(item,index) in regionList" :key="index" :value="((index).toString())"
						type="primary">{{item}}</t-radio>
				</t-radio-group>
			</t-form-item>
			<t-form-item label="活动产品" prop="checkbox">
				<t-checkbox-group v-model="(formData.checkbox as string[])" type='primary'>
					<t-checkbox value="1">苹果</t-checkbox>
					<t-checkbox value="2">香蕉</t-checkbox>
					<t-checkbox value="3">橙子</t-checkbox>
				</t-checkbox-group>
			</t-form-item>
			<t-form-item label="验证码" prop="tcodeinput">
				<t-code-input editBoxClass="twh.50" mode="line" v-model="(formData.tcodeinput as string)" type="primary"
					:maxlength="4"></t-code-input>
			</t-form-item>
			<t-form-item label="手机号(自定义数据校验测试)" prop="phone">
				<t-input v-model="(formData.phone as string)" :maxlength="11" class="ff-sta.r-pr.0" effect="plain"
					:border="false"></t-input>
			</t-form-item>
			<t-form-item label="评分" prop="trate">
				<t-rate v-model="(formData.trate as number)" class="s.40" type="primary"></t-rate>
			</t-form-item>
			<t-form-item label="开关" prop="tswitch">
				<t-switch v-model="(formData.tswitch as boolean)" type="primary" activeIcon="volume-up"
					inactiveIcon="volume-off"></t-switch>
			</t-form-item>
			<t-form-item label="图片上传" prop="tupload">
				<t-upload v-model="(formData.tupload as string[])" :count="1"></t-upload>
			</t-form-item>
			<t-form-item label="下拉选择(select)" prop="tselectval">
				<t-select v-model="(formData.tselectval as string[])">
					<t-select-option v-for="(item,index) in selectOptions" :key="index" :label="item.label"
						:value="item.value">
					</t-select-option>
				</t-select>
			</t-form-item>
			<t-form-item label="步进器" prop="tnumberbox">
				<t-stepper v-model="(formData.tnumberbox as number)"></t-stepper>
			</t-form-item>
			<t-form-item label="slider" prop="slider">
				<t-slider class="ff-h.150" :min="0" :max="500" blockSize="60" trackSize="20"
					v-model="(formData.slider as number[])" type="s" fontSize="35" :show-value="true"></t-slider>
			</t-form-item>
			<t-form-item label="颜色选择器" prop="color" :bottomLine="false" direction="row">
				<t-picker-color class="tdr-mb.30" :value="formData.color" @confirm="colorConfirm">
					<t-col :class="`twh.60-tdr-bg.${formData.color==''?'#ffffff':formData.color}`"></t-col>
				</t-picker-color>
			</t-form-item>
			<t-form-item label="活动时间" prop="activityTime">
				<t-picker-date class="ff" :value="(formData.activityTime as string)" :mode="['year', 'month', 'day']"
					format="yyyy-mm-dd" @confirm="dateConfirm">
					<t-cell :desc="formData.activityTime==''?'请设置活动时间':formData.activityTime" :border="false"></t-cell>
				</t-picker-date>
			</t-form-item>
			<t-form-item label="活动地点" prop="pca">
				<t-picker-city class="ff" :value="(formData.pca as number[])" :list="list" @confirm="cityConfirm"
					@init="cityConfirm">
					<t-cell :desc="citys.length==0?'请选择您的城市':citys.join('-')" :border="false"></t-cell>
				</t-picker-city>
			</t-form-item>
			<t-form-item label="活动内容" prop="textarea" :bottomLine="false" direction="col">
				<t-textarea placeholder="请输入活动内容" v-model="(formData.desc as string)" effect="plain"
					:border="true"></t-textarea>
			</t-form-item>
			<t-col>
				<t-button class="mb.30" type="primary" @click="submitForm">提交</t-button>
				<t-button type="s" @click="resetForm">重置</t-button>
			</t-col>
		</t-form>
		<t-col class="mt.30-p.30-tdr-tdb">
			<t-button type="error" @click="disabled=!disabled">{{disabled?'取消禁用':'禁用表单'}}</t-button>
		</t-col>
	</t-page>
</template>

<script>
	// import { TuiApi } from '@/api/uriApi.uts'
	type formDataType = {
		name : string,
		region : string,
		desc : string,
		activityTime : string,
		checkbox : string[],
		tcodeinput : string,
		tnumberbox : number,
		trate : number,
		tswitch : boolean,
		tupload : string[],
		tselectval : string[],
		tcalendar : string[],
		pca : string[],
		textarea : string,
		slider : number[],
		color : string
		phone : string
	}
	import { TuiApi } from '@/api/uriApi.uts'
	import { TuiColorChangeEvent, isPhone, TuiPickerCityChange } from '@/uni_modules/tui-plus'
	type SelectOptions = {
		value : string
		label : string
		disabled ?: boolean
	}
	export default {
		data() {
			return {
				disabled: false,
				list: [] as UTSJSONObject[],
				rowsSize: [['35rpx', '600rpx'], ['35rpx', '300rpx'], ['35rpx', '500rpx'], ['35rpx', '400rpx']],
				apiloading: false,
				regionList: ['北京', '上海', '广告', '重庆'],
				activeTitle: "请选择活动时间",
				calendarTitle: "请选择日历",
				calendarOpen: false,
				formModel: {} as UTSJSONObject,
				loadings: false,
				citys: [] as string[],
				formData: {
					name: '',
					desc: '',
					region: '',
					activityTime: '2022-08-15',
					checkbox: [],
					tcodeinput: '',
					tnumberbox: 4,
					trate: 1,
					tswitch: true,
					tupload: [],
					tselectval: [],
					tcalendar: [],
					pca: [], //'120000', '120200', '120225'
					textarea: '',
					slider: [10, 60, 300],
					color: '#f56c6c',
					phone: '',
				} as formDataType,
				selectOptions: [{
					value: '选项1',
					label: '黄金糕'
				}, {
					value: '选项2',
					label: '双皮奶',
					disabled: true
				}, {
					value: '选项3',
					label: '蚵仔煎'
				}, {
					value: '选项4',
					label: '龙须面'
				}, {
					value: '选项5',
					label: '北京烤鸭'
				}] as SelectOptions[],
				rules: {
					phone: [
						// { type: 'required', message: '手机号不能为空' },
						// { type: 'length', min: 11, max: 11, message: '手机号长度只能为11位' },
						{
							type: 'function',
							fun: (e : any) : boolean => {
								return isPhone(`${e}`)
							},
							message: '手机号正则验证失败'
						}
					],
					name: [
						{ type: 'required', message: '请输入活动名称' },
						{ type: 'length', min: 3, max: 5, message: '字符串长度必须为3-5之间' }
					],
					trate: [
						{ type: 'range', min: 3, max: 5, message: '必须为3-5' },
					],
					tupload: [{ type: 'required', message: '图片上传不能为空' }],
					tselectval: [{ type: 'required', message: '输入不能为空' }],
					pca: [{ type: 'required', message: '请选择活动地点' }],
					textarea: [{ type: 'required', message: '活动内容不能为空' }],
					slider: [{ type: 'required', message: 'slider验证失败' }],
					color: [{ type: 'required', message: '请选择颜色' }],
					tswitch: [
						{ type: 'required', message: 'switch校验必填为空' },
					],
					tcalendar: [
						{ type: 'required', message: '日历数据不能为空' }
					],
					tcodeinput: [
						{ type: 'required', message: '验证码不能为空' }
					],
					desc: [
						{ type: 'required', message: '请选择活动区域' }
					],
					tnumberbox: [
						{ type: 'required', message: '步进必填验证不能为空' }
					],
					checkbox: [
						{ type: 'required', message: 'checkbox不能为空' }
					],
					region: [
						{ type: 'required', message: '请选择活动区域' }
					],
					activityTime: [
						{ type: 'required', message: '请选择日期' }
					]
				} as UTSJSONObject
			}
		},
		onLoad() {
			const datalist = uni.getStorageSync('citydata')
			if (`${datalist}` == '') {
				TuiApi('citydata').then(res => {
					this.list = res.getArray('data') as UTSJSONObject[]
					uni.setStorageSync('citydata', this.list)
				})
			} else {
				this.list = datalist as UTSJSONObject[]
			}
		},
		methods: {
			dateConfirm(e : UTSJSONObject) {
				this.formData.activityTime = e.getString('time')!
			},
			cityConfirm(e : TuiPickerCityChange) {
				this.formData.pca = e.keys
				this.citys = e.values
			},
			colorConfirm(e : TuiColorChangeEvent) {
				this.formData.color = e.hex
			},
			calendarConfirm(e : string[]) {
				if (e.length > 0) this.calendarTitle = e[0]
			},
			submitForm() {
				const validate : boolean = (this.$refs['ruleForm'] as ComponentPublicInstance).$callMethod('validate') as boolean
				if (validate) {
					uni.showModal({
						title: '数据提交成功'
					})
					console.log(this.formData)
					this.disabled = !this.disabled
				} else {
					uni.showModal({
						title: '数据校验失败'
					})
				}
			},
			resetForm() {
				(this.$refs['ruleForm'] as ComponentPublicInstance).$callMethod('reset')
			}
		}
	}
</script>

t-form Props

名称	描述	类型	默认值
direction	表单布局方向	String	'row'
rules	表单验证规则	UTSJSONObject	{}
rulesClass	规则验证的普通样式类名	String	''
childLabelClass	子项标签的样式类名	String	''
childLabelTextClass	统一设置子元素labeltext(类)	String
childClass	子项的样式类名	String	''
hideRequiredAsterisk	是否隐藏必填星号	Boolean	true
showMessage	是否显示验证信息	Boolean	true
bottomLine	是否显示底部线条	Boolean	false

t-form Events

事件名	描述	回调参数
reset	表单重置事件	-

t-form Methods

方法名	描述	参数
validate	验证表单	-
reset	重置表单	-

t-form Slots

名称	描述
default	默认插槽，用于表单内容

Events

事件名	描述	回调参数	版本
-	-	-

t-form-item Props

名称	描述	类型	默认值
direction	布局方向	String	''
prop	表单域的字段名	String	''
label	标签文本	String	''
required	是否必填	Boolean	false
rules	验证规则	any[]	[]
showMessage	是否显示校验信息	Boolean	false
labelClass	标签的样式类名	String	''
labelTextClass	标签文本的样式类名	String	''
rulesClass	验证规则的样式类名	String	''

t-form-item Methods

方法名	描述	参数
init	初始化子项	ComponentPublicInstance, value
validate	验证表单项	-
reset	重置表单项	-

t-form-item Slots

名称	描述
default	默认插槽，用于表单元素