vue input 輸入校驗(yàn)字母數(shù)字組合且長(zhǎng)度小于30的實(shí)現(xiàn)代碼
更新時(shí)間：2018年05月16日 10:30:12 作者：zghgchao
這篇文章主要介紹了vue input 校驗(yàn)字母數(shù)字組合且長(zhǎng)度小于30的實(shí)現(xiàn)代碼，文章給大家補(bǔ)充介紹了在Vue.Js下使用el-input框只能輸入數(shù)字并限制位數(shù)并且限制中文輸入以及粘貼功能，感興趣的朋友跟隨腳本之家小編一起看看吧
下面一段代碼給大家分享vue input 校驗(yàn)字母數(shù)字組合且長(zhǎng)度小于30，具體代碼如下所示：
<Input v-model="form.glhm" placeholder="請(qǐng)輸入關(guān)聯(lián)交易號(hào)" style="width:240px" @on-blur="validateJyh(form.glhm)"></Input>
validateJyh(glhm){//校驗(yàn)關(guān)聯(lián)交易號(hào)
var reg = /^[A-Za-z0-9]{1,30}$/;
if(!reg.test(glhm)){
this.$Message.error("請(qǐng)輸入字母或數(shù)字組成的交易關(guān)聯(lián)號(hào)");
this.form.glhm = '';
}
},
下面看下在Vue.Js下使用el-input框只能輸入數(shù)字并限制位數(shù)并且限制中文輸入以及粘貼
var tr = document.getElementById("Id1"), // 取得ID為Id1的tr對(duì)象
inps = tr.getElementsByTagName('input'); // 從tr 對(duì)象中獲取所有input對(duì)象
for(var i = 0, len = inps.length; i < len; i++) {
inps[i].value = ''; // 將每一個(gè)input的value置為空
}
document.getElementById("t").getElementsByTagName('input')[0].value='';
輸入中文置空的方法
<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 ='';
}, 500);
}
}
},
總結(jié)
以上所述是小編給大家介紹的vue input 校驗(yàn)字母數(shù)字組合且長(zhǎng)度小于30的實(shí)現(xiàn)代碼，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
相關(guān)文章
Vue實(shí)現(xiàn)渲染數(shù)據(jù)后控制滾動(dòng)條位置(推薦)
這篇文章主要介紹了Vue實(shí)現(xiàn)渲染數(shù)據(jù)后控制滾動(dòng)條位置，本文通過(guò)圖文并茂的形式給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-12-12
vue+elementui通用彈窗的實(shí)現(xiàn)(新增+編輯)
這篇文章主要介紹了vue+elementui通用彈窗的實(shí)現(xiàn)(新增+編輯)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2021-01-01
Vue如何實(shí)現(xiàn)文件預(yù)覽和下載功能的前端上傳組件
在Vue.js項(xiàng)目中,使用ElementUI的el-upload組件可以輕松實(shí)現(xiàn)文件上傳功能,通過(guò)配置組件參數(shù)和實(shí)現(xiàn)相應(yīng)的方法,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-09-09
vue-calendar-component 封裝多日期選擇組件的實(shí)例代碼
這篇文章主要介紹了vue-calendar-component 封裝多日期選擇組件,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-12-12
這篇文章主要介紹了Vue 的異常處理機(jī)制，幫助大家更好的理解和學(xué)習(xí)vue框架，感興趣的朋友可以了解下2020-11-11
vue報(bào)錯(cuò)"vue-cli-service‘不是內(nèi)部或外部命令,也不是...”的解決辦法
這篇文章主要介紹了vue報(bào)錯(cuò)"vue-cli-service‘不是內(nèi)部或外部命令，也不是...”的解決辦法,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-01-01
基于 Vue 實(shí)現(xiàn)一個(gè)酷炫的 menu插件
本文給大家介紹基于 Vue 實(shí)現(xiàn)一個(gè)酷炫的 menu插件，此篇教程需要大家具備一定的css和vue基礎(chǔ)知識(shí)，本文分步驟給大家介紹的非常詳細(xì)，需要的朋友參考下吧2017-11-11
computed作為計(jì)算屬性其作用是描述響應(yīng)式數(shù)據(jù)的復(fù)雜邏輯計(jì)算，當(dāng)所依賴的響應(yīng)式數(shù)據(jù)發(fā)生改變時(shí)計(jì)算屬性會(huì)重新計(jì)算，更新邏輯計(jì)算的結(jié)果，這篇文章主要介紹了Vue.js中的computed的功能設(shè)計(jì),需要的朋友可以參考下2023-06-06
這篇文章主要介紹了Vue 3.0 全家桶搶先體驗(yàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-04-04
詳解Vue.js在頁(yè)面加載時(shí)執(zhí)行某個(gè)方法
這篇文章主要介紹了詳解Vue.js在頁(yè)面加載時(shí)執(zhí)行某個(gè)方法的實(shí)現(xiàn)代碼，本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2018-11-11