input 禁止输入特殊符号(vue element-ui)

2020-09-23  本文已影响0人  Yyyyyyyyyujie

<input v-model="text" />等价于<input :value="text" @input="e => text = e.target.value" />
so...

1.在组件中使用的话 直接写一个方法使用

<el-input  :value="words"
   @input="e => words = inputVaildate(e)"  placeholder="请输入内容">
</el-input>

inputVaildate(value, number = 24) {
  value = value.replace(/[`~!@#$%^&*()_\-+=<>?:"{}|,./;'\\[\]·~!@#¥%……&*()——\-+={}|《》?:“”【】、;‘’,。、]/g, '').replace(/\s/g, "");
  if (value.length >= number) {
    this.$message({
      type: "warning",
      message: `输入内容不能超过${number}个字符`
    });
  }
  return value;
}

2.vue原型上添加方法,便于全局使用

在mian.js中添加

Vue.prototype.inputVaildate= function (value, number = 24) {
  value = value.replace(/[`~!@#$%^&*()_\-+=<>?:"{}|,./;'\\[\]·~!@#¥%……&*()——\-+={}|《》?:“”【】、;‘’,。、]/g, '').replace(/\s/g, "");
  if (value.length >= number) {
    this.$message({
      type: "warning",
      message: `输入内容不能超过${number}个字符`
    });
  }
  return value;
}

[参考]

上一篇下一篇

猜你喜欢

热点阅读