首頁 >web前端 >js教程 >如何操作vue input輸入校驗字母數字組合且長度小於30

如何操作vue input輸入校驗字母數字組合且長度小於30

php中世界最好的语言
php中世界最好的语言原創
2018-05-29 14:55:146933瀏覽

這次帶給大家如何操作vue input輸入校驗字母數字組合且長度小於30,操作vue input輸入校驗字母數字組合且長度小於30的注意事項有哪些,下面就是實戰案例,一起來看一下。

下面一段程式碼給大家分享vue input 校驗字母數字組合且長度小於30,具體程式碼如下圖:

<Input v-model="form.glhm" placeholder="请输入关联交易号" style="width:240px" @on-blur="validateJyh(form.glhm)"></Input> 
validateJyh(glhm){//校验关联交易号 
    var reg = /^[A-Za-z0-9]{1,30}$/; 
    if(!reg.test(glhm)){ 
     this.$Message.error("请输入字母或数字组成的交易关联号"); 
     this.form.glhm = &#39;&#39;; 
    } 
   },

下面看下在Vue.Js下使用el-input框只能輸入數字並限制位數並且限製中文輸入以及粘貼

var tr = document.getElementById("Id1"), // 取得ID为Id1的tr对象
 inps = tr.getElementsByTagName(&#39;input&#39;); // 从tr 对象中获取所有input对象
for(var i = 0, len = inps.length; i < len; i++) {
 inps[i].value = &#39;&#39;; // 将每一个input的value置为空
}
document.getElementById("t").getElementsByTagName(&#39;input&#39;)[0].value=&#39;&#39;;

輸入中文置空的方法

<el-input
@change="checkNo(searchForm.msel.mselTotalConsumTimes)"
type = "text"
onkeypress="return event.keyCode>=48&&event.keyCode<=57"
size="small"
:maxlength="6"
style="width: 120px"
v-model="searchForm.msel.mselTotalConsumTimes"></el-input>
 次
</el-col>
checkNo(value){
let reg = /^[1-9]\d*$/;
if (value) {
if (value >
999999 || new
RegExp(reg).test(value) ==
false) {
setTimeout(() 
=> {
this.searchForm.msel.mselTotalConsumTimes =&#39;&#39;;
   }, 500);
}
}
},

相信看了本文案例你已經掌握了方法,更多精彩請關注php中文網其它相關文章!

推薦閱讀:

怎麼操作Vue做出高德地圖搭建即時公車應用程式

怎麼使用seajs在require書寫約定

以上是如何操作vue input輸入校驗字母數字組合且長度小於30的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn