input 禁止输入特殊字符的四种实现方式


Posted in Javascript onAugust 24, 2016
<span style="font-family: Arial, Helvetica, sans-serif; background-color: rgb(255, 255, 255);">昨天项目搜索的时候报错,蛋疼的是生产库中的,看了下日志,原因是用户搜索的时候输入了特殊字符,没办法最快捷的办法是直接把用户输入的数据进行筛选,去掉特殊字符</span>

有些特殊字符传入到后台是会产生错误的 有可能会sql注入,所以从根本上拦截

下面一起探讨下input禁止输入特殊字符的方式:

方式一:拿到value值以后 在你传递之前处理

function stripscript(value) {
var pattern = new RegExp("[`~!@#$^&*()=|{}':;',\\[\\].<>/?~!@#¥……&*()——|{}【】‘;:”“'。,、?]") 
var rs = ""; 
for (var i = 0; i < value.length; i++) {
rs = rs+s.substr(i, 1).replace(pattern, ''); 
} 
return rs;
}

直接调用这个函数即可 。

方式二:从最根本上也就是提示用户输入不了特殊字符

function showKeyPress(evt) {
evt = (evt) ? evt : window.event
return checkSpecificKey(evt.keyCode);
}
function checkSpecificKey(keyCode) {
var specialKey = "[`~!#$^&*()=|{}':;',\\[\\].<>/?~!#¥……&*()——|{}【】‘;:”“'。,、?]‘'";//Specific Key list
var realkey = String.fromCharCode(keyCode);
var flg = false;
flg = (specialKey.indexOf(realkey) >= 0);
if (flg) {
// alert('请勿输入特殊字符: ' + realkey);
return false;
}
return true;
}
document.onkeypress = showKeyPress;

使用:在input控件上加入事件 根本没反应

这个好像有点小问题 中文状态下没反应 不知道怎么回事 所以又找了一种

方式三:onkeyup事件 拿到以后去匹配 跟方式一类似

function ValidateValue(textbox) {
var IllegalString = "[`~!#$^&*()=|{}':;',\\[\\].<>/?~!#¥……&*()——|{}【】‘;:”“'。,、?]‘'";
var textboxvalue = textbox.value;
var index = textboxvalue.length - 1;

var s = textbox.value.charAt(index);

if (IllegalString.indexOf(s) >= 0) {
s = textboxvalue.substring(0, index);
textbox.value = s;
}
}

使用: onkeyup = "ValidateValue(this)" 他会输入以后会立马消失,用户是可以看得到我输入的 只是说输入以后就没了,弊端是连续输入就不会消失了(按住不动)

接下来最牛逼的一种 中和以上方式

方式四:直接在控件上使用正在

// <input /[\W]/g,'') "/[^\d]/g,''))">
// 控制输入框只能输入文字或数字,也可以不允许输入特殊字符 这里不允许输入如下字符: (像 !@#$%^&* 等)<br>

这种方式用户可以看到输入了会立马消失 跟方式三差不多 但连续输入是有效的

下面看下js里面判断输入的字符不可为特殊字符:

一、document.onkeypress事件是当输入一个字符的时候就进行校验,校验时执行函授showKeyPress,返回true的时候可输入,false不可输入。

二、evt = (evt) ? evt : window.event,是按下键盘就产生此事件获得你键入的值(是键盘的keyCode)。

var realkey = String.fromCharCode(keyCode);
String.fromCharCode()方法是把键盘值(keyCode)转换成你真实输入的值。

三、方法specialKey.indexOf(realkey):

.indexOf()是String的方法,字符串的IndexOf()方法搜索在该字符串上是否出现了作为参数传递的字符串,如果找到字符串,则返回字符的起始位置 (0表示第一个字符,1表示第二个字符依此类推)如果说没有找到则返回 -1

四、var specialKey = "#$%\^*\'\"\+";

这里是带转义符的字符串,#、$、%、^、*、'、"、+ 这些符号是特殊符号,其中前面带\的是需要转义的。

如果要在当个文本框中加限制输入特殊符号,用<input type="text" id="name" onkeypress="showKeyPress()">

以上所述是小编给大家介绍的input 禁止输入特殊字符的四种实现方式,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
基于jQuery的js分页代码
Jun 10 Javascript
全面解析JavaScript中“&amp;&amp;”和“||”操作符(总结篇)
Jul 18 Javascript
JS使用正则实现去掉字符串左右空格的方法
Dec 27 Javascript
Angularjs通过指令监听ng-repeat渲染完成后执行脚本的方法
Dec 31 Javascript
JavaScript实现水平进度条拖拽效果
Jan 18 Javascript
javascript 判断当前浏览器版本并判断ie版本
Feb 17 Javascript
JavaScript中各数制转换全面总结
Aug 21 Javascript
JavaScript组合设计模式--改进引入案例分析
May 23 Javascript
深入理解 ES6中的 Reflect用法
Jul 18 Javascript
js实现滑动进度条效果
Aug 21 Javascript
vue 通过base64实现图片下载功能
Dec 19 Vue.js
如何在vue中使用kindeditor富文本编辑器
Dec 19 Vue.js
深入浅析JavaScript中的3DES
Aug 24 #Javascript
jQuery自适应轮播图插件Swiper用法示例
Aug 24 #Javascript
JavaScript lodash常见用法系列小结
Aug 24 #Javascript
EasyUI的doCellTip实现鼠标放到单元格上提示单元格内容
Aug 24 #Javascript
JS实现获取当前URL和来源URL的方法
Aug 24 #Javascript
Bootstrap和Angularjs配合自制弹框的实例代码
Aug 24 #Javascript
总结Javascript中的隐式类型转换
Aug 24 #Javascript
You might like
复杂检索数据并分页显示的处理方法
2006/10/09 PHP
Chrome Web App开发小结
2014/09/04 PHP
是 WordPress 让 PHP 更流行了 而不是框架
2016/02/03 PHP
php文件上传、下载和删除示例
2020/08/28 PHP
PHPStorm2020.1永久激活及下载更新至2020(推荐)
2020/09/25 PHP
jQuery 使用手册(五)
2009/09/23 Javascript
jquery中获得$.ajax()事件返回的值并添加事件的方法
2010/04/15 Javascript
jQuery ready函数滥用分析
2011/02/16 Javascript
js中substring和substr的详细介绍与用法
2013/08/29 Javascript
javascript中的原型链深入理解
2014/02/24 Javascript
js正则表达式匹配数字字母下划线等
2015/04/14 Javascript
JS实现简单的图书馆享元模式实例
2015/06/30 Javascript
nodejs async异步常用函数总结(推荐)
2017/11/17 NodeJs
Vue项目中使用Vux的安装过程
2018/05/01 Javascript
boostrap模态框二次弹出清空原有内容的方法
2018/08/10 Javascript
vue实现购物车抛物线小球动画效果的方法详解
2019/02/13 Javascript
[01:14:31]Secret vs VG 2018国际邀请赛淘汰赛BO3 第一场 8.23
2018/08/24 DOTA
python测试驱动开发实例
2014/10/08 Python
Java中重定向输出流实现用文件记录程序日志
2015/06/12 Python
python正向最大匹配分词和逆向最大匹配分词的实例
2018/11/14 Python
10分钟教你用Python实现微信自动回复功能
2018/11/28 Python
Python 获取 datax 执行结果保存到数据库的方法
2019/07/11 Python
Django 再谈一谈json序列化
2020/03/16 Python
Python 中Operator模块的使用
2021/01/30 Python
详解HTML5中垂直上下居中的解决方案
2017/12/20 HTML / CSS
加拿大票务网站:Ticketmaster加拿大
2017/07/17 全球购物
Ticketmaster意大利:音乐会、节日、艺术和剧院的官方门票
2019/12/23 全球购物
全球最大的生存食品、水和装备专用在线市场:BePrepared.com
2020/01/02 全球购物
运动会广播稿100字
2014/01/11 职场文书
志愿者活动总结
2014/04/28 职场文书
精神文明建设先进工作者事迹材料
2014/05/02 职场文书
2015年检验科工作总结
2015/04/27 职场文书
Redis数据结构之链表与字典的使用
2021/05/11 Redis
java中用float时,数字后面加f,这样是为什么你知道吗
2021/09/04 Java/Android
canvas实现贪食蛇的实践
2022/02/15 Javascript
vue如何使用模拟的json数据查看效果
2022/03/31 Vue.js