一、基本结构

<input type="text" v-model="note" maxlength="18">
<script>
export default {
  data () {
    return {
      note: '',
    }
  }
}
</script>

二、监听表单输入的内容
(1) 只允许输入字母

  watch: {
    note (newValue, oldValue) {
      console.log(newValue)
      this.note = newValue.replace(/[\u4e00-\u9fa5/\s+/]|[`~!@#$%^&*() \\+ =<>?"{}|, \\/ ;' \\ [ \] ·~!@#¥%……&*()—— \\+ ={}|《》?:“”【】、;‘’,。、_.-:]/g, "")
    }
  },

(2)只能输入汉字、英文、数字

 watch: {
     note (newValue, oldValue) {
      console.log(newValue)
      this.note = newValue.replace(/[^a-zA-Z0-9\u4E00-\u9FA5]/g, "")
    }
  },

(3) 只允许输入数字

 watch: {
      note (newValue, oldValue) {
      console.log(newValue)
      this.note = newValue.replace(/[^\d]/g, "")
    }
  },

(4)只允许输入数字、字母

  watch: {
     note (newValue,oldValue) {
      console.log(newValue)
      this.note = newValue.replace(/[\u4e00-\u9fa5/\s+/]|[^a-zA-Z0-9\u4E00-\u9FA5]/g, "")
    }
  },

注意 没有采用添加 input事件

补充 校验手机号

 test () {
      console.log(/^1[34578]\d{9}$/.test(this.mobile))
      }

————————————————
版权声明:本文为CSDN博主「奥特曼 」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/m0_46846526/article/details/120022751

Logo

前往低代码交流专区

更多推荐