vue.js输入框禁止输入特殊字符

Question

vue.js使用了 element-ui 其中<el-input>如何禁止输入!@#$%^&等特殊字符啊？？？

Answer 1

watch 需要禁止特殊字符的 data，在 $nextTick() 中更新 watch 的变量。模板里还是 v-model 绑定需要输入的字段。

例如username:

<template>
  <el-input v-model="username" name="username" type="text">
</template>

<script>
  function filterInput(val) {
    // 这里过滤的是除了英文字母和数字的其他字符
    return val.replace(/[^A-z0-9]/, '')
  }
  export default {
    watch: {
      username(val) {
        this.$nextTick(() => {
          this.username = filterInput(val)
        })
      }
    }
  }
</script>

Answer 2

写个正则表达式不就可以了，不通过正则，不让提交表单

Answer 3

监听input事件，如果有这些字符，把这些字符替换为空字符