input 禁止输入特殊字符的四种实现方式_javascript技巧

<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 禁止输入特殊字符的四种实现方式,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!

以上是小编为您精心准备的的内容,在的博客、问答、公众号、人物、课程等栏目也有的相关内容,欢迎继续使用右上角搜索按钮进行搜索input
禁止特殊字符
javascript特殊字符、input过滤特殊字符、input特殊字符、input 禁止特殊字符、input value 特殊字符,以便于您获取更多的相关知识。

时间: 2025-01-20 19:00:17

input 禁止输入特殊字符的四种实现方式_javascript技巧的相关文章

JavaScript实现页面跳转的几种常用方式_javascript技巧

本文实例讲述了JavaScript实现页面跳转的几种常用方式.分享给大家供大家参考,具体如下: 第一种: <script language="javascript" type="text/javascript"> window.location.href="login.jsp?backurl="+window.location.href; </script> 第二种: <script language="j

收集json解析的四种方法分享_javascript技巧

Json在Web开发的用处非常广泛,作为数据传递的载体,如何解析Json返回的数据是非常常用的.下面介绍下四种解析Json的方式: Part 1 复制代码 代码如下: var list1 = [1,3,4];alert(list1[1]);var list2 = [{"name":"leamiko","xing":"lin"}];alert(list2[0]["xing"])alert(list2[0].x

javascript中createElement的两种创建方式_javascript技巧

本文实例讲述了javascript中createElement的两种创建方式.分享给大家供大家参考.具体实现方法如下: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>CreateElement

js的form表单提交url传参数(包含+等特殊字符)的两种解决方法_javascript技巧

方法一:(伪装form表单提交) linkredwin = function(A,B,C,D,E,F,G){ var formredwin = document.createElement("form"); formredwin.method = 'POST'; document.body.appendChild(formredwin); formredwin.action = "http://www.A.com/A.wiki?A=" +encodeURI(A) +

js 数组去重的四种实用方法_javascript技巧

面试前端必须准备的一个问题:怎样去掉Javascript的Array的重复项.据我所知,百度.腾讯.盛大等都在面试里出过这个题目.这个问题看起来简单,但是其实暗藏杀机. 考的不仅仅是实现这个功能,更能看出你对计算机程序执行的深入理解. 我总共想出了三种算法来实现这个目的: Array.prototype.unique1 = function() { var n = []; //一个新的临时数组 for(var i = 0; i < this.length; i++) //遍历当前数组 { //如

js修改onclick动作的四种方法(推荐)_javascript技巧

第一种:button.onclick = Function("alert('hello');"); 第二种:button.onclick = function(){alert("hello"); }; 第三种:button.onclick = myAlert;               function myAlert(){                      alert("hello");               } 第四种: 这种

JS 动态加载js文件和css文件 同步/异步的两种简单方式_javascript技巧

/*动态添加js或css,URL:文件路径,FileType:文件类型(js/css)*/ function AddJsFiles(URL,FileType){ var oHead = document.getElementsByTagName('HEAD').item(0); var addheadfile; if(FileType=="js"){ addheadfile= document.createElement("script"); addheadfile

js表格排序实例分析(支持int,float,date,string四种数据类型)_javascript技巧

本文实例讲述了js表格排序的方法.分享给大家供大家参考.具体如下: <html> <head> <title>SortTable2</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <script type="text/javascript"> var k=0; /**//*

Javascript 函数的四种调用模式_javascript技巧

Javascript 函数的四种调用模式 1  函数模式      最普通的函数调用 // 声明式函数 function fn1 () { console.log(this); } // 函数表达式函数 var fn2 = function() { console.log(this); }; // 调用 函数中this表示全局对象,在浏览器中就是指window fn1(); //window fn2(); //window  2 方法模式      函数依附于一个对象,是对象的一个属性,我们再调