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

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

May 29, 2018 pm 02:55 PM
input 校驗 輸入

這次帶給大家如何操作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

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

Video Face Swap

Video Face Swap

使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱門文章

<🎜>:泡泡膠模擬器無窮大 - 如何獲取和使用皇家鑰匙
3 週前 By 尊渡假赌尊渡假赌尊渡假赌
北端:融合系統,解釋
3 週前 By 尊渡假赌尊渡假赌尊渡假赌
Mandragora:巫婆樹的耳語 - 如何解鎖抓鉤
3 週前 By 尊渡假赌尊渡假赌尊渡假赌

熱工具

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

熱門話題

Java教學
1665
14
CakePHP 教程
1424
52
Laravel 教程
1322
25
PHP教程
1270
29
C# 教程
1249
24
停用Win11輸入體驗指南 停用Win11輸入體驗指南 Dec 27, 2023 am 11:07 AM

最近有很多win11遇到了輸入體驗對話框總是閃爍,關也關不掉的問題,這其實是由於win11的默認系統服務和組件導致的,我們需要先禁用相關服務,再禁用輸入體驗服務就可以解決了,下面一起來試試看。 win11輸入體驗怎麼關閉:第一步,右鍵開始選單,開啟「任務管理器」第二步,依序找到「CTF載入程式」、「MicrosoftIME」和「服務主機:Textinputmanagementservice」三個進程,右鍵「結束任務」第三步,打開開始選單,在上方搜尋並打開「服務」第四步,在其中找到「Textinp

Windows輸入遇到掛起或記憶體使用率高的問題[修復] Windows輸入遇到掛起或記憶體使用率高的問題[修復] Feb 19, 2024 pm 10:48 PM

Windows的輸入體驗是關鍵的系統服務,負責處理來自各種人機介面設備的使用者輸入。它在系統啟動時自動啟動,在背景運行。然而,有時候這個服務可能會出現自動掛起或佔用過多記憶體的情況,導致系統效能下降。因此,及時監控和管理這個進程是至關重要的,以確保系統的效率和穩定性。在這篇文章中,我們將分享如何解決Windows輸入體驗被掛起或導致記憶體使用率高的問題。 Windows輸入體驗服務沒有使用者介面,但它與處理與輸入裝置相關的基本系統任務和功能有密切關聯。它的作用是幫助Windows系統理解使用者輸入的每一

laravel input隱藏域怎麼實現 laravel input隱藏域怎麼實現 Dec 12, 2022 am 10:07 AM

laravel input隱藏域的實作方法:1、找到並開啟Blade模板檔案;2、在Blade模板中使用method_field方法來建立隱藏域,其建立語法為「{{ method_field('DELETE') }}」。

vue3怎麼封裝input元件和統一表單數據 vue3怎麼封裝input元件和統一表單數據 May 12, 2023 pm 03:58 PM

準備工作用vuecreateexample建立項目,參數大概如下:用原生input原生的input,主要是value和change,資料在change的時候需要同步。 App.tsx如下:import{ref}from'vue';exportdefault{setup(){//username就是資料constusername=ref('張三');//輸入框變化的時候,同步資料constonInput=;return( )=>({

點選input框沒有遊標怎麼辦 點選input框沒有遊標怎麼辦 Nov 24, 2023 am 09:44 AM

點選input框沒有遊標的解決方法:1、確認輸入框焦點;2、清除瀏覽器快取;3、更新瀏覽器;4、使用JavaScript;5、檢查硬體設備;6、檢查輸入框屬性;7、調試JavaScript程式碼;8、檢查頁面其他元素;9、考慮瀏覽器相容性。

解決win11搜尋欄輸入問題 解決win11搜尋欄輸入問題 Dec 26, 2023 pm 12:07 PM

搜尋列是win11系統中非常好用的功能,可以幫助我們找到想要的設定、功能和服務等。但是有的朋友遇到了win11搜尋欄無法輸入的情況,我們可以在註冊表中修改相關資料來解決,下面就跟著小編一起來解決一下吧。 win11搜尋列無法輸入怎麼辦1、首先我們可以按下鍵盤的「win+r」調出運行。 2、然後在其中輸入「regedit」回車確定開啟註冊表編輯器。 3、然後在上方路徑中輸入「HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Windows\CurrentVersion\Expl

word矩陣怎麼輸入 word矩陣怎麼輸入 Mar 19, 2024 pm 11:00 PM

矩陣是我們經常使用和遇到的公式,但是在word裡如何輸入矩陣你會操作嗎?很多人可能沒有接觸過,遇到使用的時候就會覺得困惑,那麼,這裡我們就跟大家分享一下word矩陣怎麼輸入。希望經過這個技巧的分享,能夠帶給你幫助和啟發。 1.首先,新建並開啟一個word文檔,為了示範操作,我們就使用空白文檔進行示範。如下圖所示:2.我們要輸入矩陣,需要在選單列找到【插入】按鈕,這個按鈕可以插入很多內容選項,例如圖片等都是從這個選單列完成。 3.點選【插入】之後,我們工具選項右邊看,可以找到【公式】,然後我們點選【

Vue文件中的input框綁定事件詳解 Vue文件中的input框綁定事件詳解 Jun 21, 2023 am 08:12 AM

Vue.js是一種輕量級的JavaScript框架,具有易用、高效和靈活的特點,是目前廣受歡迎的前端框架之一。在Vue.js中,input框綁定事件是十分常見的需求,本文將詳細介紹Vue文件中的input框綁定事件。一、基礎概念在Vue.js中,input框綁定事件指的是將輸入框的值綁定到Vue實例的資料物件中,從而實現輸入和回應的雙向綁定。在Vue.j

See all articles