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 事件属性绑定带参数的函数
Mar 13 Javascript
php对mongodb的扩展(初识如故)
Nov 11 Javascript
详解jquery中$.ajax方法提交表单
Nov 03 Javascript
chrome浏览器当表单自动填充时如何去除浏览器自动添加的默认样式
Oct 09 Javascript
Vue.js组件tree实现无限级树形菜单
Dec 02 Javascript
JS实现遍历不规则多维数组的方法
Mar 21 Javascript
详解如何使用webpack打包多页jquery项目
Feb 01 jQuery
vue动态子组件的两种实现方式
Sep 01 Javascript
微信小程序接入腾讯云验证码的方法步骤
Jan 07 Javascript
Vue computed 计算属性代码实例
Apr 22 Javascript
15个简单的JS编码标准让你的代码更整洁(小结)
Jul 16 Javascript
Vue 数据绑定的原理分析
Nov 16 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
丧钟首部独立剧集《丧钟:骑士与龙》北美正式开播,场面血腥
2020/04/09 欧美动漫
PHP 数组遍历方法大全(foreach,list,each)
2010/06/30 PHP
php实现的微信红包算法分析(非官方)
2015/09/25 PHP
PHP简单判断手机设备的方法
2016/08/23 PHP
PHP检查URL包含特定字符串实例方法
2019/02/11 PHP
Swoole实现异步投递task任务案例详解
2019/04/02 PHP
PHP 枚举类型的管理与设计知识点总结
2020/02/13 PHP
js实现网页倒计时、网站已运行时间功能的代码3例
2014/04/14 Javascript
jQuery带箭头提示框tooltips插件集锦
2014/11/17 Javascript
JavaScript移除数组内重复元素的方法
2015/03/18 Javascript
实例解析JS布尔对象的toString()方法和valueOf()方法
2015/10/25 Javascript
Angularjs实现上传图片预览功能
2017/09/01 Javascript
简述JS浏览器的三种弹窗
2018/07/15 Javascript
js实现轮播图的完整代码
2020/10/26 Javascript
微信小程序自定义导航栏实例代码
2019/04/05 Javascript
angular 实现同步验证器跨字段验证的方法
2019/04/11 Javascript
vue中实现Monaco Editor自定义提示功能
2019/07/05 Javascript
[01:00:35]2018DOTA2亚洲邀请赛3月30日B组 EffcetVSMineski
2018/03/31 DOTA
Python简单实现控制电脑的方法
2018/01/22 Python
python3+PyQt5图形项的自定义和交互 python3实现page Designer应用程序
2020/07/20 Python
使用Pandas的Series方法绘制图像教程
2019/12/04 Python
Python使用pymysql模块操作mysql增删改查实例分析
2019/12/19 Python
Python2与Python3的区别详解
2020/02/09 Python
Django vue前后端分离整合过程解析
2020/11/20 Python
Python应用自动化部署工具Fabric原理及使用解析
2020/11/30 Python
Bravofly德国:预订廉价航班和酒店
2019/09/22 全球购物
LACOSTE波兰官网:Polo衫、服装和鞋类
2020/09/29 全球购物
怎样创建、运行java程序
2014/08/01 面试题
求职信格式范本
2013/11/15 职场文书
个人担保书格式范文
2014/05/12 职场文书
奥巴马英文演讲稿
2014/05/15 职场文书
英文求职信范文
2014/05/23 职场文书
公司委托书格式范文
2014/10/09 职场文书
大连星海广场导游词
2015/02/10 职场文书
八一建军节慰问信
2015/02/14 职场文书
Java 将PPT幻灯片转为HTML文件的实现思路
2021/06/11 Java/Android