vue 文本输入框只允许输入字母、数字、不允许输入特殊字符

最新推荐文章于 2024-09-12 10:40:12 发布

酌白楼

最新推荐文章于 2024-09-12 10:40:12 发布

阅读量4.1k

点赞数 1

文章标签： vue.js javascript 前端

原文链接：https://blog.csdn.net/m0_46846526/article/details/120022751

版权

一、基本结构

<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