vue中input框只能输入汉字校验的问题

更新时间：2026年01月12日 14:20:55 作者：嗷呜~小脑斧

文章介绍了在Vue中实现input框只能输入4个汉字的校验方法,关键在于使用`@blur`事件触发校验方法`onIptCN`,并在方法中判断输入内容是否符合要求,只有当输入内容为4个汉字时,新建按钮才可点击

vue中input框只能输入汉字校验

input只能输入4个字符

且只能为中文，当填写完之后不符合条件，立即提示

   <div class="fillContent" v-if="ruleList.studentName == '其他'">
      <div class="values">
          <input
            v-model="studentOther"
            class="iptNum"
            maxlength="4"
            placeholder="请输入学生姓名"
             @blur="onIptCN"
          />
      </div>
   </div>


   <div class="confirmButton">
      <div :class="!checkNumber || !checkChinese ? 'banBtn' : ''" @click="onInsert">
        新建档案
      </div>
   </div>

@blur="onIptCN"是关键，onIptCN 可自己命名

!checkNumber || !checkChinese 只有当数字和中文校验没有问题之后才可点击新建按钮

@blur是当元素失去焦点时所触发的事件

当点击输入框之外其他地方即失去焦点，需立即提示

<script>

export defalt {
data() {
   return{
   checkChinese: false,
   studentOther:''  //需要使用者自己填写的学生姓名
        }},
method：{
    onIptCN() {
      if (this.studentOther && !/.*?[\u4E00-\u9FFF]+.*/.test(this.studentOther)) {
        this.$toast("学生姓名请输入中文");
        this.checkChinese = false;
        } else {
          this.checkChinese = true;
               }
              },
       }
              }
</script>

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

OpenLayer基于vue的封装使用教程
这篇文章主要介绍了OpenLayer基于vue的封装使用,openlayer使用的版本是"^6.4.3"，引入了mapbox的样式，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2022-10-10
Vue keepalive学习用法及场景分析
在Vue中,<keep-alive>的include属性用于指定需要缓存的组件,本文给大家介绍Vue keepalive学习用法及场景分析,感兴趣的朋友一起看看吧
2025-03-03
简单学习vue指令directive
这篇文章主要和大家一起简单学习一下vue指令：directive，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2016-11-11
vue3中getCurrentInstance不推荐使用及在＜script setup＞中获取全局内容的三种方式
这篇文章主要给大家介绍了关于vue3中getCurrentInstance不推荐使用及在＜script setup＞中获取全局内容的三种方式,文中通过介绍的非常详细,对大家的学习或者工作具有一定的参考借鉴价值,需要的朋友可以参考下
2024-02-02
Vue自定义指令详解
这篇文章主要为大家详细介绍了Vue自定义指令的相关资料，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-07-07
Vue操作DOM解决显示位置问题
这篇文章主要介绍了Vue操作DOM解决显示位置问题,文中通过代码示例讲解的非常详细,对大家的学习或工作有一定的帮助,需要的朋友可以参考下
2024-12-12
vue3项目typescript如何export引入(imported)的interface问题
这篇文章主要介绍了vue3项目typescript如何export引入(imported)的interface问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2024-06-06
超详细的5个Shell脚本实例分享(值得收藏)
这篇文章主要介绍了超详细的5个Shell脚本实例分享(值得收藏),文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-08-08
使用vue-print-nb打印el-table问题总结
这篇文章主要介绍了使用vue-print-nb打印el-table问题总结,通过实例代码介绍了vue-print-nb 打印功能,本文结合实例代码讲解的非常详细,感兴趣的朋友一起看看吧
2024-01-01
vue 防止页面加载时看到花括号的解决操作
这篇文章主要介绍了vue 防止页面加载时看到花括号的解决操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2020-11-11