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

最新推荐文章于 2024-05-16 10:42:51 发布

嗷呜~小脑斧

最新推荐文章于 2024-05-16 10:42:51 发布

阅读量2.2k

点赞数 1

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_46939404/article/details/129086183

版权

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>