vue中input框只能輸入漢字校驗(yàn)的問題
更新時間：2026年01月12日 14:20:55 作者：嗷嗚~小腦斧
文章介紹了在Vue中實(shí)現(xiàn)input框只能輸入4個漢字的校驗(yàn)方法,關(guān)鍵在于使用`@blur`事件觸發(fā)校驗(yàn)方法`onIptCN`,并在方法中判斷輸入內(nèi)容是否符合要求,只有當(dāng)輸入內(nèi)容為4個漢字時,新建按鈕才可點(diǎn)擊
vue中input框只能輸入漢字校驗(yàn)
input只能輸入4個字符
且只能為中文，當(dāng)填寫完之后不符合條件，立即提示
<div class="fillContent" v-if="ruleList.studentName == '其他'">
<div class="values">
<input
v-model="studentOther"
class="iptNum"
maxlength="4"
placeholder="請輸入學(xué)生姓名"
@blur="onIptCN"
/>
</div>
</div>
<div class="confirmButton">
<div :class="!checkNumber || !checkChinese ? 'banBtn' : ''" @click="onInsert">
新建檔案
</div>
</div>@blur="onIptCN"是關(guān)鍵，onIptCN 可自己命名
!checkNumber || !checkChinese 只有當(dāng) 數(shù)字和中文校驗(yàn)沒有問題之后才可點(diǎn)擊新建按鈕
@blur是當(dāng)元素失去焦點(diǎn)時所觸發(fā)的事件
當(dāng)點(diǎn)擊輸入框之外其他地方即失去焦點(diǎn)，需立即提示
<script>
export defalt {
data() {
return{
checkChinese: false,
studentOther:'' //需要使用者自己填寫的學(xué)生姓名
}},
method：{
onIptCN() {
if (this.studentOther && !/.*?[\u4E00-\u9FFF]+.*/.test(this.studentOther)) {
this.$toast("學(xué)生姓名請輸入中文");
this.checkChinese = false;
} else {
this.checkChinese = true;
}
},
}
}
</script>總結(jié)
以上為個人經(jīng)驗(yàn)，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue?this.$router和this.$route區(qū)別解析及路由傳參的2種方式?&&?this.$route
this.$router?相當(dāng)于一個全局的路由器對象,包含了很多屬性和對象（比如?history?對象）,任何頁面都可以調(diào)用其?push(),?replace(),?go()?等方法,本文給大家介紹Vue中this.$router與this.$route的區(qū)別?及push()方法,感興趣的朋友跟隨小編一起看看吧2023-10-10
在項(xiàng)目開發(fā)過程中,可能需要實(shí)現(xiàn)以下場景,未讀消息提示、報警信息、消息通知等,下面這篇文章主要給大家介紹了關(guān)于vue通知提醒消息的相關(guān)資料,需要的朋友可以參考下2023-03-03
Element-UI清空表單及驗(yàn)證不生效的問題解決
本文主要介紹了Element-UI清空表單及驗(yàn)證不生效的問題解決,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-08-08
vue多頁面項(xiàng)目中路由使用history模式的方法
這篇文章主要介紹了vue多頁面項(xiàng)目中路由如何使用history模式，本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值,需要的朋友可以參考下2019-09-09
在現(xiàn)代Web開發(fā)中,前端框架的使用越來越普遍,而Vue.js作為一款優(yōu)秀的前端框架,其生態(tài)系統(tǒng)中有著非常重要的一個組件——Vue Router,在本篇博客中,我們將深入探討如何在Vue Router中定義路由規(guī)則,需要的朋友可以參考下2024-12-12
最近在學(xué)習(xí)Vue,感覺methods還是有必有總結(jié)一下的,下面這篇文章主要給大家介紹了關(guān)于3分鐘迅速學(xué)會Vue中methods方法使用技巧的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-02-02
vue.js動態(tài)修改background-image問題
這篇文章主要介紹了vue.js動態(tài)修改background-image問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08
文章介紹了如何在Vue.js中獲取URL參數(shù)、定義和暴露公共方法、在main.js中引入并注冊到Vue實(shí)例原型,以及頁面中調(diào)用這些方法,作者分享了個人經(jīng)驗(yàn),希望對大家有所幫助2024-12-12
這篇文章主要介紹了vue如何監(jiān)聽頁面的滾動的開始和結(jié)束，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-07-07
本文將詳細(xì)介紹如何在 Vue2 項(xiàng)目中對 Vxe Table 進(jìn)行封裝,并給出實(shí)際使用示例,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2025-04-04