首页 > web前端 > uni-app > 正文

uniapp如何将输入值转成大写

藏色散人
发布: 2020-12-09 10:14:22
原创
3839人浏览过
uniapp将输入值转成大写的方法:首先过滤不需要的字符,只保留数字和字母;然后通过“if (!/^[A-Z\d]+$/.test(val)) {...}”方式将字符小写转为大写;最后通过return输出值即可。

uniapp如何将输入值转成大写

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

推荐(免费):uni-app开发教程

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

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

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

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

<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只能监听到输入,但是如果你是其他方式把数据填充进来的,那就没办法进行相应的操作了。

watch: {
'formData.vin'(val) {
this.vinCheck = null; 
// 如果有17位,则开始请求后台,带出数据
if (val.length == 17) {
// do something
}
}
},
登录后复制

 

以上就是uniapp如何将输入值转成大写的详细内容,更多请关注php中文网其它相关文章!

最佳 Windows 性能的顶级免费优化软件
最佳 Windows 性能的顶级免费优化软件

每个人都需要一台速度更快、更稳定的 PC。随着时间的推移,垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是,许多工具可以让 Windows 保持平稳运行。

下载
来源:php中文网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
开源免费商场系统广告
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号