禁止输入表情的限制

最新推荐文章于 2024-03-19 10:32:38 发布

alessia_wang

最新推荐文章于 2024-03-19 10:32:38 发布

阅读量556

点赞数

文章标签： javascript 前端 vue.js

本文链接：https://blog.csdn.net/alessia_wang/article/details/129944813

版权

输入框中禁止输入表情字符的限制

<template>
  <div>
    <el-dialog title="批量设置口令" :visible.sync="dialogVisible" width="30%" center>
      <el-input
        @input="batchCode = batchCode.replace(reg, '')"
        v-model="batchCode"
        maxlength="50"
        size="small"
        placeholder="请输入口令"
      ></el-input>

      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="confirmBatchEdit">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      batchCode: '',
      reg: /[\uD83C|\uD83D|\uD83E][\uDC00-\uDFFF][\u200D|\uFE0F]|[\uD83C|\uD83D|\uD83E][\uDC00-\uDFFF]|[0-9|*|#]\uFE0F\u20E3|[0-9|#]\u20E3|[\u203C-\u3299]\uFE0F\u200D|[\u203C-\u3299]\uFE0F|[\u2122-\u2B55]|\u303D|[\A9|\AE]\u3030|\uA9|\uAE|\u3030/gi,
      dialogVisible: false,
    }
  },
  methods: {
    confirmBatchEdit() {
      this.$emit('getCode', this.batchCode)
      this.cancle()
    },
    cancle() {
      this.dialogVisible = false
    },

    openDialog() {
      this.dialogVisible = true
    },
  },
}
</script>

主要是正则：

       reg: /[\uD83C|\uD83D|\uD83E][\uDC00-\uDFFF][\u200D|\uFE0F]|[\uD83C|\uD83D|\uD83E][\uDC00-\uDFFF]|[0-9|*|#]\uFE0F\u20E3|[0-9|#]\u20E3|[\u203C-\u3299]\uFE0F\u200D|[\u203C-\u3299]\uFE0F|[\u2122-\u2B55]|\u303D|[\A9|\AE]\u3030|\uA9|\uAE|\u3030/gi,