el-input针对中文输入状态下，对拼音不进行校验的解决方案

愿逐月华流照君2021

于 2024-04-10 11:39:53 发布

阅读量734

点赞数 4

文章标签： vue.js elementui javascript

本文链接：https://blog.csdn.net/weixin_53879882/article/details/137590270

版权

文章介绍了如何在Vue中使用el-input组件时，通过compositionstart和compositionend事件以及正则表达式，确保输入内容仅限中文、英文和数字，避免在输入拼音时触发不必要的校验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<template>  
  <el-input  
    v-model="inputValue"  
    @input="handleInput"  
    @compositionstart="isComposing = true"  
    @compositionend="isComposing = false"  
    placeholder="请输入内容"  
  ></el-input>  
</template>  
  
<script>  
export default {  
  data() {  
    return {  
      inputValue: '',  
      isComposing: false, // 标记是否处于输入法编辑状态  
    };  
  },  
  methods: {  
    handleInput() {  
      if (!this.isComposing) {  
        // 使用正则表达式检查输入是否只包含中文、英文和数字  
        const regex = /^[\u4e00-\u9fa5a-zA-Z0-9]*$/;  
        this.inputValue = this.inputValue.replace(/[^\u4e00-\u9fa5a-zA-Z0-9]/g, '');  
      }  
    },  
  },  
};  
</script>

这里compositionstart表明中文输入开始，compositionend表明中文输入结束，isComposing标志正在输入，从而控制输入框的校验在输入拼音时不进行，不在中文输入状态下才校验。