写点什么

uniapp 如何将输入值转成大写

作者:CRMEB
  • 2022 年 5 月 24 日
  • 本文字数:955 字

    阅读完需:约 3 分钟

uniapp 如何将输入值转成大写

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



本教程操作环境: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
}
}
},
复制代码

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

链接: https://pan.baidu.com/s/14G-bpVthImHD4eosZUNSFA?pwd=yu27提取码: yu27
复制代码

百度云链接不稳定,随时可能会失效,大家抓紧保存哈。

如果百度云链接失效了的话,请留言告诉我,我看到后会及时更新~

开源地址

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

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

用户头像

CRMEB

关注

还未添加个人签名 2021.11.02 加入

CRMEB就是客户关系管理+营销电商系统实现公众号端、微信小程序端、H5端、APP、PC端用户账号同步,能够快速积累客户、会员数据分析、智能转化客户、有效提高销售、会员维护、网络营销的一款企业应用

评论

发布
暂无评论
uniapp 如何将输入值转成大写_CRMEB_InfoQ写作社区