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 相关文章推荐
一个可绑定数据源的jQuery数据表格插件
Jul 17 Javascript
jQuery图片的展开和收缩实现代码
Apr 16 Javascript
如何使用Javascript获取距今n天前的日期
Jul 08 Javascript
js数组去重的常用方法总结
Jan 24 Javascript
基于javascript实现判断移动终端浏览器版本信息
Dec 09 Javascript
JavaScript实现简单生成随机颜色的方法
Sep 21 Javascript
vue-resource + json-server模拟数据的方法
Nov 02 Javascript
echarts学习笔记之箱线图的分析与绘制详解
Nov 22 Javascript
详解vue填坑之解决部分浏览器不支持pushState方法
Jul 12 Javascript
js实现按钮开关单机下拉菜单效果
Nov 22 Javascript
使用electron制作满屏心特效的示例代码
Nov 27 Javascript
JavaScript对象原型链原理详解
Feb 05 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和C#可共用的可逆加密算法详解
2015/10/26 PHP
PHP抓取及分析网页的方法详解
2016/04/26 PHP
yii2使用ajax返回json的实现方法
2016/05/14 PHP
ThinkPHP 在阿里云上的nginx.config配置实例详解
2017/10/11 PHP
php生成静态页面并实现预览功能
2019/06/27 PHP
js复制到剪切板的实例方法
2013/06/28 Javascript
js innerHTML 改变div内容的方法
2013/08/03 Javascript
使用Node.js实现一个简单的FastCGI服务器实例
2014/06/09 Javascript
php读取sqlite数据库入门实例代码
2014/06/25 Javascript
Bootstrap打造一个左侧折叠菜单的系统模板(二)
2016/05/17 Javascript
JavaScript事件学习小结(五)js中事件类型之鼠标事件
2016/06/09 Javascript
实用jquery操作表单元素的简单代码
2016/07/04 Javascript
jquery实现网站列表切换效果的2种方法
2016/08/12 Javascript
解决ajax不能访问本地文件问题(利用js跨域原理)
2017/01/24 Javascript
AngularJS的ng-click传参的方法
2017/06/19 Javascript
[55:47]DOTA2上海特级锦标赛C组小组赛#2 LGD VS Newbee第三局
2016/02/27 DOTA
[04:59]2018DOTA2亚洲邀请赛 4.7 Mineski夺冠时刻
2018/04/09 DOTA
Django Web开发中django-debug-toolbar的配置以及使用
2018/05/06 Python
使用pandas的DataFrame的plot方法绘制图像的实例
2018/05/24 Python
Python 类属性与实例属性,类对象与实例对象用法分析
2019/09/20 Python
Python 读取WAV音频文件 画频谱的实例
2020/03/14 Python
Django实现前台上传并显示图片功能
2020/05/29 Python
python如何遍历指定路径下所有文件(按按照时间区间检索)
2020/09/14 Python
荷兰美妆护肤品海淘网站:Beautinow(中文)
2020/11/22 全球购物
学年自我鉴定范文
2013/10/01 职场文书
活动总结模板
2014/05/09 职场文书
工厂搬迁方案
2014/05/11 职场文书
中国梦口号
2014/06/13 职场文书
自我管理的活动方案
2014/08/25 职场文书
政府四风问题整改措施
2014/10/04 职场文书
2014年党风廉政工作总结
2014/12/03 职场文书
2015年幼儿园元旦游艺活动策划书
2014/12/09 职场文书
寻衅滋事罪辩护词
2015/05/21 职场文书
暑期社会实践新闻稿
2015/07/17 职场文书
工作服管理制度范本
2015/08/06 职场文书
Python socket如何解析HTTP请求内容
2022/02/12 Python