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 相关文章推荐
用函数式编程技术编写优美的 JavaScript_ibm
May 16 Javascript
jQuery选中select控件 无法设置selected的解决方法
Sep 01 Javascript
jquery $.ajax()取xml数据的小问题解决方法
Nov 20 Javascript
php的文件上传入门教程(实例讲解)
Apr 10 Javascript
很全面的JavaScript常用功能汇总集合
Jan 22 Javascript
Query常用DIV操作获取和设置长度宽度的实现方法
Sep 19 Javascript
jquery插件bootstrapValidator数据验证详解
Nov 09 Javascript
javascript实现一个网页加载进度loading
Jan 04 Javascript
Ionic3实现图片瀑布流布局
Aug 09 Javascript
js实现input密码框显示/隐藏功能
Sep 10 Javascript
node基于async/await对mysql进行封装
Jun 20 Javascript
JS实现进度条动态加载特效
Mar 25 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二维数组的去重问题解析
2011/07/17 PHP
通过PHP current函数获取未知字符键名数组第一个元素的值
2013/06/24 PHP
PHP仿博客园 个人博客(2) 数据库增添改删
2013/07/05 PHP
php中current、next与reset函数用法实例
2014/11/17 PHP
thinkPHP2.1自定义标签库的导入方法详解
2016/07/20 PHP
php版交通银行网银支付接口开发入门教程
2016/09/26 PHP
php二维码生成以及下载实现
2017/09/28 PHP
PHP SPL 被遗落的宝石【SPL应用浅析】
2018/04/20 PHP
ThinkPHP3.1.2 使用cli命令行模式运行的方法
2020/04/14 PHP
如何让动态插入的javascript脚本代码跑起来。
2007/01/09 Javascript
纯js实现遮罩层效果原理分析
2014/05/27 Javascript
JavaScript按值删除数组元素的方法
2015/04/24 Javascript
javascript实现unicode与ASCII相互转换的方法
2015/12/10 Javascript
详解vue表单验证组件 v-verify-plugin
2017/04/19 Javascript
Bootstrap弹出框(Popover)被挤压的问题小结
2017/07/11 Javascript
Angular实现的自定义模糊查询、排序及三角箭头标注功能示例
2017/12/28 Javascript
理解Koa2中的async&amp;await的用法
2018/02/05 Javascript
微信小程序手机号码验证功能的实例代码
2018/08/28 Javascript
vue如何根据网站路由判断页面主题色详解
2018/11/02 Javascript
改变layer confirm弹窗按钮的颜色方法
2019/09/12 Javascript
js实现轮播图效果 z-index实现轮播图
2020/01/17 Javascript
Javascript操作select控件代码实例
2020/02/14 Javascript
[40:57]TI4 循环赛第二日 iG vs EG
2014/07/11 DOTA
django中静态文件配置static的方法
2018/05/20 Python
Python使用import导入本地脚本及导入模块的技巧总结
2019/08/07 Python
在pytorch中实现只让指定变量向后传播梯度
2020/02/29 Python
python asyncio 协程库的使用
2021/01/21 Python
瑜伽国际:Yoga International
2018/04/18 全球购物
预订旅游活动、景点和旅游:GetYourGuide
2019/09/29 全球购物
一组SQL面试题
2016/02/15 面试题
工艺员岗位职责
2014/02/11 职场文书
教师节商场活动方案
2014/02/13 职场文书
《小草和大树》教学反思
2014/02/16 职场文书
长江三峡导游词
2015/01/31 职场文书
2019员工保密协议书(3篇)
2019/09/23 职场文书
css布局巧妙技巧之css三角示例的运用
2022/03/16 HTML / CSS