Element UI el-input禁止输入特殊表情符号和一些特殊字符

爬坑的小白

于 2025-09-02 14:31:13 发布

阅读量130

点赞数 2

CC 4.0 BY-SA版权

文章标签： vue.js

本文链接：https://blog.csdn.net/ZJ15981837003/article/details/151112691

页面

 <el-form-item
                label="备注"
                prop="desc"
                :rules="[
                  { required: true, message: '请输入备注', trigger: 'blur' }
                ]"
              >
                <el-input
                  v-model="ruleForm.desc"
                  type="textarea"
                  @input="handleInput"
                  @paste="handlePaste"
                />
              </el-form-item>

方法：提供了最全面的保护，包括输入过滤、粘贴处理和用户提示，能够有效防止表情符号和特殊字符的输入。

  handleInput(value) {
      const filteredValue = this.removeSpecialChars(value)
      if (filteredValue !== value) {
        this.ruleForm.desc = filteredValue
      }
    },

    handlePaste(event) {
      // 处理粘贴事件
      this.$nextTick(() => {
        const filteredValue = this.removeSpecialChars(this.ruleForm.desc)
        if (filteredValue !== this.ruleForm.desc) {
          this.ruleForm.desc = filteredValue
          this.$message.warning('已自动过滤表情符号和特殊字符')
        }
      })
    },
    removeSpecialChars(str) {
      if (!str) return str

      // 移除表情符号和一些特殊字符
      return str
        .replace(/[\uD83C-\uDBFF\uDC00-\uDFFF]/g, '') // 表情符号
        .replace(/[\u2600-\u26FF\u2700-\u27BF]/g, '') // 杂项符号
        .replace(/[\u2300-\u23FF\u2B00-\u2BFF]/g, '') // 其他符号
        .replace(/[\u2900-\u297F\u2190-\u21FF]/g, '') // 箭头符号
        .replace(/[\u25A0-\u25FF\u2500-\u259F]/g, '') // 几何符号
        .replace(/\s+/g, ' ') // 多个空格替换为单个空格
        .trim() // 去除首尾空格
    },