vue限制input框输入特殊字符和汉字-Toy模板网

这篇具有很好参考价值的文章主要介绍了vue限制input框输入特殊字符和汉字。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

vue限制input框输入特殊字符和汉字

问题描述：

在设计vue输入框时，限制input框输入特殊字符和汉字。一开始参考此博客：https://blog.csdn.net/ks8380/article/details/96478522 进行特殊字符的限制，代码如下：

  <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内 
 // 只能输入汉字、英文、数字
    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,"");
    }

此方法可以实现对特殊字符的限制，但当微软自带输入法输入中文时却会自动识别字母，此字母搜索框并未获取且无法正常搜索（词汇匮乏，不知描述的是否准确，总之就是输入中文搜索时还是存在问题）。

解决方案：

最后用以下代码解决问题（代码包含特殊字符限制与中文限制，可根据需要自行取舍）：

<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内 
    //限制输入特殊字符和中文
    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文章来源地址https://www.toymoban.com/news/detail-503189.html

到了这里，关于vue限制input框输入特殊字符和汉字的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！