so... 1.在组件中使用的话 直接写一个方法使用 ...">
美文网首页
input 禁止输入特殊符号(vue element-ui)

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

作者: Yyyyyyyyyujie | 来源:发表于2020-09-23 15:38 被阅读0次

    <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;
    }
    

    [参考]

    相关文章

      网友评论

          本文标题:input 禁止输入特殊符号(vue element-ui)

          本文链接:https://www.haomeiwen.com/subject/daloyktx.html