当前位置: 首页 > news >正文

uniapp-Form示例(uviewPlus)

  1. 示例说明
    Vue版本:vue3

        组件:uviewPlus(Form 表单 | uview-plus 3.0 - 全面兼容nvue的uni-app生态框架 - uni-app UI框架)

        说明:表单组建、表单验证、提交验证等;

        截图:

  1. 示例代码
<template><view class="form"><uni-section title="基本信息" type="line"><view style="padding: 0 15px;"><u--form labelPosition="top" :model="uForm" :rules="rules" ref="uForm"><u-form-item label="姓名" labelWidth="60" prop="user.name" ref="item1" required><u--input v-model="uForm.user.name" placeholder="请输入姓名" clearable></u--input></u-form-item><u-form-item label="手机号" labelWidth="60" prop="user.phone" type="number" ref="item1" required><u--input v-model="uForm.user.phone" placeholder="请输入手机号" clearable maxlength="11"></u--input></u-form-item><u-form-item label="身份证" labelWidth="60" prop="user.idcard" type="idcard" ref="item1" required><u--input v-model="uForm.user.idcard" placeholder="请输入身份证号" clearable maxlength="18"></u--input></u-form-item><u-form-item label="家庭住址" labelWidth="100" prop="user.address" ref="item1" required><u--input v-model="uForm.user.address" placeholder="请输入家庭住址" clearablemaxlength="60"></u--input></u-form-item></u--form><view class="btn-save"><u-button text="保存" type="primary" @click="submit"></u-button></view></view></uni-section><u-toast ref="uToastRef"></u-toast></view>
</template><script>export default {data() {return {uForm: {user: {name: ''}},// 验证规则rules: {'user.name': [{required: true,message: '请输入姓名',trigger: ['change', 'blur'],},{// 自定义验证函数validator: (rule, value, callback) => {// 返回true表示校验通过,返回false表示不通过return uni.$u.test.chinese(value);},message: '姓名只能输入汉字',// 触发器可以同时用blur和changetrigger: ['change', 'blur'],}],'user.phone': [{required: true,message: '请输入手机号',trigger: ['blur', 'change'],},{// 自定义验证函数validator: (rule, value, callback) => {// 返回true表示校验通过,返回false表示不通过return uni.$u.test.mobile(value);},message: '手机号码不正确',// 触发器可以同时用blur和changetrigger: ['change', 'blur'],}],'user.idcard': [{required: true,message: '请输入身份证号',trigger: ['change', 'blur'],},{// 自定义验证函数validator: (rule, value, callback) => {// 返回true表示校验通过,返回false表示不通过return uni.$u.test.idCard(value);},message: '身份证号不正确',// 触发器可以同时用blur和changetrigger: ['change', 'blur'],}],'user.address': {type: 'string',required: true,message: '请填写家庭住址',trigger: ['blur', 'change']},}}},onReady() {this.$refs.uForm.setRules(this.rules)},methods: {submit() {this.$refs.uForm.validate().then(res => {this.$refs.uToastRef.show({type: "success",message: "提交成功",})}).catch(err => {// uni.$u.toast('校验失败')this.$refs.uToastRef.show({type: "error",message: "请检查填写内容",})})}}}
</script><style lang="scss" scoped>.form {background-color: $white;height: 100vh;.btn-save {width: 300rpx;margin: 0 auto;margin-top: 100rpx;}}
</style>

相关文章:

uniapp-Form示例(uviewPlus)

示例说明 Vue版本&#xff1a;vue3 组件&#xff1a;uviewPlus&#xff08;Form 表单 | uview-plus 3.0 - 全面兼容nvue的uni-app生态框架 - uni-app UI框架&#xff09; 说明&#xff1a;表单组建、表单验证、提交验证等&#xff1b; 截图&#xff1a; 示例代码 <templat…...

【Linux】详解进程程序替换

一、替换原理 用fork创建子进程后执行的是和父进程相同的程序(但有可能执行不同的代码分支)&#xff0c;子进程往往要调用一种exec函数以执行另一个程序。当进程调用一种exec函数时&#xff0c;该进程的用户空间代码和数据完全被新程序替换&#xff0c;从新程序的启动例程开始执…...

vue中使用jsmind生成脑图

项目部分参数&#xff1a; vue&#xff1a;2.6.10 node:16.20.0 1、使用命令行安装jsmind&#xff1a; npm i jsmind -S 2、在文件中引入jsmind&#xff0c;并编写渲染jsmind的代码&#xff1a;&#xff1a; <template><!-- jsmind容器 --><divid"jsmi…...

yarn按包的时候报错 ../../../package.json: No license field

运行 yarn config list 然后运行 yarn config set strict-ssl false 之后yarn就成功了...

【Python从入门到进阶】51、电影天堂网站多页面下载实战

接上篇《50、当当网Scrapy项目实战&#xff08;三&#xff09;》 上一篇我们讲解了使用Scrapy框架在当当网抓取多页书籍数据的效果&#xff0c;本篇我们来抓取电影天堂网站的数据&#xff0c;同样采用Scrapy框架多页面下载的模式来实现。 一、抓取需求 打开电影天堂网站&…...

苹果CMS影视APP源码,二开版本带视频教程

编译app教程 工具下载&#xff1a;Android Studio 官网地址&#xff1a;https://developer.android.google.cn/studio/ 环境设置&#xff1a; 设置中文&#xff1a;https://blog.csdn.net/qq_37131111/article/details/131492844 汉化包找最新的下载就行了&#xff0c;随便下载…...

Zigbee技术在智能农业领域的应用研究

Zigbee技术在智能农业领域的应用研究 **摘要&#xff1a;**随着现代信息技术的飞速发展&#xff0c;智能农业已成为当今农业发展的新趋势。Zigbee技术作为一种低功耗、低成本的无线通信技术&#xff0c;在智能农业领域具有广泛的应用前景。本文深入分析了Zigbee技术的原理和特…...

Spring Cloud Gateway 中GET请求能正常访问,POST请求出现Unable to handle DataBuffer

报错信息如下&#xff1a; java.lang.IllegalArgumentException: Unable to handle DataBuffer of type class org.springframework.http.server.reactive.UndertowServerHttpRequest$UndertowDataBufferat org.springframework.cloud.gateway.filter.NettyRoutingFilter.getB…...

什么是git? 初步认识git 如何使用git

Git是什么&#xff1f; Git 是分布式版本控制系统&#xff0c;可以有效&#xff0c;高速地处理从很小到非常大地项目版本管理&#xff0c;分布式相比于集中式的最大区别在于开发者可以提交到本地&#xff0c;每个开发者可以通过克隆&#xff0c;在本地机器上拷贝一个完整的Git …...

Douyin视频详情数据API接口(视频详情,评论)

抖音官方并没有直接提供公开的视频详情数据采集API接口给普通用户或第三方开发者。抖音的数据采集通常受到严格的限制&#xff0c;以保护用户隐私和平台安全。 请求示例&#xff0c;API接口接入Anzexi58 如果您需要获取抖音视频详情数据&#xff0c;包括评论、点赞等&#xff…...

MySQL 索引:索引为什么使用 B+树?

Hash 索引不支持顺序和范围查询&#xff1b; 二叉查找树(BST)&#xff1a;解决了排序的问题&#xff0c;极端情况下可能会退化成线性链表&#xff0c;查询效率急剧下降&#xff1b; 平衡二叉树(AVL) &#xff1a;通过旋转解决了平衡的问题&#xff0c;但是旋转操作效率太低&am…...

2024年第四届天府杯全国大学生数学建模竞赛B题思路

B题&#xff1a;新质生产力引领下的企业生产与发展策略优化 问题背景 随着技术的飞速发展&#xff0c;新质生产力如人工智能、大数据分析、物联网等技术被广泛应用于生产和服务过程中&#xff0c;极大地提高了生产效率和产品质量&#xff0c;改变了传统的生产与经营模式。一家…...

c++部分题

const关键字与宏定义的区别是什么&#xff1f; const关键字和宏定义在功能上有相似之处&#xff0c;但在实现和使用上有很大的区别。 作用域和类型安全性&#xff1a; const关键字定义的常量具有作用域和类型安全性。它们的作用域仅限于声明它们的块&#xff0c;并且在编译时会…...

验证回文串

如果在将所有大写字符转换为小写字符、并移除所有非字母数字字符之后&#xff0c;短语正着读和反着读都一样。则可以认为该短语是一个 回文串 。 字母和数字都属于字母数字字符。 给定一个字符串 s&#xff0c;如果它是 回文串 &#xff0c;返回 true &#xff1b;否则&#…...

vue2高德地图选点

<template><el-dialog :title"!dataForm.id ? 新建 : isDetail ? 详情 : 编辑" :close-on-click-modal"false" :visible.sync"show" class"rv-dialog rv-dialog_center" lock-scroll width"74%" :before-close&q…...

Gitflow:一种依据 Git 构建的分支管理工作流程模式

文章目录 前言Gitflow 背景Gitflow 中的分支模型Gitflow 的版本号管理简单模拟 Gitflow 工作流 前言 Gitflow 工作流是一种版本控制流程&#xff0c;主要适用于较大规模的团队。这个流程在团队中进行合作时可以避免冲突&#xff0c;并能快速地完成项目&#xff0c;因此在很多软…...

利用云手机技术,开拓海外社交市场

近年来&#xff0c;随着科技的不断进步&#xff0c;云手机技术逐渐在海外社交营销领域崭露头角。其灵活性、成本效益和全球性特征使其成为海外社交营销的利器。那么&#xff0c;究竟云手机在海外社交营销中扮演了怎样的角色呢&#xff1f; 首先&#xff0c;云手机技术能够消除地…...

脚本实现Ubuntu设置屏幕无人操作,自动黑屏

使用 xrandr 命令可以实现对屏幕的控制&#xff0c;包括调整分辨率、旋转屏幕以及关闭屏幕等。要实现 Ubuntu 设置屏幕在无人操作一段时间后自动黑屏&#xff0c;非待机&#xff0c;并黑屏后点击触摸屏可以唤醒屏幕&#xff0c;可以借助 xrandr 命令来实现。 首先&#xff0c;…...

16.JRE和JDK

程序员在编写代码的时候其实是需要一些环境&#xff0c;例如我们之前写的HelloWorld。我们需要的东西有JVM、核心类库、开发工具。 1、JVM&#xff08;Java Virtual Machine&#xff09;&#xff1a;Java虚拟机&#xff0c;真正运行Java程序的地方。没有虚拟机&#xff0c;代码…...

C++从入门到精通——命名空间

命名空间 前言一、命名空间引例什么是命名空间 二、命名空间定义正常的命名空间定义嵌套的命名空间多个相同名称的命名空间 三、命名空间使用加命名空间名称及作用域限定符使用using将命名空间中某个成员引入使用using namespace 命名空间名称引用引用命名空间和引用头文件有什…...

通义千问3-4B-Instruct-2507调优技巧:提高指令遵循准确率

通义千问3-4B-Instruct-2507调优技巧&#xff1a;提高指令遵循准确率 通义千问3-4B-Instruct-2507&#xff0c;这个听起来有点长的名字&#xff0c;其实是一个特别适合我们普通开发者和爱好者玩转的AI小模型。它只有40亿参数&#xff0c;但阿里在2025年8月把它开源出来的时候&…...

用PyTorch从零搭建U-Net:手把手教你搞定遥感图像分割(附完整代码)

用PyTorch从零搭建U-Net&#xff1a;手把手教你搞定遥感图像分割&#xff08;附完整代码&#xff09; 遥感图像分割是计算机视觉领域的重要应用方向&#xff0c;尤其在农业监测、城市规划、灾害评估等场景中发挥着关键作用。对于刚接触深度学习实践的开发者来说&#xff0c;从…...

用Matlab/Simulink手把手教你设计交错式升压DC-DC转换器(附PI参数整定代码)

从零构建交错式升压DC-DC转换器的MATLAB实战指南 交错式升压拓扑正在新能源领域掀起一场静默革命——当电动汽车的电池管理系统需要稳定升压时&#xff0c;当光伏逆变器要处理不稳定的直流输入时&#xff0c;这种能显著降低电流纹波的结构已成为工程师的秘密武器。但理论图纸与…...

实测MinerU 2.5-1.2B:复杂排版PDF提取效果惊艳,小白也能上手

实测MinerU 2.5-1.2B&#xff1a;复杂排版PDF提取效果惊艳&#xff0c;小白也能上手 1. 引言&#xff1a;为什么需要专业的PDF提取工具 1.1 日常工作中的PDF处理痛点 作为一名经常需要处理学术文献的研究员&#xff0c;我深知PDF文档带来的困扰。上周我尝试用常规工具提取一…...

March7thAssistant智能自动化:星穹铁道游戏效率工具全解析

March7thAssistant智能自动化&#xff1a;星穹铁道游戏效率工具全解析 【免费下载链接】March7thAssistant &#x1f389; 崩坏&#xff1a;星穹铁道全自动 Honkai Star Rail &#x1f389; 项目地址: https://gitcode.com/gh_mirrors/ma/March7thAssistant 在《崩坏&am…...

MuseV虚拟人生成终极指南:从零开始创建高质量虚拟人视频

MuseV虚拟人生成终极指南&#xff1a;从零开始创建高质量虚拟人视频 【免费下载链接】MuseV MuseV: Infinite-length and High Fidelity Virtual Human Video Generation with Visual Conditioned Parallel Denoising 项目地址: https://gitcode.com/GitHub_Trending/mu/Muse…...

智能家居系统部署终极指南:5分钟搞定全流程配置

智能家居系统部署终极指南&#xff1a;5分钟搞定全流程配置 【免费下载链接】operating-system :beginner: Home Assistant Operating System 项目地址: https://gitcode.com/gh_mirrors/op/operating-system Home Assistant Operating System&#xff08;原HassOS&…...

别再傻傻分不清!一文讲透华为设备CRU与FRU区别及SmartKit工具的正确打开方式

华为设备维护进阶指南&#xff1a;CRU与FRU的深度解析及SmartKit高效应用 在数据中心运维和IT设备管理领域&#xff0c;华为设备的可靠性和性能一直备受认可。然而&#xff0c;即便是经验丰富的运维团队&#xff0c;在面对设备部件更换决策时&#xff0c;也常常陷入概念混淆和操…...

Spring Boot 与 GraphQL 2.0 集成:构建现代化 API

Spring Boot 与 GraphQL 2.0 集成&#xff1a;构建现代化 API 引言 在现代 Web 开发中&#xff0c;API 设计变得越来越重要。传统的 RESTful API 在面对复杂的数据查询需求时&#xff0c;往往会面临过度获取或获取不足的问题。GraphQL 作为一种新型的 API 查询语言&#xff0c;…...

Linux文件系统驱动实战:exfat-nofuse跨平台存储解决方案全解析

Linux文件系统驱动实战&#xff1a;exfat-nofuse跨平台存储解决方案全解析 【免费下载链接】exfat-nofuse Android ARM Linux non-fuse read/write kernel driver for exFat and VFat Android file systems 项目地址: https://gitcode.com/gh_mirrors/ex/exfat-nofuse 开…...