uniapp中的uview组件库丰富的Form 表单用法

目录

基本使用

#Form-item组件说明

#验证规则

#验证规则属性

#uView自带验证规则

#综合实战

#校验错误提示方式

#校验

基本使用

此组件一般是用于表单验证使用，每一个表单域由一个u-form-item组成，表单域中可以放置u-input、u-checkbox、u-radio、u-switch等。

  • 在表单组中，通过model参数绑定一个对象，这个对象的属性为各个u-form-item内组件的对应变量。
  • 由于表单验证和绑定表单规则时，需要通过ref操作，故这里需要给form组件声明ref="uForm"属性。
  • 关于u-from-item内其他可能包含的诸如input、radio等组件，请见各自组件的相关文档说明。
<template>
	<view>
		<!-- 注意，如果需要兼容微信小程序，最好通过setRules方法设置rules规则 -->
		<u--form
				labelPosition="left"
				:model="model1"
				:rules="rules"
				ref="uForm"
		>
			<u-form-item
					label="姓名"
					prop="userInfo.name"
					borderBottom
					ref="item1"
			>
				<u--input
						v-model="model1.userInfo.name"
						border="none"
				></u--input>
			</u-form-item>
			<u-form-item
					label="性别"
					prop="userInfo.sex"
					borderBottom
					@click="showSex = true; hideKeyboard()"
					ref="item1"
			>
				<u--input
						v-model="model1.userInfo.sex"
						disabled
						disabledColor="#ffffff"
						placeholder="请选择性别"
						border="none"
				></u--input>
				<u-icon
						slot="right"
						name="arrow-right"
				></u-icon>
			</u-form-item>
		</u--form>
		<u-action-sheet
				:show="showSex"
				:actions="actions"
				title="请选择性别"
				description="如果选择保密会报错"
				@close="showSex = false"
				@select="sexSelect"
		>
		</u-action-sheet>
	</view>
</template>

<script>
export default {
	data() {
		return {
			showSex: false,
			model1: {
				userInfo: {
					name: 'uView UI',
					sex: '',
				},
			},
			actions: [{
				name: '男',
				},
				{
					name: '女',
				},
				{
					name: '保密',
				},
			],
			rules: {
				'userInfo.name': {
					type: 'string',
					required: true,
					message: '请填写姓名',
					trigger: ['blur', 'change']
				},
				'userInfo.sex': {
					type: 'string',
					max: 1,
					required: true,
					message: '请选择男或女',
					trigger: ['blur', 'change']
				},
			},
			radio: '',
			switchVal: false
		};
	},
	methods: {
		sexSelect(e) {
			this.model1.userInfo.sex = e.name
			this.$refs.uForm.validateField('userInfo.sex')
		},
	},
	onReady() {
		//如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
    	this.$refs.uForm.setRules(this.rules)
    },
};
</script>

从上面的示例我们可以看到，rules中的属性名和form的属性名是一致的，同时传递给u-form-item的prop参数绑定的也是相同的属性名，注意这里prop参数绑定的是 字符串(属性名)，而不是一个变量。

#Form-item组件说明

此组件一般需要搭配Form组件使用，也可以单独搭配Input等组件使用，由于此组件参数较多，这里只对其中参数最简要介绍，其余请见底部的API说明：

  • prop为传入Form组件的model中的属性字段，如果需要表单验证，此属性是必填的。
  • labelPosition可以配置左侧"label"的对齐方式，可选为left和top。
  • borderBottom是否显示表单域的下划线，如果给Input组件配置了边框，可以将此属性设置为false，从而隐藏默认的下划线。
  • 如果想在表单域配置左右的图标或小图片，可以通过leftIcon和rightIcon参数实现。
#验证规则

组件验证部分采用了async-validator (opens new window)，一个字段可以设置多个内置规则，以及自定义规则，触发方式等， 每个字段的验证规则为一个数组，数组的每一个元素对象为其中一条规则(一个字段的验证可以配置多个规则)，如下：

rules: {
	'userInfo.name': {
		type: 'string',
				required: true,
				message: '请填写姓名',
				trigger: ['blur', 'change']
	},
	code: {
		type: 'string',
				required: true,
				len: 4,
				message: '请填写4位验证码',
				trigger: ['blur']
	},
	'userInfo.sex': {
		type: 'string',
				max: 1,
				required: true,
				message: '请选择男或女',
				trigger: ['blur', 'change']
	},
	radiovalue1: {
		type: 'string',
				min: 1,
				max: 2,
				message: '生命是美好的，请不要放弃治疗',
				trigger: ['change']
	},
	checkboxValue1: {
		type: 'array',
				min: 2,
				required: true,
				message: '不能太宅，至少选两项',
				trigger: ['change']
	},
	intro: {
		type: 'string',
				min: 3,
				required: true,
				message: '不低于3个字',
				trigger: ['change']
	},
	hotel: {
		type: 'string',
				min: 2,
				required: true,
				message: '请选择住店时间',
				trigger: ['change']
	},
	'userInfo.birthday': {
		type: 'string',
				required: true,
				message: '请选择生日',
				trigger: ['change']
	},
},
#验证规则属性

每一个验证规则中，可以配置多个属性，下面对常用的属性进行讲解，更具体的可以查看async-validator (opens new window)的文档说明：

  • trigger{String | Array}：触发校验的方式有2种：

    • change：字段值发生变化时校验
    • blur：输入框失去焦点时触发
    • 如果同时监听两种方式，需要写成数组形式：['change', 'blur']

  • type{String}
    内置校验规则，如这些规则无法满足需求，可以使用正则匹配、或者使用validator自定义方法并结合uView自带验证规则。

    • string：必须是 string 类型，默认类型
    • number：必须是 number 类型
    • boolean：必须是 boolean 类型
    • method：必须是 function 类型
    • regexp：必须是 regexp 类型，这里的正则，指的是判断字段的内容是否一个正则表达式，而不是用这个正则去匹配字段值
    • integer：必须是整数类型
    • float：必须是浮点数类型
    • array：必须是 array 类型
    • object：必须是 object 类型
    • enum：必须出现在 enmu 指定的值中
    • date：必须是 date 类型
    • url：必须是 url 类型
    • hex：必须是 16 进制类型
    • email：必须是 email 类型
    • any：任意类型

  • required
    布尔值，是否必填，配置此参数不会显示输入框左边的必填星号，如需要，请配置u-form-item的required为true，注意：如需在swiper标签内显示星号，需要给予swiper-item第一个根节点一定的margin样式

  • pattern
    要求此参数值为一个正则表达式，如： /\d+/，不能带引号，如："/\d+/"，组件会对字段进行正则判断，返回结果。

  • min
    最小值，如果字段类型为字符串和数组，会取字符串长度与数组长度(length)与min比较，如果字段是数值，则直接与min比较。

  • max
    最大值，规则同min参数

  • len
    指定长度，规则同min，优先级高于min和max

  • enum{Array} 指定的值，配合 type: 'enum' 使用

  • whitespace{Boolean}
    如果字段值内容都为空格，默认无法通过required: true校验，如果要允许通过，需要将此参数设置为true

  • transform{Function}，校验前对值进行转换，函数的参数为当前值，返回值为改变后的值，参数如如下：

    • value：当前校验字段的值

  • message
    校验不通过时的提示信息

  • validator{Function}：自定义同步校验函数，参数如下：

    • rule：当前校验字段在 rules 中所对应的校验规则
    • value：当前校验字段的值
    • callback：校验完成时的回调，一般无需执行callback，返回true(校验通过)或者false(校验失败)即可

  • asyncValidator{Function}：自定义异步校验函数，参数如下：

    • rule：当前校验字段在 rules 中所对应的校验规则
    • value：当前校验字段的值
    • callback：校验完成时的回调，执行完异步操作(比如向后端请求数据验证)，如果不通过，需要callback(new Error('提示错误信息'))，如果校验通过，执行callback()即可
#uView自带验证规则

uView在JS板块的Test 规则校验中有大量内置的验证规则，这些规则对表单验证来说，属于自定义规则，故需要用到上方规则属性的 validator自定义验证函数，这里做一个详细说明。

我们知道uView有自带的判断手机号的验证方法uni.$u.test.mobile(value)，但是async-validator (opens new window)没有 内置判断手机号的规则，所以将二者结合使用：

rules: {
	// 字段名称
	mobile: [
		{
			required: true, 
			message: '请输入手机号',
			trigger: ['change','blur'],
		},
		{
			// 自定义验证函数，见上说明
			validator: (rule, value, callback) => {
				// 上面有说，返回true表示校验通过，返回false表示不通过
				// uni.$u.test.mobile()就是返回true或者false的
				return uni.$u.test.mobile(value);
			},
			message: '手机号码不正确',
			// 触发器可以同时用blur和change
			trigger: ['change','blur'],
		}
	]
}
#综合实战

上面讲述了async-validator (opens new window)的规则和配置，以及uView内置规则的结合使用，下面我们进行一个综合 实战示例，要入对某一个字段进行如下验证(验证实现有多种方法，下方仅为引导示例，非唯一，或最优做法)：

  1. 必填，同时可接受change和blur触发校验：配置required参数为true，同时配置trigger为[change, blur]
  2. 必须为字母或字符串，校验前先将字段值转为字符串类型：通过pattern参数配置正则：/^[0-9a-zA-Z]*$/g，通过transform参数在校验前对字段值转换为字符串
  3. 长度6-8个字符之间：通过 配置min为6，max为8
  4. 需要包含字母"A"：使用uView的uni.$u.test.contains()方法，并结合validator自定义函数实现
  5. 异步校验，输入完账号，输入框失去焦点时，向后端请求该账号是否已存在：通过上方的asyncValidator异步函数进行验证。

综上，我们可以得出如下的一个配置规则(仅为综合演示，非最优做法)：

rules: {
	name: [
		// 必填规则
		{
			required: true,
			message: '此为必填字段',
			// blur和change事件触发检验
			trigger: ['blur', 'change'],
		},
		// 正则判断为字母或数字
		{
			pattern: /^[0-9a-zA-Z]*$/g,
			// 正则检验前先将值转为字符串
			transform(value) {
				return String(value);
			},
			message: '只能包含字母或数字'
		},
		// 6-8个字符之间的判断
		{
			min: 6,
			max: 8,
			message: '长度在6-8个字符之间'
		},
		// 自定义规则判断是否包含字母"A"
		{
			validator: (rule, value, callback) => {
				return uni.$u.test.contains(value, "A");
			},
			message: '必须包含字母"A"'
		},
		// 校验用户是否已存在
		{
			asyncValidator: (rule, value, callback) => {
				uni.$u.http.post('/xxx/xxx', {name: value}).then(res => {
					// 如果验证不通过，需要在callback()抛出new Error('错误提示信息')
					if(res.error) {
						callback(new Error('姓名重复'));
					} else {
						// 如果校验通过，也要执行callback()回调
						callback();
					}
				})
			},
			// 如果是异步校验，无需写message属性，错误的信息通过Error抛出即可
			// message: 'xxx'
		}
	]
}
#校验错误提示方式

uView提供了多种校验的错误提示方式，传递给Form组件的errorType参数：

  • message：默认为输入框下方用文字进行提示
  • none：不会进行任何提示
  • border-bottom：配置作用域底部的下划线显示为红色，要求给form-item设置了borderBottom=true才有效
  • toast：以"toast"提示的方式弹出错误信息，每次只弹出最前面的那个表单域的错误信息
<template>
	<u--form :errorType="errorType">
		......
	</u--form>
</template>

<script>
export default {
	data() {
		return {
			// 文字提示
			errorType: 'message',
			// 不提示
			// errorType: 'none',
			// 下划线提示，要求给form-item设置了borderBottom=true才有效
			// errorType: 'border-bottom'
		};
	}
};
</script>
#校验

进行了上方的配置和讲解后，进入到最后一步，执行验证：
需要通过ref调用Form组件的validate方法，该方法回调函数的参数为一个布尔值，true为校验通过，否则反之。

<template>
	<view class="">
		<u--form :model="form" ref="uForm">
			<u-form-item label="姓名" prop="name">
				<u-input v-model="form.name" />
			</u-form-item>
		</u--form>
		<u-button @click="submit">提交</u-button>
	</view>
</template>

<script>
export default {
	data() {
		return {
			form: {
				name: '',
			},
			rules: {
				name: [
					{
						required: true,
						message: '请输入姓名',
						trigger: ['blur', 'change']
					}
				]
			}
		};
	},
	methods: {
		submit() {
			this.$refs.uForm.validate().then(res => {
				uni.$u.toast('校验通过')
			}).catch(errors => {
				uni.$u.toast('校验失败')
			})
		}
	},
};
</script>

API

#Form Props

参数说明类型默认值可选值
model表单数据对象Object--
rules通过ref设置，如果rules中有自定义方法等，需要使用setRules方法设置规则，见上方说明Object|Function|Array--
errorType错误的提示方式，见上方说明Stringmessagenone|toast|border-bottom|none
borderBottom是否显示表单域的下划线边框Booleantrue-
labelPosition表单域提示文字的位置，left-左侧，top-上方Stringlefttop
labelWidth提示文字的宽度，单位pxString | Number45数值 / auto
labelAlignlable字体的对齐方式Stringleftcenter / right
labelStylelable的样式，对象形式Object--

#Form Methods

此方法如要通过ref手动调用

名称说明参数
validate对整个表单进行校验的方法-
setRules如果rules中有自定义方法等，需要用此方法设置rules规则，否则微信小程序无效Function(rules)
validateField对部分表单字段进行校验Function(value, Function(errorsRes))
resetFields对整个表单进行重置，将所有字段值重置为初始值并移除校验结果-
clearValidate清空校验结果Function(props)

#Form-item Props

参数说明类型默认值可选值
label左侧提示文字String--
prop表单域model对象的属性名，在使用 validate、resetFields 方法的情况下，该属性是必填的String--
borderBottom是否显示下边框，如不需要下边框，需同时将u-form的同名参数设置为falseString | Booleantruetrue / false
labelWidth提示文字的宽度，单位rpx，如设置，将覆盖u-form的同名参数String | Number--
labelPosition 2.0.34label的位置String-left / top
rightIcon右侧自定义字体图标(限uView内置图标)或图片地址String--
leftIcon左侧自定义字体图标(限uView内置图标)或图片地址String--
leftIconStyle左侧自定义字体图标的样式String | Object--
required是否显示左边的"*"号，这里仅起展示作用，如需校验必填，请通过rules配置必填规则，如需在swiper标签内显示星号，需要给予swiper-item内第一个根节点一定的margin样式Booleanfalsetrue

#Form-item Slot

名称说明
-Form Item 的内容
right右侧自定义内容，可以在此传入一个按钮，用于获取验证码等场景

#Form-item Events

事件名说明回调参数版本
click点击时触发--

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：/a/283521.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

Javaweb之Mybatis入门程序的详细解析

Javaweb之Mybatis入门程序的详细解析

1.2 入门程序实现 1.2.1 准备工作 1.2.1.1 创建springboot工程 创建springboot工程&#xff0c;并导入 mybatis的起步依赖、mysql的驱动包。 项目工程创建完成后&#xff0c;自动在pom.xml文件中&#xff0c;导入Mybatis依赖和MySQL驱动依赖 <!-- 仅供参考&#xff1a;只…
阅读更多...
初始Web服务器

初始Web服务器

一、web服务器 1、什么是web服务器&#xff1f; web服务器就是web项目的容器&#xff0c;我们将开发好的web项目部署到web容器中&#xff0c;才能使用网络中的用户通过浏览器进行访问。 一张图带你了解web服务器有啥作用&#xff1a; 在我的电脑上有一个已经做好的项目&#…
阅读更多...
Openwrt修改Dropbear ssh root密码

Openwrt修改Dropbear ssh root密码

使用ssh工具连接路由器 输入&#xff1a;passwd root 输入新密码 重复新密码 设置完成 rootImmortalWrt:~# passwd root Changing password for root New password:
阅读更多...
2023年总结（2023年1月1日至2023年12月31日）

2023年总结（2023年1月1日至2023年12月31日）

前言 时间过得真快啊&#xff0c;一年又过去了。 从去年11月换了家公司后&#xff0c;工作就稳定多了&#xff0c;做的工作也是我喜欢做的工作——摄像头驱动&#xff0c;平时也挺轻松的&#xff0c;偶尔有事儿的时候会压力大点&#xff0c;加点班&#xff0c;其他都还好&…
阅读更多...
《2023年企业IoT和OT威胁报告》：物联网恶意软件攻击增长400%

《2023年企业IoT和OT威胁报告》：物联网恶意软件攻击增长400%

内容概括&#xff1a; 物联网&#xff08;IoT&#xff09;设备无疑改变了我们生活、工作和管理运营技术&#xff08;OT&#xff09;环境的方式。总体而言&#xff0c;到2027年&#xff0c;全球物联网设备数量预计将超过290亿&#xff0c;比2023年的167亿大幅增加。设备和智能技…
阅读更多...
伺服电机为什么叫伺服电机，内部结构是什么，工作原理是什么，有什么特点。

伺服电机为什么叫伺服电机，内部结构是什么，工作原理是什么，有什么特点。

问题描述&#xff1a;伺服电机为什么叫伺服电机&#xff0c;内部结构是什么&#xff0c;工作原理是什么&#xff0c;有什么特点。 问题解答&#xff1a; 名字是拉丁语音译过来的&#xff0c;直译的话就叫奴仆电机。 "伺服"一词源于拉丁语 "servus"&#…
阅读更多...
面试手撕算法高频专题：数组的双指针思想及应用（算法村第三关白银挑战）

面试手撕算法高频专题：数组的双指针思想及应用（算法村第三关白银挑战）

所谓的双指针其实就是两个变量&#xff0c;不一定真的是指针。 快慢指针&#xff1a;一起向前走对撞指针、相向指针&#xff1a;从两头向中间走背向指针&#xff1a;从中间向两头走 移除值为val的元素 题目描述 27. 移除元素 - 力扣&#xff08;LeetCode&#xff09; 给你…
阅读更多...
【C#】知识点实践序列之Lock的输出多线程信息

【C#】知识点实践序列之Lock的输出多线程信息

大家好&#xff0c;我是全栈小5&#xff0c;欢迎来到《小5讲堂之知识点实践序列》文章。 2023年第2篇文章&#xff0c;此篇文章是C#知识点实践序列之Lock知识点&#xff0c;博主能力有限&#xff0c;理解水平有限&#xff0c;若有不对之处望指正&#xff01; 本篇在Lock锁定代码…
阅读更多...
开关电源反馈环路重要参数设计，PC817和TL431实例计算和取值详解

开关电源反馈环路重要参数设计，PC817和TL431实例计算和取值详解

author&#xff1a;小高霸气 data:2021.04.16 下面介绍开关电源重要的反馈电路PC817和TL431设计和应用。 在开关电源当中&#xff0c;对稳压反馈电路的设计通常会使用TL431和PC817来配合使用。在TOP 及3842等单端反激电路中的反馈电路很多都采用TL431和PC817作为参考、隔离、取…
阅读更多...
Vue中目录以及文件内容简单分析

Vue中目录以及文件内容简单分析

src文件下目录分析&#xff1a; App.vue文件中内容&#xff1a; vue文件中基本的三个结构&#xff0c;template&#xff08;结构&#xff09;、script&#xff08;行为&#xff09; 、style&#xff08;样式&#xff09;。 <template><!-- html结构 --><div cl…
阅读更多...
记一次Oracle Cloud计算实例ssh恢复过程

记一次Oracle Cloud计算实例ssh恢复过程

#ssh秘钥丢失# &#xff0c; #Oracle Cloud# 。 电脑上的ssh秘钥文件不知道什么时候丢失了&#xff0c;直到用的时候才发现没有了&#xff0c;这下可好&#xff0c;Oracle Cloud的计算实例连不上了&#xff0c;这个实例只能通过ssh连接上去&#xff1a; 以下是解决步骤&#x…
阅读更多...
Linux常用命令大全总结及讲解（超详细版）

Linux常用命令大全总结及讲解（超详细版）

前言&#xff1a; Linux 是一个基于Linux 内核的开源类Unix 操作系统&#xff0c;Linus Torvalds于 1991 年 9 月 17 日首次发布的操作系统内核。Linux 通常打包为Linux 发行版。 Linux 最初是为基于Intel x86架构的个人计算机开发的&#xff0c;但此后被移植到的平台比任何其…
阅读更多...
Ubuntu系统上TensorBoard使用方式

Ubuntu系统上TensorBoard使用方式

Ubuntu系统上TensorBoard使用方式 Tensorboard 启动TensorBoard 后台开启TensorBoard访问权限 执行命令&#xff1a;nohup tensorboard --logdirlogs/ >>tensorboard.log & 查看访问链接和登录token 执行命令&#xff1a;cat tensorboard.log&#xff0c;打开ten…
阅读更多...
typore自定义删除线快捷键

typore自定义删除线快捷键

打开高级设置 设置快捷键 重新打开typore
阅读更多...
在高并发场景下，缓存“雪崩”了怎么办

在高并发场景下，缓存“雪崩”了怎么办

1. 缓存雪崩的常见原因 缓存“雪崩”是指&#xff0c;因为部分缓存节点不可用&#xff0c;而导致整个缓存系统&#xff08;甚至是整个服务系统&#xff09;不可用。缓存“雪崩”主要分为以下两种情况&#xff1a; 因缓存不支持 rehash 而导致的缓存“雪崩”缓存支持 rehash 时…
阅读更多...
【Java】ThreadLocal原理与使用场景

【Java】ThreadLocal原理与使用场景

ThreadLocal原理&#xff1a; 字段&#xff1a; //ThreadLocal对象的哈希码 private final int threadLocalHashCode nextHashCode();//生成ThreadLocal对象的哈希码时&#xff0c;需要用到该对象&#xff0c;从0开始 private static AtomicInteger nextHashCode new Atomic…
阅读更多...
使用docker build构建image

使用docker build构建image

文章目录 环境步骤准备例1&#xff1a;基本用法例2&#xff1a;缓存layer例3&#xff1a;Multi-stage例4&#xff1a;Mountcache mountbind mount 例5&#xff1a;参数例6&#xff1a;Export文件例7&#xff1a;测试 参考 环境 RHEL 9.3Docker Community 24.0.7 步骤 在Dock…
阅读更多...
Pix2Pix如何工作？

Pix2Pix如何工作？

一、说明 在本指南中&#xff0c;我们将重点介绍 Pix2Pix [1]&#xff0c;它是用于配对图像翻译的著名且成功的深度学习模型之一。在地理空间科学中&#xff0c;这种方法可以帮助传统上不可能的广泛应用&#xff0c;在这些应用中&#xff0c;我们可能希望从一个图像域转到另一个…
阅读更多...
认识Linux基本指令之 “touch mkdir rm”

认识Linux基本指令之 “touch mkdir rm”

01.touch指令 语法:touch [选项]... 文件... 功能&#xff1a;touch命令参数可更改文档或目录的日期时间&#xff0c;包括存取时间和更改时间&#xff0c;或者新建一个不存在的文件 常用选项&#xff1a; -a 或--timeatime或--timeaccess或--timeuse只更改存取时间。 -c…
阅读更多...
JAVA：利用JUnit进行高效的单元测试

JAVA：利用JUnit进行高效的单元测试

1、简述 在软件开发中&#xff0c;单元测试是确保代码质量和可维护性的关键步骤。JUnit作为Java领域最流行的单元测试框架之一&#xff0c;提供了简单而强大的测试工具&#xff0c;可以帮助开发者在项目开发过程中及时发现和修复代码中的问题。本文将介绍JUnit的基本用法以及一…
阅读更多...
最新文章

Copyright @ 2022~2023