vue+element项目中过滤输入框特殊字符小结

 更新时间:2019年08月07日 09:06:31   作者:Thinkguo  
这篇文章主要介绍了vue+element项目中过滤输入框特殊字符小结,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下

 可以在main.js中写入方法

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

HTML部分

<el-input maxlength='15' :value="searchForm.logId" @input='e => searchForm.logId = validSe (e,15)' placeholder="请输入日志ID"></el-input>

需要将v-model拆分为:value和@input

通过以上方法又扩展出以下方法

//只能输汉字
Vue.prototype.chineseOnly = function (value) {
value = value.replace(/[^\u4E00-\u9FA5]/g, '');
return value
};
//只能输正整数
Vue.prototype.idOnly = function (value) {
value = value.replace(/[^0-9]/g, '');
return value
};
//不允许输汉字
Vue.prototype.noChineseOnly = function (value) {
value = value.replace(/[\u4E00-\u9FA5]/g, '');
return value
};
 

//逗号和数字
Vue.prototype.programIdOnly = function (value) {
value = value.replace(/[^0-9,]/g, '');
return value
};
//数字和回车
Vue.prototype.idsOnly = function (value) {
value = value.replace(/[^\r\n0-9]/g, '');
return value
};
//数值大小限定
Vue.prototype.numberLimit = function (value) {
value = value.replace(/[^0-9]/g, '');
if (value >= 2147483647) {
this.$message({
type: "warning",
message: `最大可输入值为2147483647`
});
}
return value
};

// 正整数
Vue.prototype.onlyPositiveInteger = function (value) {
value = String(value).match(/[1-9]\d*/g, "")
return value === null ? '' : Number(value[0])
};
// 正整数(包含0)
Vue.prototype.onlyPositiveInteger1 = function (value) {
console.log(typeof (value));
value = String(value).match(/[1-9]\d*|0/g, "")
return value === null ? '' : Number(value[0])
};
// 负整数
Vue.prototype.onlyNegativeInteger = function (value) {
value = String(value).match(/^-[1-9]*\d*/g, "")
return value === null ? '' : value[0] === '-' ? '-' : value[0] === '-0' ? '' : Number(value[0])
};
// 负整数(包含0)
Vue.prototype.onlyNegativeInteger1 = function (value) {
value = String(value).match(/^-[1-9]*\d*|0/g, "")
return value === null ? '' : value[0] === '-' ? '-' : Number(value[0])
};
// 整数
Vue.prototype.onlyInteger = function (value) {
value = String(value).match(/^-?[1-9]*\d*|0/g, '')
return value === null ? '' : value[0] === '-' ? '-' : value[0] === '' ? '' : Number(value[0])
};
// 整数区间
Vue.prototype.onlySection = function (value, min, max) {
if (min < 0) {
value = String(value).match(/-?[1-9]*\d*/g, "")
} else {
value = String(value).match(/[1-9]*\d*/g, "")
}
// value = String(value).match(/-?[1-9]*\d*/g, "")
value = value === null ? '' : value[0] === '-' ? '-' : value[0] === '' ? '' : Number(value[0])
if (value < min) {
return min
} else if (value > max) {
return max
} else {
return value
}
};

总结

以上所述是小编给大家介绍的vue+element项目中过滤输入框特殊字符小结,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

相关文章

  • Vue $mount实战之实现消息弹窗组件

    Vue $mount实战之实现消息弹窗组件

    这篇文章主要介绍了Vue $mount实现消息弹窗组件的相关知识,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-04-04
  • vue+element-ui+axios多文件上传的实现并显示整体进度

    vue+element-ui+axios多文件上传的实现并显示整体进度

    这篇文章主要介绍了vue+element-ui+axios多文件上传的实现并显示整体进度,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-04-04
  • vue弹窗插件实战代码

    vue弹窗插件实战代码

    这篇文章主要介绍了vue弹窗插件实战代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-09-09
  • rollup3.x+vue2打包组件的实现

    rollup3.x+vue2打包组件的实现

    本文主要介绍了rollup3.x+vue2打包组件的实现,详细的介绍了打包会存在的问题,包版本的问题,babel 转换jsx等问题,具有一定的参考价值,感兴趣的可以了解一下
    2023-03-03
  • Vue项目中使用百度地图api的详细步骤

    Vue项目中使用百度地图api的详细步骤

    在之前的一个小项目中,用到的显示当地的地图功能,下面这篇文章主要给大家介绍了关于Vue项目中使用百度地图api的详细步骤,文中通过图文介绍的非常详细,需要的朋友可以参考下
    2022-10-10
  • vue.js使用Element-ui实现导航菜单

    vue.js使用Element-ui实现导航菜单

    这篇文章主要为大家详细介绍了vue.js使用Element-ui中实现导航菜单,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-09-09
  • 详解vuelidate 对于vueJs2.0的验证解决方案

    详解vuelidate 对于vueJs2.0的验证解决方案

    本篇文章主要介绍了vuelidate 对于vueJs2.0的验证解决方案,具有一定的参考价值,感兴趣的小伙伴们可以参考一下。
    2017-03-03
  • vue项目中vue-echarts讲解及常用图表实现方案(推荐)

    vue项目中vue-echarts讲解及常用图表实现方案(推荐)

    这篇文章主要介绍了vue项目中vue-echarts讲解及常用图表方案实现,主要针对代码示例中的内容进行问题讲解,详细代码在文章中给大家提到,需要的朋友可以参考下
    2022-09-09
  • Vue之生命周期函数详解

    Vue之生命周期函数详解

    这篇文章主要为大家介绍了Vue之生命周期函数,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能够给你带来帮助
    2021-11-11
  • vue项目出现页面空白的解决方案

    vue项目出现页面空白的解决方案

    今天小编就为大家分享一篇vue项目出现页面空白的解决方案,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-10-10

最新评论