全局input输入框只能输入数字/不能输入特殊字符限制

UpSeven0

已于 2023-03-17 17:31:17 修改

阅读量760

点赞数

分类专栏： javascript 文章标签： vue.js javascript 前端

于 2023-02-01 10:06:05 首次发布

本文链接：https://blog.csdn.net/qq_34811855/article/details/128827631

版权

javascript 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

// 在main.js中写入

// 全局input输入框不能输入特殊字符限制
Vue.prototype.$validForbidInput = function (value) {
  value = value.replace(/[`~!@#$%^&*()_\-+=<>?:"{}|,./;'\\[\]·~！@#￥%……&*（）——\-+={}|《》？：“”【】、；‘’，。、]/g, '').replace(/\s/g, "");
  return value;
}
// 全局input输入框只能输入数字限制
Vue.prototype.$validForbidOnlyNum = function (value) {
  value = value.replace(/[^\d]/g, '')
  return value
}
// 全局input输入框只能输入数字 负数 小数限制
Vue.prototype.$validForbidOnlyNumAll = function (value) {
  var t = value.charAt(0);
  value = value.replace(".", "$#$")//把第一个字符'.'替换成'$#$'
    .replace(/\./g, "")//把其余的字符'.'替换为空
    .replace("$#$", ".")//把字符'$#$'替换回原来的'.'
    .replace(/[^\d.]/g, "")//只能输入数字和'.'
    .replace(/^\./g, "")//不能以'.'开头
    .replace(/([0-9]+\.[0-9]{2})[0-9]*/, "$1")//只保留2位小数
  if (t == '-') {
    value = '-' + value;
  }
  return value
}
// 全局input输入框只能输入数字 负数 限制
Vue.prototype.$validForbidOnlyNumAll2 = function (value) {
  var t = value.charAt(0);
  value = value.replace(/[^\d]/g, '')
  if (t == '-') {
    value = '-' + value;
  }
  return value
}

// 在vue页面中使用
<el-input v-model="formData.orderBy" placeholder="请输入" @input="e => formData.orderBy = $validForbidOnlyNum(e)"></el-input>