uniapp 表单使用Uview校验 包括城市选择器

<view><!-- 注意,如果需要兼容微信小程序,最好通过setRules方法设置rules规则 --><u--form labelPosition="left" :model="model1" :rules="rules" ref="uForm" labelWidth="174"><u-form-item label="身份选择" prop="userInfo.sex" borderBottom @click="showSex = true; " 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-item label="真实姓名" prop="userInfo.name" borderBottom ref="item1"><u--input v-model="model1.userInfo.name" border="none" placeholder="请输入您的姓名"></u--input></u-form-item><u-form-item label="所在城市" prop="userInfo.city" borderBottom @click="show1 = true; " ref="item1"><u--input v-model="model1.userInfo.city" disabled disabledColor="#ffffff" placeholder="请选择所在城市"border="none"></u--input><u-icon slot="right" name="arrow-right"></u-icon></u-form-item><u-form-item label="执业机构" prop="userInfo.jigou" borderBottom ref="item1"><u--input v-model="model1.userInfo.jigou" border="none" placeholder="请输入您的所在机构"></u--input></u-form-item></u--form><u-action-sheet :show="showSex" :actions="actions" @close="showSex = false"@select="sexSelect"></u-action-sheet><view class=""><u-picker :show="show1" ref="uPicker" :columns="cityList" @confirm="cityConfirm" @cancel="cancel()" itemHeight="70"@change="changeHandler"></u-picker></view></view>
<script>import cityData from '@/utils/city.js'export default {data() {return {showSex: false,model1: {userInfo: {name: '',sex: '',city: '',jigou:''},},actions: [{name: '医生',},{name: '员工',},],cityList: [],cityLevel1: [],cityLevel2: [],cityLevel3: [],areaname:'',show1: false,rules: {'userInfo.name': {type: 'string',required: true,message: '请填写姓名',trigger: ['blur', 'change']},'userInfo.sex': {type: 'string',max: 2,required: true,message: '请选择身份',trigger: ['blur', 'change']},'userInfo.jigou': {type: 'string',required: true,message: '请填写机构',trigger: ['blur', 'change']},},radio: '',switchVal: false};},onReady() {//如果需要兼容微信小程序,并且校验规则中含有方法等,只能通过setRules方法设置规则。this.$refs.uForm.setRules(this.rules)},onLoad() {// 城市选择器初始化this.initCityData();},methods: {sexSelect(e) {console.log(e)this.model1.userInfo.sex = e.namethis.$refs.uForm.validateField('userInfo.sex')},citySelect(e) {console.log(e)this.model1.userInfo.city = e.namethis.$refs.uForm.validateField('userInfo.city')},// 城市选择器initCityData() {// 遍历城市jscityData.forEach((item1, index1) => {let temp2 = [];this.cityLevel1.push(item1.provinceName);let temp4 = [];let temp3 = [];// 遍历市item1.cities.forEach((item2, index2) => {temp2.push(item2.cityName);// 遍历区item2.counties.forEach((item3, index3) => {temp3.push(item3.countyName);})temp4[index2] = temp3;temp3 = [];})this.cityLevel3[index1] = temp4;this.cityLevel2[index1] = temp2;})// 选择器默认城市this.cityList.push(this.cityLevel1, this.cityLevel2[0], this.cityLevel3[0][0]);console.log(this.cityList)}, // 选中时执行changeHandler(e) {const {columnIndex,index,indexs,value,values,// 微信小程序无法将picker实例传出来,只能通过ref操作picker = this.$refs.uPicker} = e;if (columnIndex === 0) { // 选择第一列数据时// 设置第二列关联数据picker.setColumnValues(1, this.cityLevel2[index]);// 设置第三列关联数据picker.setColumnValues(2, this.cityLevel3[index][columnIndex]);} else if (columnIndex === 1) { // 选择第二列数据时// 设置第三列关联数据picker.setColumnValues(2, this.cityLevel3[indexs[0]][index]);}},// 单击确认按钮时执行cityConfirm(e) {// 输出数组 [省, 市, 区]console.log(e.value);this.areaname = e.valuethis.cityName = e.value.join("-");// 隐藏城市选择器console.log(this.cityName);this.show1 = false;this.model1.userInfo.city = this.cityName},cancel() {this.show1 = false},},}
</script>
	/deep/ .u-popup__content {width: 100%;height: 800rpx;}/deep/.u-icon__icon {color: #1FCFC9 !important;font-size: 32rpx !important;}/deep/ .u-action-sheet__item-wrap button {background: #fff !important;}/deep/ .u-action-sheet__item-wrap button::after {border: none;}/deep/.u-form {display: flex;flex-direction: column;align-items: center;width: 690rpx;margin: auto;margin-top: 48rpx;.u-form-item {width: 100%;}}/deep/ .u-form-item__body {width: 100%;height: 120rpx !important;display: flex;align-items: center;justify-content: space-between;}/deep/ .u-input__content__field-wrapper__field {color: #333 !important;font-family: YouSheShaYuFeiTeJianKangTi !important;font-size: 28rpx !important;}/deep/ .u-form-item__body__left__content__label {color: #333 !important;font-family: YouSheShaYuFeiTeJianKangTi !important;font-size: 28rpx !important;}

city.js资源已上传

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

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

相关文章

Python中csr_matrix的两种初始化方法

本文以csr_matrix为例来说明sparse矩阵的使用方法&#xff0c;其他类型的sparse矩阵可以参考https://docs.scipy.org/doc/scipy/reference/sparse.html csr_matrix是Compressed Sparse Row matrix的缩写组合&#xff0c;下面介绍其两种初始化方法 csr_matrix((data, (row_ind…

concat() 函数

concat(某一具体的值或数组对象) 作用&#xff1a;将括号里的内容连接在一起注意&#xff1a; &#xff08;1&#xff09;多个具体的值或数组对象用逗号隔开 &#xff08;2&#xff09;select 语句返回的结果也是个数组&#xff0c;所以 select 语句可以写在 concat 函数的括号…

【操作系统】-寄存器-具有记忆功能的元器件

为什么要使用寄存器 现代电子计算机用二进制来表示数字&#xff0c;人类发明了触发器&#xff0c;每个触发器可以保存1比特&#xff0c;为了保存一个较大的二进制数&#xff0c;组合一起就是新的元器件&#xff0c;称为寄存器&#xff08;register&#xff09;&#xff0c;或者…

Python读取文件里内容

如果要读取一个文件里的内容是 # 文件名&#xff1a;db.txt 1 2 3 4代码如下 import requests f open("db.txt", mode"rb") content f.read() f.close()data content.decode(utf-8)# 存到 list 里 data_list data.split(\r\n) print(data_list)# 结果…

Docker-部署、镜像容器管理、commit

安装部署 一、查询版本信息 命令说明docker version查看服务器与客户端版本docker info查看docker服务配置信息 二、安装部署 官网地址&#xff1a;Install Docker Engine | Docker Docs 1、卸载旧的版本 sudo yum remove docker \docker-client \docker-client-latest \…

MySQL-7.mysql约束

约束用于确保数据库中的数据满足特定的商业规则。 MySQL约束包含五种&#xff1a;not null、unique、primary key、foreign key、check 7.1 primary key 主键 字段名 字段类型 primary key 用于唯一的标识表的行数据&#xff0c;当定义主键约束后&#xff0c;该列不能重复。 pr…

力扣经典150题第九题:跳跃游戏

目录 1. 简介2. 问题描述3. 解题思路方法一&#xff1a;贪心算法 4. 算法实现方法一&#xff1a;贪心算法 5. 示例与测试6. 总结与展望7. 结语 1. 简介 本篇博客将讨论力扣经典150题中的跳跃游戏问题。给定一个非负整数数组 nums&#xff0c;数组中的每个元素代表在该位置可以…

perl 交叉编译

前言 Perl是一种高级、通用、解释型、动态的编程语言。Perl设计的初衷是为了更好地处理文本处理任务&#xff0c;但随着时间的发展&#xff0c;现在它已经变成了一种强大的一般目的编程语言。Perl支持面向过程和面向对象的编程风格。 Perl的特点&#xff1a; 强大的字符串处…

ROC与决策树介绍

ROC与决策树介绍 一、ROC介绍 ROC&#xff08;Receiver Operating Characteristic&#xff09;曲线&#xff0c;即受试者工作特征曲线&#xff0c;是一种用于评估二元分类器性能的工具。ROC曲线起源于信号检测理论&#xff0c;后来被广泛用于机器学习和统计学习中的分类问题。…

第十课 Excel

最上方标题栏&#xff1a; 显示共工作薄名称&#xff0c;如果显示兼容模式是没有办法使用高级功能的。分辨高版本和低版本可以通过后缀名进行分辨&#xff1b;显示xlsx就是高版本工作薄&#xff0c;如果显示xls的话就是低版本工作薄了。如果同事老板都使用的是低版本的话我们发…

VM-UNet: Vision Mamba UNet for Medical Image Segmentation

VM-UNet: Vision Mamba UNet for Medical Image Segmentation VM-UNet&#xff1a;基于视觉Mamba UNet架构的医学图像分割 论文链接&#xff1a;http://arxiv.org/abs/2402.02491 代码链接&#xff1a;https://github.com/JCruan519/VM-UNet 1、摘要 文中利用状态空间模型SS…

【攻防世界】Confusion1

php的标志是大象&#xff0c;Python的标志是蛇 。Python 的 Flask 框架( Flask 使用 Jinja2 作为模板引擎 ) 点进register.php 输入{{3*4}} 输入 {{config}} 也有回显&#xff0c;ssti 判断是否存在ssti注入&#xff1a; 1. {{8*8}} 2. {{config}} 过滤了关键字&#xff0…

人工智能前沿成科技竞争新高地

以下文章来源&#xff1a;经济参考报 近日&#xff0c;首届中国具身智能大会&#xff08;CEAI 2024&#xff09;在上海举行。作为人工智能领域的前沿热点&#xff0c;具身智能正逐步走进现实&#xff0c;成为当前全球科技竞争的新高地、未来产业的新赛道、经济发展的新引擎。 “…

Go语言创建HTTP服务器

Web服务器可提供网页、Web服务和文件,而Go语言为创建Web服务器提供了强大的支持。 1.通过Hello World Web 服务器宣告您的存在 标准库中的net/http包提供了多种创建HTTP服务器的方法,它还提供了一个基本的路由器。 package mainimport ("net/http" )func helloWo…

vue3中项目优化(Web Worker的使用)

1.Web Worker的作用 本人的理解&#xff1a;js是单线程执行代码&#xff0c;也就是代码需要从上往下执行&#xff0c;而使用Web Worker后相当于分了一条线程出来执行代码&#xff0c;那么两条线程肯定是比一条线程执行的快。 2.新建Web Worker文件 在public文件夹下新建work…

Linux:gcc

Linux&#xff1a;gcc gcc概述语言发展史gcc的编译过程预处理编译汇编 gcc的链接过程动态库与静态库 gcc概述 GCC&#xff08;英文全拼&#xff1a;GNU Compiler Collection&#xff09;是 GNU 工具链的主要组成部分&#xff0c;是一套以 GPL 和 LGPL 许可证发布的程序语言编译…

汽车变速器原理?

汽车的变速器是负责调整发动机输出转速与车辆行驶速度匹配的关键部件。它的基本原理涉及到两个主要部分&#xff1a;齿轮组和离合器&#xff08;对于手动变速器&#xff09;或液力变矩器&#xff08;对于自动变速器&#xff09;。 齿轮组&#xff08;Gear System&#xff09;&a…

SpringBoot整合RabbitMQ-应答模式

一、应答模式 RabbitMQ 中的消息应答模式主要包括两种&#xff1a;自动应答&#xff08;Automatic Acknowledgement&#xff09;和手动应答&#xff08;Manual Acknowledgement&#xff09;。&#xff08;一般交换机发送消息&#xff0c;RabbitMQ只有在接收到消费者的确认后才…

LeetCode-139. 单词拆分【字典树 记忆化搜索 数组 哈希表 字符串 动态规划】

LeetCode-139. 单词拆分【字典树 记忆化搜索 数组 哈希表 字符串 动态规划】 题目描述&#xff1a;解题思路一&#xff1a;Python动态规划五部曲&#xff1a;定推初遍举【先遍历背包 后遍历物品】必须是排列解题思路二&#xff1a;Python动态规划版本二解题思路三&#xff1a;回…

C++——优先级队列

前言&#xff1a;这篇文章我们继续来分享一个c的容器——优先级队列。 一.理解优先级 何为优先级一说&#xff1f;实际上就是有顺序的意思。 优先级队列&#xff0c;即有顺序的队列&#xff0c;是一个无需我们自己进行排序操作&#xff0c;在数据传入时就会由容器自己排好序的…