zoukankan      html  css  js  c++  java
  • el-input在vue中实现禁止输入特殊字符

    前提补充

    在vue中

    <input v-model="text" />

    等价于

    <input
     :value="text"
     @input="e => text = e.target.value"
    />

    需求

    前端提交form表单要求,不能输入 @#¥%……&*…
    不是提示,而是 禁止输入

    效果

    代码

    ** 在mian.js中添加【vue原型上添加方法,便于全局使用】

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

    ** 在component.vue中加入

    <el-input
      :value="form.name"
      @input="e => form.name = validSe(e)"
      maxlength="10"
      placeholder="过滤特殊字符长度10"
    ></el-input>
    

    over

    时而疯狂女汉子,时而温柔软妹子
  • 相关阅读:
    Thrift在微服务中的使用
    MySQL 必知必会
    IDEA 内使用 git
    分布式锁
    LeetCode 图
    LeetCode 位运算
    LeetCode 数组
    LeetCode 字符串
    LeetCode 哈希表
    LeetCode 栈和队列
  • 原文地址:https://www.cnblogs.com/csji/p/13490323.html
Copyright © 2011-2022 走看看