How to convert input value to uppercase in uniapp

Uniapp's method of converting input values ​​to uppercase: first filter out unnecessary characters, retaining only numbers and letters; then pass "if (!/^[A-Z\d] $/.test(val)) {...}" method to convert characters from lower case to upper case; finally output the value through return.

The operating environment of this tutorial: windows7 system, uni-app v3 version. This method is suitable for all brands of computers.

Recommended (free): uni-app development tutorial

uni-app monitors input input, changes lowercase to uppercase, and filters out unwanted characters

When doing input filtering and monitoring, use watch to listen to change the value. The value on the interface will not change according to your thinking. The following monitoring is just an example. Other filtering characters are needed. The regular expression needs to be modified.

Provided here is that when monitoring input, it can only be numbers and letters, and lowercase letters must be changed to uppercase letters. No nonsense, just go to the code:

The input box is ready, because you need to monitor the input yourself, so the v-model is split and used. The input method is the key

<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, &#39;&#39;);
}
if (!/^[A-Z\d]+$/.test(val)) {// 再进行转换，小写转为大写
val = val.toUpperCase();
}
this.formData.vin = val; //这里对应的是value绑定的变量
return val; // 最后输出值，要保证输入框的值和value绑定的值一致
},

Because I am completing it here After input filtering, other operations will be performed because the formData.vin variable needs to be monitored again in the watch.

Some friends may have questions, why not operate directly in the above vinInput method? That is because input can only monitor input, but if you fill in the data in other ways, there is no way. Carry out corresponding operations.

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

The above is the detailed content of How to convert input value to uppercase in uniapp. For more information, please follow other related articles on the PHP Chinese website!