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 ajax 检测用户注册时用户名是否存在
Nov 03 Javascript
Jquery之Ajax运用 学习运用篇
Sep 26 Javascript
jQuery判断密码强度实现思路及代码
Apr 24 Javascript
文档对象模型DOM通俗讲解
Nov 01 Javascript
javascript弹出层输入框(示例代码)
Dec 11 Javascript
JS烟花背景效果实现方法
Mar 03 Javascript
js中this用法实例详解
May 05 Javascript
jQuery+ajax实现无刷新级联菜单示例
May 21 Javascript
JavaScript中 ES6 generator数据类型详解
Aug 11 Javascript
gulp教程_从入门到项目中快速上手使用方法
Sep 14 Javascript
vue2.0 兄弟组件(平级)通讯的实现代码
Jan 15 Javascript
微信小程序实现组件顶端固定或底端固定效果(不随滚动而滚动)
Apr 09 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
fleaphp crud操作之find函数的使用方法
2011/04/23 PHP
win7系统配置php+Apache+mysql环境的方法
2015/08/21 PHP
yii2-GridView在开发中常用的功能及技巧总结
2017/01/07 PHP
宝塔面板在NGINX环境中TP5.1如何运行?
2021/03/09 PHP
js实现addClass,removeClass,hasClass的函数代码
2011/07/13 Javascript
jquery修改属性值实例代码(设置属性值)
2014/01/06 Javascript
javascript实现客户端兼容各浏览器创建csv并下载的方法
2015/03/23 Javascript
一种新的javascript对象创建方式Object.create()
2015/12/28 Javascript
实例讲解使用原生JavaScript处理AJAX请求的方法
2016/05/10 Javascript
简单实现js无缝滚动效果
2017/02/05 Javascript
详解Javascript百度地图接口开发文档中的类和方法
2017/02/07 Javascript
利用Vue.js实现求职在线之职位查询功能
2017/07/03 Javascript
Vue表单之v-model绑定下拉列表功能
2019/05/14 Javascript
uni-app如何页面传参数的几种方法总结
2020/04/28 Javascript
python通过shutil实现快速文件复制的方法
2015/03/14 Python
python实现连接mongodb的方法
2015/05/08 Python
python数据类型判断type与isinstance的区别实例解析
2017/10/31 Python
在python win系统下 打开TXT文件的实例
2018/04/29 Python
Python构建图像分类识别器的方法
2019/01/12 Python
python pillow模块使用方法详解
2019/08/30 Python
Python读取实时数据流示例
2019/12/02 Python
关于Keras模型可视化教程及关键问题的解决
2020/01/24 Python
python实现简单学生信息管理系统
2020/04/09 Python
详解Python的爬虫框架 Scrapy
2020/08/03 Python
HTML5 虚拟键盘出现挡住输入框的解决办法
2017/02/14 HTML / CSS
美国顶级品牌男士大码服装店:DXL
2017/08/30 全球购物
波兰在线儿童和婴儿用品零售商:pinkorblue
2019/06/29 全球购物
师范生自我鉴定范文
2013/10/05 职场文书
春节晚会主持词
2014/03/24 职场文书
退学证明范本3篇
2014/10/29 职场文书
毕业实习证明范本
2015/06/16 职场文书
Nginx四层负载均衡的配置指南
2021/06/11 Servers
PyTorch中的torch.cat简单介绍
2022/03/17 Python
Java 超详细讲解设计模式之中的抽象工厂模式
2022/03/25 Java/Android
Nginx虚拟主机的配置步骤过程全解
2022/03/31 Servers
彩虹社八名人气艺人全新周边限时推出,性转女装男装一次拥有!
2022/04/01 日漫