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-b...
提取码: yu27
百度云链接不稳定，随时可能会失效，大家抓紧保存哈。

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

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

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