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 相关文章推荐
使用js获取QueryString的方法小结
Feb 28 Javascript
js中parseFloat(参数1,参数2)定义和用法及注意事项
Jan 27 Javascript
JavaScript中几个重要的属性(this、constructor、prototype)介绍
May 19 Javascript
ajax提交表单实现网页无刷新注册示例
May 08 Javascript
JavaScript通过Date-Mask将日期转换成字符串的方法
Jun 04 Javascript
HTML5实现留言和回复页面样式
Jul 22 Javascript
Bootstrap基本组件学习笔记之input输入框组(9)
Dec 07 Javascript
Angular 2父子组件数据传递之@ViewChild获取子组件详解
Jul 04 Javascript
关于微信小程序map组件z-index的层级问题分析
Jul 09 Javascript
node.js 使用 net 模块模拟 websocket 握手进行数据传递操作示例
Feb 11 Javascript
Vue项目中使用flow做类型检测的方法
Mar 18 Javascript
如何在vue-cli中使用css-loader实现css module
Jan 07 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
example1.php
2006/10/09 PHP
PHP怎么实现网站保存快捷方式方便用户随时浏览
2013/08/15 PHP
PHP的foreach中使用引用时需要注意的一个问题和解决方法
2014/05/29 PHP
PHP多维数组遍历方法(2种实现方法)
2015/12/10 PHP
php中输出json对象的值(实现方法)
2018/03/07 PHP
jquery1.9 下检测浏览器类型和版本的方法
2013/12/26 Javascript
jquery中对于批量deferred的处理方法
2014/01/22 Javascript
js中 计算两个日期间的工作日的简单实例
2016/08/08 Javascript
原生js编写焦点图效果
2016/12/08 Javascript
NPM 安装cordova时警告:npm WARN deprecated minimatch@2.0.10: Please update to minimatch 3.0.2 or higher to
2016/12/20 Javascript
微信小程序之页面跳转和参数传递的实现
2017/09/29 Javascript
JS实现的按钮点击颜色切换功能示例
2017/10/19 Javascript
Angular5中调用第三方js插件的方法
2018/02/26 Javascript
Vue自定义弹窗指令的实现代码
2018/08/13 Javascript
JavaScript实现JSON合并操作示例【递归深度合并】
2018/09/07 Javascript
vue-router 起步步骤详解
2019/03/26 Javascript
详解React服务端渲染从入门到精通
2019/03/28 Javascript
如何在Angular8.0下使用ngx-translate进行国际化配置
2019/07/24 Javascript
微信小游戏中three.js离屏画布的示例代码
2020/10/12 Javascript
[06:35]2014DOTA2国际邀请赛 老男孩梦圆西雅图中国军团世界最强
2014/07/22 DOTA
python使用PyQt5的简单方法
2019/02/27 Python
python识别图像并提取文字的实现方法
2019/06/28 Python
python自动化测试无法启动谷歌浏览器问题
2019/10/10 Python
pygame实现五子棋游戏
2019/10/29 Python
python+OpenCV实现车牌号码识别
2019/11/08 Python
django实现web接口 python3模拟Post请求方式
2019/11/19 Python
python使用协程实现并发操作的方法详解
2019/12/27 Python
检测tensorflow是否使用gpu进行计算的方式
2020/02/03 Python
matlab中imadjust函数的作用及应用举例
2020/02/27 Python
Python ArgumentParse的subparser用法说明
2020/04/20 Python
Python3基于print打印带颜色字符串
2020/07/06 Python
拾金不昧表扬信范文
2014/01/11 职场文书
安全大检查实施方案
2014/02/22 职场文书
求职简历自我评价怎么写
2015/03/10 职场文书
考研导师推荐信范文
2015/03/27 职场文书
2016教师节问候语
2015/11/10 职场文书