vue限制input框輸入特殊字符和漢字

問題描述：

  <el-form-item label="VIN" prop="vin" label-width="80px">
        <el-input
          v-model="queryParams.vin"
          placeholder="請輸入VIN"
          clearable
          @keyup.native="btKeyUp"
          @keydown.native="btKeyDown"
          size="small"
          @keyup.enter.native="handleQuery"
        />
   </el-form-item>
// methods內(nèi) 
 // 只能輸入漢字、英文、數(shù)字
    btKeyDown(e) {
       e.target.value = e.target.value.replace(/[^\a-\z\A-\Z0-9\u4E00-\u9FA5]/g,"");
    },
//限制輸入特殊字符
    btKeyUp(e) {
       e.target.value = e.target.value.replace(/[`~!@#$%^&*()_\-+=<>?:"{}|,.\/;'\\[\]·~！@#￥%……&*（）——\-+={}|《》？：“”【】、；‘’，。、]/g,"");
    }

此方法可以實現(xiàn)對特殊字符的限制，但當微軟自帶輸入法輸入中文時卻會自動識別字母，此字母搜索框并未獲取且無法正常搜索（詞匯匱乏，不知描述的是否準確，總之就是輸入中文搜索時還是存在問題）。

解決方案：

最后用以下代碼解決問題（代碼包含特殊字符限制與中文限制，可根據(jù)需要自行取舍）：

<el-form-item label="VIN" prop="vin" label-width="80px">
        <el-input
          v-model="queryParams.vin"
          placeholder="請輸入VIN"
          clearable
          @keyup.native="btKeyUp"
          size="small"
        />
      </el-form-item>

// methods內(nèi) 
    //限制輸入特殊字符和中文
    btKeyUp() {
      // 不允許輸入中文
      this.queryParams.vin= this.queryParams.vin.replace(/[\u4e00-\u9fa5]/ig,'')
      // 不允許輸入特殊符號
      this.queryParams.vin= this.queryParams.vin.replace(/[^\w\u4E00-\u9FA5]/g, '')
     
    },

新手上路，如有不足之處還請各位大佬多多指教

此博客參考：https://blog.csdn.net/Yugoup/article/details/95975737
https://blog.csdn.net/ks8380/article/details/96478522文章來源地址http://www.zghlxwxcb.cn/news/detail-503189.html

到了這里，關于vue限制input框輸入特殊字符和漢字的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網(wǎng)！