首頁 > web前端 > uni-app > uniapp如何將輸入值轉換成大寫

uniapp如何將輸入值轉換成大寫

藏色散人
發布: 2020-12-09 10:14:22
原創
3610 人瀏覽過

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

因為我在這裡在完成輸入過濾之後,還會進行其他操作,因為還需要在watch裡面再次監聽formData.vin這個變數。

可能有小夥伴疑問,為啥不直接在上述的vinInput方法直接操作,那是因為input只能監聽到輸入,但是如果你是其他方式把數據填充進來的,那就沒辦法進行對應的操作了。

watch: {
&#39;formData.vin&#39;(val) {
this.vinCheck = null; 
// 如果有17位,则开始请求后台,带出数据
if (val.length == 17) {
// do something
}
}
},
登入後複製

 

以上是uniapp如何將輸入值轉換成大寫的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板