前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
社区首页 >专栏 >uniapp 如何将输入值转成大写

uniapp 如何将输入值转成大写

作者头像
CRMEB商城源码
发布于 2022-05-24 06:59:03
发布于 2022-05-24 06:59:03
1.7K00
代码可运行
举报
文章被收录于专栏:crmebcrmeb
运行总次数:0
代码可运行

uniapp 将输入值转成大写的方法:首先过滤不需要的字符,只保留数字和字母;然后通过 “if (!/^[A-Z\d]+$/.test (val)) {...}” 方式将字符小写转为大写;最后通过 return 输出值即可。

本教程操作环境:windows7 系统、uni-app v3 版本,该方法适用于所有品牌电脑。

uni-app 监听 input 输入,小写变成大写,并且过滤掉不想要的字符

在做 input 输入过滤监听的时候,用 watch 监听改变值,界面上的值会雷打不动的不按照你的思维变化,以下监听只是一个示例,需要其他过滤字符的,需要修改正则表达式。

这里提供,监听输入的时候,只能是数字和字母,并且小写字母要变为大写字母。不废话,直接上代码:

输入框准备完毕,因为要自己监听输入,因此把 v-model 拆分使用,input 的方法是重点

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<input type="text" placeholder="请输入17位VIN码(必填)" maxlength="17" @input="vinInput" :value="formData.vin" />

过滤方法

// 过滤vin输入

vinInput(e) {

let val = e.detail.value;

if (/[^a-zA-Z0-9]/g.test(val)) { // 先过滤不需要的字符,只保留数字和字母

val = val.replace(/[^a-zA-Z0-9]/g, '');

}

if (!/^[A-Z\d]+$/.test(val)) {// 再进行转换,小写转为大写

val = val.toUpperCase();

}

this.formData.vin = val; //这里对应的是value绑定的变量

return val; // 最后输出值,要保证输入框的值和value绑定的值一致

},

因为我这里在完成输入过滤之后,还会进行其他操作,因为还需要在 watch 里面再次监听 formData.vin 这个变量。

可能有小伙伴疑问,为啥不直接在上述的 vinInput 方法直接操作,那是因为 input 只能监听到输入,但是如果你是其他方式把数据填充进来的,那就没办法进行相应的操作了。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
watch: {

'formData.vin'(val) {

this.vinCheck = null; 

// 如果有17位,则开始请求后台,带出数据

if (val.length == 17) {

// do something

}

}

},

源码附件已经打包好上传到百度云了,大家自行下载即可~

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
链接: https://pan.baidu.com/s/14G-bpVthImHD4eosZUNSFA?pwd=yu27

开源地址

码云地址: http://github.crmeb.net/u/defu

Github 地址: http://github.crmeb.net/u/defu

本文系转载,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文系转载,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
必备之常用正则表达式
熟练而优雅的使用正则,对于程序员来讲,实在太有意义了(即便非此类者,也是好处多多);它辅助处理复杂的文本查询和字符串操作,不仅能用之于代码,还能雅之于编辑器,浏览器,Terminal等,实在是编码居家必备之优技。而正则表达式,若要快速掌握也是不易,所以此文存在的意义,即汇集些常用的正则表达式,以备不时之需。 在开篇之前,推荐几篇常看看的文章,以及几个正则表达式编辑器(在线测试工具): 正则表达式30分钟入门教程 59分钟学会正则表达式 8 Regular Expressions You Should Kno
晚晴幽草轩轩主
2018/03/27
7290
一个正则表达式测试(只可输入中文、字母和数字)
  在项目中碰到了正则表达式的运用,正则还是非常强大的,不管什么编程语言,基本上都可以用到。之前在用java时特别是对用户名或密码使用正则非常爽,写脚本上用正则也非常爽,可是到了OC这却把我虐了一把,可能是对OC掌握的不够。这里就罗列了从网上找的很有用的资料,感谢大神们的贡献。 首先举一个例子: 匹配9-15个由字母/数字组成的字符串的正则表达式: NSString * regex = @"^[A-Za-z0-9]{9,15}$"; NSPredicate *pred = [NSPredi
猿人谷
2018/01/17
5.6K0
Vue中常用的校验规则
1、是否合法IP地址 export function validateIP(rule, value,callback) { if(value==''||value==undefined||value==null){ callback(); }else { const reg = /^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.
用户7043603
2022/02/27
1.6K0
今天同事问我,如何将一串字符串中的数字取出来,此时不用正则表达式,更待何时。。。(Unity3D)
一、前言 正则表达式,又称规则表达式。(英语:Regular Expression,在代码中常简写为regex、regexp或RE),计算机科学的一个概念。正则表达式通常被用来检索、替换那些符合某个模式(规则)的文本。 许多程序设计语言都支持利用正则表达式进行字符串操作。 例如,在Perl中就内建了一个功能强大的正则表达式引擎。正则表达式这个概念最初是由Unix中的工具软件(例如sed和grep)普及开的。正则表达式通常缩写成“regex”,单数有regexp、regex,复数有regexps、regex
恬静的小魔龙
2022/08/07
1.1K0
今天同事问我,如何将一串字符串中的数字取出来,此时不用正则表达式,更待何时。。。(Unity3D)
RegExp正则校验之Java及R测试
  正则表达式(英语:Regular Expression)原属于计算机科学的一个概念。正则表达式使用单个字符串来描述、匹配一系列符合某个句法规则的字符串。在很多文本编辑器里边,正则表达式通常被用来检索、替换那些符合某个模式的文本。许多程序设计语言都支持利用正则表达式进行字符串操作。例如,Perl,Shell,R,Java等等。
云海谷天
2022/08/09
7420
RegExp正则校验之Java及R测试
Python网络数据抓取(8):正则表达式
正则表达式是查找文本模式的强大工具。它们就像在 Word 文档上使用 Ctrl-F 一样,但功能比它们强大得多。
数据科学工厂
2024/06/06
1060
Python网络数据抓取(8):正则表达式
20个实用的 TypeScript 单行代码汇总
在今天的文章中,我将与你分享20有用的 TypeScript 单行代码,这些单行代码可以快速的帮助我们提升开发效率,希望对你有用。
PHP开发工程师
2022/07/01
3460
js手机号正则校验_正则表达式验证手机号码格式
这篇文章主要介绍了2022手机号码JS正则表达式验证实例代码,代码简单易懂,非常不错,具有一定的参考借鉴价值 ,需要的朋友可以参考下​
全栈程序员站长
2022/09/29
5.8K0
常用正则表达式大全
一、校验数字的表达式 数字:^[0-9]*$ n位的数字:^\d{n}$ 至少n位的数字:^\d{n,}$ m-n位的数字:^\d{m,n}$ 零和非零开头的数字:^(0|[1-9][
qubianzhong
2019/07/01
1.3K0
python脚本练习(4):正则表达式实例
题目:写一个函数,它使用正则表达式, 确保传入的口令字符串是强口令。强口令的定义是:长度不少于 8 个字符, 同时包含大写和小写字符, 至少有一位数字。你可能需要用多个正则表达式来测试该字符串,以保证它的强度。
AsicWonder
2020/07/16
1.1K0
VUE 过滤输入框中的特殊字符 只保存中文、英文及数字
首先是输入框 绑定好model <el-input placeholder="请输入消息内容" v-model="keyword"></el-input> 然后使用watch监听model的变化 并过滤掉特殊字符 <script> function filterInput(val) { // 这里过滤的是除了中英文和数字的其他字符 return val.replace(/[^a-zA-Z0-9\u4e00-\u9fa5]/, '') } export default { data() {
heasy3
2020/08/02
3.7K0
正则表达式 至少6位-字母,数字,下划线或者数字的正则表达式
  一、校验数字的表达式   数字:^[0-9]*$   n位的数字:^\d{n}$   至少n位的数字:^\d{n,}$   m-n位的数字:^\d{m,n}$   零和非零开头的数字:^(0|1-
宜轩
2022/12/29
3.7K0
正则表达式 语言间通用
正则表达式 语言间通用 一、校验数字的表达式 1. 数字:^[0-9]*$ 2. n位的数字:^\d{n}$ 3. 至少n位的数字:^\d{n,}$ 4. m-n位的数字:^\d{m,n}$
房上的猫
2018/04/03
1K11
正则表达式学习心得
正则表达式算是一门通用的东西,前端后端都能用得到,在某些时候正则表达式也是很方便。
神秘人9527
2022/11/20
2820
js正则表达式校验金额-js正则表达式简单校验方法
  对于字符串的一些操作,可以通过正则表达式来实现。一般的搜索操作想必大家已经学会,今天就来说说它的校验功能,这样可以帮助判断字符串类型或者是其它的组成,比如密码、中文、字符串的组成等。下面就js正则表达式的校验带来内容分享,同时要考虑在js中支持的类型。
宜轩
2022/12/29
9K0
微信小程序正则表达式
Email地址:^\w+([-+.]\w+)@\w+([-.]\w+).\w+([-.]\w+)*$
江一铭
2022/06/17
9610
正则表达式总结
正则表达式是对字符串(包括普通字符(例如,a 到 z 之间的字母)和特殊字符(称为“元字符”))操作的一种逻辑公式,就是用事先定义好的一些特定字符、及这些特定字符的组合,组成一个“规则字符串”,这个“规则字符串”用来表达对字符串的一种过滤逻辑。正则表达式是一种文本模式,模式描述在搜索文本时要匹配的一个或多个字符串。
Dream城堡
2018/09/10
9220
常用正则表达式
  这些正则皆为日常开发总结,一般常用的都用,来源有来自自己总结的,还有的是从网上记录下来的,希望对大家有个帮助,完好正则提高程序性能!
追逐时光者
2019/08/28
1.4K0
正则表达式来了,Excel中的正则表达式匹配示例
当需要在单元格区域中找到某个值时,可以使用MATCH函数。在单元格中查找特定字符串时,FIND函数和SEARCH函数非常方便。如何知道单元格中是否包含与给定模式匹配的信息?显然,可以使用正则表达式。
fanjy
2021/11/10
22.2K0
正则表达式来了,Excel中的正则表达式匹配示例
最全的常用正则表达式
一、校验数字的表达式  1 数字:^[0-9]*$  2 n位的数字:^\d{n}$  3 至少n位的数字:^\d{n,}$  4 m-n位的数字:^\d{m,n}$  5 零和非零开头的数字:^(0
用户8671053
2021/11/02
22.7K0
推荐阅读
相关推荐
必备之常用正则表达式
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
查看详情【社区公告】 技术创作特训营有奖征文
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验