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


Posted in Javascript onAugust 07, 2019

 可以在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项目中过滤输入框特殊字符小结,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
动态改变textbox的宽高的js
Oct 26 Javascript
Gird组件 Part-3:范例RSSFeed Viewer
Mar 10 Javascript
javascript 进度条 实现代码
Jul 30 Javascript
学习ExtJS Panel常用方法
Oct 07 Javascript
jQuery基于图层模仿五星星评价功能的方法
May 07 Javascript
Bootstrap编写导航栏和登陆框
May 30 Javascript
如何制作幻灯片(代码分享)
Jan 06 Javascript
bootstrap选项卡使用方法解析
Jan 11 Javascript
使用JavaScript实现表格编辑器(实例讲解)
Aug 02 Javascript
node.js遍历目录的方法示例
Aug 01 Javascript
JS常用跨域方法实现原理解析
Dec 09 Javascript
JavaScript控制台的更多功能
Apr 28 Javascript
Vue.js项目实战之多语种网站的功能实现(租车)
Aug 07 #Javascript
javascript中的数据类型检测方法详解
Aug 07 #Javascript
scrapyd schedule.json setting 传入多个值问题
Aug 07 #Javascript
Node.js在图片模板上生成二维码图片并附带底部文字说明实现详解
Aug 07 #Javascript
微信小程序引入Vant组件库过程解析
Aug 06 #Javascript
Vue数据绑定实例写法
Aug 06 #Javascript
Vue代码整洁之去重方法整理
Aug 06 #Javascript
You might like
PHP模拟SQL Server的两个日期处理函数
2006/10/09 PHP
深思 PHP 数组遍历的差异(array_diff 的实现)
2008/03/23 PHP
php gd2 上传图片/文字水印/图片水印/等比例缩略图/实现代码
2010/05/15 PHP
PHP上传Excel文件导入数据到MySQL数据库示例
2016/10/25 PHP
php在windows环境下获得cpu内存实时使用率(推荐)
2018/02/08 PHP
PHP观察者模式定义与用法实例分析
2019/03/22 PHP
PHP 实现链式操作
2021/03/09 PHP
如果文字过长,则将过长的部分变成省略号显示
2006/06/26 Javascript
JSON.parse 解析字符串出错的解决方法
2010/07/08 Javascript
js当一个变量为函数时 应该注意的一点细节小结
2011/12/29 Javascript
jQuery实现自动调用和触发某个事件的方法
2016/11/18 Javascript
15个非常实用的JavaScript代码片段
2016/12/18 Javascript
js实现不提示直接关闭网页窗口
2017/03/30 Javascript
jQuery获取table表中的td标签(实例讲解)
2017/07/28 jQuery
vue中echarts3.0自适应的方法
2018/02/26 Javascript
node使用promise替代回调函数
2018/05/07 Javascript
Angular通过指令动态添加组件问题
2018/07/09 Javascript
JS多个表单数据提交下的serialize()应用实例分析
2019/08/27 Javascript
[04:10]2018年度CS GO玩家最喜爱的主播-完美盛典
2018/12/16 DOTA
python编程羊车门问题代码示例
2017/10/25 Python
浅述python中深浅拷贝原理
2018/09/18 Python
python第三方库学习笔记
2020/02/07 Python
django admin 根据choice字段选择的不同来显示不同的页面方式
2020/05/13 Python
python 删除excel表格重复行,数据预处理操作
2020/07/06 Python
css3 伪元素和伪类选择器详解
2014/09/04 HTML / CSS
交通专业个人自荐信格式
2013/09/23 职场文书
魅力教师事迹材料
2014/01/10 职场文书
初中音乐教学反思
2014/01/12 职场文书
《月球之谜》教学反思
2014/04/10 职场文书
新员工试用期自我鉴定
2014/04/17 职场文书
2014年办公室主任工作总结
2014/11/12 职场文书
2015年元旦标语大全
2014/12/09 职场文书
社区青年志愿者活动总结
2015/05/06 职场文书
小学六年级毕业感言
2015/07/30 职场文书
Python实现天气查询软件
2021/06/07 Python
使用CSS实现音波加载效果
2023/05/07 HTML / CSS