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 相关文章推荐
用正则表达式 动态创建/增加css style script 兼容IE firefox
Mar 10 Javascript
一个收集图片的bookmarlet(js 刷新页面中的图片)
May 27 Javascript
jQuery网页版打砖块小游戏源码分享
Aug 20 Javascript
基于jquery实现下拉框美化特效
Feb 02 Javascript
Node.js编写组件的三种实现方式
Feb 25 Javascript
js时间控件只显示年月
Jan 08 Javascript
AngularJS中下拉框的高级用法示例
Oct 11 Javascript
vue实现树形菜单效果
Mar 19 Javascript
js使用Promise实现简单的Ajax缓存
Nov 14 Javascript
JavaScript实现多个物体同时运动
Mar 12 Javascript
vantUI 获得piker选中值的自定义ID操作
Nov 04 Javascript
javascript前端实现多视频上传
Dec 13 Javascript
深入浅析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
在 PHP 中使用随机数的三个步骤
2006/10/09 PHP
简单的cookie计数器实现源码
2013/06/07 PHP
PHP中的一些常用函数收集
2015/05/26 PHP
WordPress中用于获取搜索表单的PHP函数使用解析
2016/01/05 PHP
thinkPHP5.1框架使用SemanticUI实现分页功能示例
2019/08/03 PHP
JQuery 获得绝对,相对位置的坐标方法
2010/02/09 Javascript
javascript 循环调用示例介绍
2013/11/20 Javascript
jquery常用操作小结
2014/07/21 Javascript
JavaScript日期类型的一些用法介绍
2015/03/02 Javascript
重新理解JavaScript的六种继承方式
2017/03/24 Javascript
AngularJS实现的输入框字数限制提醒功能示例
2017/10/26 Javascript
React.Js添加与删除onScroll事件的方法详解
2017/11/03 Javascript
Angular实现模版驱动表单的自定义校验功能(密码确认为例)
2018/05/17 Javascript
微信小程序实现跑马灯效果完整代码(附效果图)
2018/05/30 Javascript
Vue编写可显示周和月模式的日历 Vue自定义日历内容的显示
2019/06/26 Javascript
Vue实现按钮级权限方案
2019/11/21 Javascript
js实现随机点名器精简版
2020/06/29 Javascript
小程序实现tab标签页
2020/11/16 Javascript
Vue解决移动端弹窗滚动穿透问题
2020/12/15 Vue.js
利用python代码写的12306订票代码
2015/12/20 Python
python字典DICT类型合并详解
2017/08/17 Python
python使用socket创建tcp服务器和客户端
2018/04/12 Python
详解python中的装饰器
2018/07/10 Python
Centos部署django服务nginx+uwsgi的方法
2019/01/02 Python
对pandas通过索引提取dataframe的行方法详解
2019/02/01 Python
face++与python实现人脸识别签到(考勤)功能
2019/08/28 Python
解决TensorFlow程序无限制占用GPU的方法
2020/06/30 Python
HTML5 Canvas 旋转风车绘制
2017/08/18 HTML / CSS
美国开幕式潮店:Opening Ceremony
2018/02/10 全球购物
C++:memset ,memcpy和strcpy的根本区别
2013/04/27 面试题
《我不是最弱小的》教学反思
2014/02/23 职场文书
副职竞争上岗演讲稿
2014/05/12 职场文书
三方合作意向书范本
2015/05/09 职场文书
交通事故起诉书
2015/05/19 职场文书
观后感格式
2015/06/19 职场文书
2016春季运动会通讯稿
2015/07/18 职场文书