uview-ui表单使用总结

news2024/7/6 19:14:12

官网地址:https://v1.uviewui.com
表单校验的规则注意点:
在这里插入图片描述
uView自带验证规则
常用的手机号身份证之类的都可以直接用内置校验规则地址
使用方法:

this.$u.test.mobile(val)

如果是动态配置的表单,使用v-for循环,校验规则不确定是否必填可以在validator函数判断

rules:{
 	idCard: [{
				validator: (rule, value, callback) => {
					// 判断是否必填
					let isRequired = this.getIsRequired('idCard') //获取是否必填
						if (isRequired) {
							if (!value) {
								callback('请输入身份证号')
							} else {
								callback()
							}
						} else {
								callback()
							}
						},
					trigger: ['change', 'blur'],
				},
				{
					validator: (rule, value, callback) => {
						return this.$u.test.idCard(value)
					},
					message: '请输入正确的身份证号码',
					trigger: ['change', 'blur'],
				}
			],
}

表单:

<u-form :model="form" ref="uForm" :rules="rules" class="form_content" :label-width="260">
		<template v-for="(item,index) in applyConfigList">
			<view class="mlr-30" :key="index">
				<u-form-item :label="item.label" :required="item.isReuired" :prop="item.field">
					<u-input placeholder="请输入" v-model="form[item.field]" />
				</u-form-item>
			</view>
	</template>
</u-form>

其余的其它属性看官网吧,切记rules一定要写正确,要不他提交的时候this.$refs.uForm.validate()点击没有反应,一直不能触发。

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

贪心算法原理和案例

目录 ​编辑 贪心算法简介 什么时候使用贪心算法 贪心算法缺陷 贪心算法应用 贪心算法JAVA代码实现 贪心算法简介 贪心算法&#xff08;又称贪婪算法&#xff09;Greedy Algorithm 是一种不断做出局部最优解的选择&#xff0c;最终期望得到全局最优解的算法。 简单地说&am…

SpringCloud Ribbon初步应用(十)

Ribbon是客户端负载均衡&#xff0c;所以肯定集成再消费端&#xff0c;也就是consumer端 修改microservice-student-consumer-80 引入依赖&#xff0c;pom.xml 加入 ribbon相关依赖 <dependency> <groupId>org.springframework.cloud</groupId> &…

淦、我的服务器又被攻击了

「作者简介」&#xff1a;CSDN top100、阿里云博客专家、华为云享专家、网络安全领域优质创作者 「推荐专栏」&#xff1a;对网络安全感兴趣的小伙伴可以关注专栏《网络安全入门到精通》 最近老是有粉丝问我&#xff0c;被黑客攻击了&#xff0c;一定要拔网线吗&#xff1f;还有…

Python进阶语法之三元表达式详解

Python进阶语法之三元表达式详解 Python的三元表达式&#xff08;Ternary Expressions&#xff09;是一种简洁高效的编写条件逻辑的方式。与许多其他编程语言一样&#xff0c;Python也提供了三元表达式&#xff0c;可以在一行代码中写出一个if-else条件语句。在这篇博文中&…

Webpack+Babel手把手带你搭建开发环境(内附配置文件)

先简单介绍一下Webpack和Babel Webpack webpack工作就是打包&#xff0c;只要你安装的插件就可以打包一切&#xff0c;并且会自动解析依赖项&#xff0c;是前端的热门工具。Babel Ecmascript的代码一直在更新 但是浏览器的兼容却没有根上&#xff0c;babel就实现了利用服务端n…

【数据分享】1929-2022年全球站点的逐月平均能见度(Shp\Excel\12000个站点)

气象数据是在各项研究中都经常使用的数据&#xff0c;气象指标包括气温、风速、降水、能见度等指标&#xff0c;说到常用的能见度数据&#xff0c;最详细的能见度数据是具体到气象监测站点的能见度数据&#xff01; 有关气象指标的监测站点数据&#xff0c;之前我们分享过1929…

Jmeter分布式压力测试

目录 1、场景 2、原理 3、注意事项 4、slave配置 5、master配置 6、脚本执行 注意&#xff1a; 1、场景 在做性能测试时&#xff0c;单台机器进行压测可能达不到预期结果。主要原因是单台机器压到一定程度会出现瓶颈。也有可能单机网卡跟不上造成结果偏差较大。 例如4C…

Pytest教程__跳过用例的执行(7)

pytest跳过用例执行的用法与unittest跳过用例大致相同。 pytest跳过用例的方法如下&#xff1a; pytest.mark.skip(reason)&#xff1a;无条件用例。reason是跳过原因&#xff0c;下同。pytest.mark.skipIf(condition, reason)&#xff1a;condition为True时跳过用例。 pyte…

一文了解清楚前景无限的高性能计算工程师工作内容,原来和码农区别这么大 ...

随着我国对科研基建的重视以及超算互联网的部署工作正式开展&#xff0c;越来越多的人关注到了一块蓝海的就业宝藏——高性能计算工程师。当今一位高性能计算工程师人才可谓抢手至极&#xff0c;尽管年薪高涨&#xff0c;但是依然供不应求。这是未来30年都比较需要的工程技术人…

java基础(多线程)-wait/notify

一、wait/notify的原理 Owner线程发现条件不满足&#xff0c;调用wait方法&#xff0c;即可进入WaitSet变为WAITING状态 BLOCKED和WAITING的线程都处于阻塞状态&#xff0c;不占用CPU时间片BLOCKED线程会在Owner线程释放锁时唤醒WAITING线程会在Owner线程调用notify或notifyAll…

大话设计模式之——单例模式

单例&#xff08;Singleton&#xff09; Intent 确保一个类只有一个实例&#xff0c;并提供该实例的全局访问点。 Class Diagram 使用一个私有构造函数、一个私有静态变量以及一个公有静态函数来实现。 私有构造函数保证了不能通过构造函数来创建对象实例&#xff0c;只能…

Selenium+Unittest自动化测试框架实战详解

目录 前言 项目框架 首先管理时间 !/usr/bin/env python3 -- coding:utf-8 -- 配置文件 conf.py config.ini 读取配置文件 记录操作日志 简单理解POM模型 管理页面元素 封装Selenium基类 创建页面对象 熟悉unittest测试框架 编写测试用例 执行用例 生成测试报…

存储圈秘史,细说“配额管理”的那些事儿

江湖乱战 分布式存储圈管理者“配额管理”出手划天下 各方数据混战之际 管理员划分空间应接不暇 不可避免的产生资源划分不合理等问题 各路“配额管理”豪杰陆续上线&#xff0c;力求结束纷争一统江湖 职场人所熟知的办公软件“共享盘”冲锋在前 共享盘可支持多人实时上…

在Blender中制作一艘海船

今天瑞云小编给大家带了由作者Menno Snoek的Blender教程&#xff0c;一名自学成才的 3D 艺术家&#xff0c;现在已经使用 Blender 大约 2 年了&#xff0c;接下来跟着云渲染小编看下Express Shipping&#xff08;海船&#xff09;背后的工作流程。 介绍 嘿&#xff01;我叫 M…

高分子PEG:Maleimide-PEG5K-NOTA,NOTA-聚乙二醇马来酰亚胺,规格特点介绍

NOTA-PEG5000-Mal&#xff0c;Maleimide-PEG5K-NOTA&#xff0c;NOTA-聚乙二醇马来酰亚胺&#xff0c;MV5000产品结构式&#xff1a; 产品规格&#xff1a; 1.CAS号&#xff1a;N/A 2.包装规格&#xff1a;1g、5g、10g&#xff0c;包装灵活&#xff0c;有100mg包装也有500mg 1…

技术新动向 | 谷歌云大举扩展安全 AI 生态系统

【本文由 Cloud Ace 整理发布&#xff0c; Cloud Ace 是谷歌云全球战略合作伙伴&#xff0c;拥有 300 多名工程师&#xff0c;也是谷歌最高级别合作伙伴&#xff0c;多次获得 Google Cloud 合作伙伴奖。作为谷歌托管服务商&#xff0c;我们提供谷歌云、谷歌地图、谷歌办公套件…

Linux:IP地址和主机名

1、IP地址&#xff1a;每个联网的电脑都会有一个地址&#xff0c;用于和其他计算机进行通讯 IP地址目前有两个版本&#xff0c;IPv4和IPv6&#xff0c;目前最常用的是IPv4版本&#xff1b;IPv4版本的地址格式为a:b:c:d&#xff0c;a、b、c、d代表了0-255的数字 Linux中&#xf…

基于SSM的电影院购票系统开源啦

大家好&#xff0c;今天给大家带来一款SSM的电影院售票系统&#xff0c;非常不错的一个项目&#xff0c;学习javaweb编程必备。 下载地址在文末 1.SpringMVC Spring MVC属于SpringFrameWork的后续产品&#xff0c;已经融合在Spring Web Flow 里面。Spring 框架提供了构建 Web …

ESP32构建简单WebServer服务器

目录 WebServer 服务器ESP32 filesystem uploaderWebServer 库WIFI 链接网页与代码烧录 WebServer 服务器 此案例中&#xff0c;我们将创建一个最简单的 webserver 服务器 案例实现&#xff1a;ESP32 通过 SPIFFS 上传网页文件并保存&#xff0c;之后手机开启热点&#xff0c;E…

华为OD机试真题 JavaScript 实现【检查是否存在满足条件的数字组合】【2022Q4 100分】

一、题目描述 给定一个正整数数组&#xff0c;检查数组中是否存在满足规则的数字组合 规则&#xff1a;A B 2C 二、输入描述 第一行输出数组的元素个数。 接下来一行输出所有数组元素&#xff0c;用空格隔开。 三、输出描述 如果存在满足要求的数&#xff0c;在同一行…