快捷導(dǎo)航

vue限制文本輸入框只允許輸入字母、數(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）只能輸入一個字母內(nèi)容

（2）采用輸入法輸入多個字符時會報錯而且用拼音輸入法按回車鍵也可以顯示其他數(shù)字或字符

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

    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)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: