快捷導(dǎo)航

vue限制文本輸入框只允許輸入字母、數(shù)字、禁止輸入特殊字符

更新時(shí)間：2023年10月09日 10:37:17 作者：奧特曼

這篇文章主要介紹了vue限制文本輸入框只允許輸入字母、數(shù)字、不允許輸入特殊字符,通過監(jiān)聽表單輸入的內(nèi)容,使用方法的缺陷,本文通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友參考下吧

一、基本結(jié)構(gòu)

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

二、監(jiān)聽表單輸入的內(nèi)容

（1）只允許輸入字母

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

（2）只能輸入漢字、英文、數(shù)字

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

（3）只允許輸入數(shù)字

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

（4）只允許輸入數(shù)字、字母

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

注意沒有采用添加 input事件

三、使用方法的缺陷：

<input type="text" v-model="note" maxlength="18" @input="filter">
 methods: {
    filter (e) {
      console.log(e)
      this.note = e.data.replace(/[\u4e00-\u9fa5/\s+/]|[`~!@#$%^&*() \\+ =<>?"{}|, \\/ ;' \\ [ \] ·~！@#￥%……&*（）—— \\+ ={}|《》？：“”【】、；‘'，。、_.-:]/g, "")
    }
  },

（1）只能輸入一個(gè)字母內(nèi)容

（2）采用輸入法輸入多個(gè)字符時(shí)會(huì)報(bào)錯(cuò) 而且用拼音輸入法按回車鍵也可以顯示其他數(shù)字或字符

補(bǔ)充校驗(yàn)手機(jī)號(hào)

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

只允許輸入數(shù)字、點(diǎn) 保留兩位小數(shù)

checkNumber(e) {
				let val = e.target.value.replace(/(^\s*)|(\s*$)/g, "")
				var reg = /[^\d.]/g
				// 只能是數(shù)字和小數(shù)點(diǎn)，不能是其他輸入
				val = val.replace(reg, "")
				// // 保證第一位只能是數(shù)字，不能是點(diǎn)
				val = val.replace(/^\./g, "");
				// // 小數(shù)只能出現(xiàn)1位
				val = val.replace(".", "$#$").replace(/\./g, "").replace("$#$", ".");
				// // 小數(shù)點(diǎn)后面保留2位
				val = val.replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3');
				// console.log(val);
				this.$nextTick(() => {
					this.form.price = val;
				})
			},

到此這篇關(guān)于vue限制文本輸入框只允許輸入字母、數(shù)字、不允許輸入特殊字符的文章就介紹到這了,更多相關(guān)vue限制文本輸入框輸入數(shù)字內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: