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

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

赞 (0)

相关推荐

  • js控制input输入字符解析

    ENTER键可以让光标移到下一个输入框 <input onkeydown="if(event.keyCode==13)event.keyCode=9" > 只能是中文<input onkeyup="value=value.replace(/[ -~]/g,'')" onkeydown="if(event.keyCode==13)event.keyCode=9"> 屏蔽输入法<input style="ime

  • Flex中TextInput组件设置限制某些字符的输入的方法

    1. 限制某个字符的输入,用符号 ^ 跟上要限制的字符,可跟多个字符 <!-- 限制字符"~"的输入 --> <mx:TextInput id="xxx" restrict="^~" /> <!-- 限制字符"ab"的输入 --> <mx:TextInput id="xxx" restrict="^ab" /> 2. 设置只能输入某些字符,

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

    <span style="font-family: Arial, Helvetica, sans-serif; background-color: rgb(255, 255, 255);">昨天项目搜索的时候报错,蛋疼的是生产库中的,看了下日志,原因是用户搜索的时候输入了特殊字符,没办法最快捷的办法是直接把用户输入的数据进行筛选,去掉特殊字符</span> 有些特殊字符传入到后台是会产生错误的 有可能会sql注入,所以从根本上拦截 下面一起探讨下input禁止输

  • SpringMVC的REST风格的四种请求方式总结

    一. 在HTTP 协议里面,四个表示操作方式的动词:GET.POST.PUT.DELETE. 它们分别对应四种基本操作: 1.GET ====== 获 取资源 2.POST ======新建资源 3.PUT======= 更新资源 4.DELETE==== 删除资源 二.REST:即 Representational State Transfer.(资源)表现层状态转化.是目前最流行的一种互联网软件架构.它结构清晰.符合标准.易于理解.扩展方便, 所以正得到越来越多网站的采用. 我们可以通过re

  • buildAdmin开源项目引入四种图标方式详解

    目录 正文 引入Element-Plus图标库 引入Iconfont图标库 引入FontAwesome图标库 引入本地svg图标 正文 在项目开发中,我们经常使用可能都是UI组件库里的图标,当然由于业务需要,可能当前图标库没有我们需要的图标这时候就需要引入其它图标库的图标,比如iconfont.FontAweSome.本地图标库.在了解引入这些图标库之前,我们先学习一下各种图标库的引入使用: Element-Plus:由于elemen官方已经把图标封装成了组件,所以当我们引入图标的时候,需要全局

  • 浅谈Java中的四种引用方式的区别

    强引用.软引用.弱引用.虚引用的概念 强引用(StrongReference) 强引用就是指在程序代码之中普遍存在的,比如下面这段代码中的object和str都是强引用: Object object = new Object(); String str = "hello"; 只要某个对象有强引用与之关联,JVM必定不会回收这个对象,即使在内存不足的情况下,JVM宁愿抛出OutOfMemory错误也不会回收这种对象. 比如下面这段代码: public class Main { publi

  • Android开发之基本控件和四种布局方式详解

    Android开发之基本控件和四种布局方式详解

    Android中的控件的使用方式和iOS中控件的使用方式基本相同,都是事件驱动.给控件添加事件也有接口回调和委托代理的方式.今天这篇博客就总结一下Android中常用的基本控件以及布局方式.说到布局方式Android和iOS还是区别挺大的,在iOS中有Frame绝对布局和AutoLayout相对布局.而在Android中的布局方式就比较丰富了,今天博客中会介绍四种常用的布局方式.先总结一下控件,然后再搞一搞基本方式,开发环境还是用的Mac下的Android Studio.开始今天的正题, 虽然A

  • 浅谈js函数三种定义方式 & 四种调用方式 & 调用顺序

    在Javascript定义一个函数一般有如下三种方式: 函数关键字(function)语句: function fnMethodName(x){alert(x);} 函数字面量(Function Literals): var fnMethodName = function(x){alert(x);} Function()构造函数: var fnMethodName = new Function('x','alert(x);') // 由Function构造函数的参数个数可变.最后一个参数写函数体

  • Map集合的四种遍历方式代码示例

    很久以前写的代码,和上一个做比较吧!便于以后查看. import java.util.HashMap; import java.util.Iterator; import java.util.Map; public class TestMap { public static void main(String[] args) { Map<Integer, String> map = new HashMap<Integer, String>(); map.put(1, "a&

  • 详解Android四种存储方式

    在Android程序开发中我们经常遇到四种数据存储方式,每种存储方式都各有不同:以下我分别列举了Android开发中的不同存储方式的特点 一,Preferences Preferences是一个较轻量级的存储数据的方法,具体使用方法: 在A中保存值: SharedPreferences.Editor sharedata = getSharedPreferences("data", 0).edit(); sharedata.putString("name","

  • Java对象的四种引用方式实例分析

    Java对象的四种引用方式实例分析

    本文实例讲述了Java对象的四种引用方式.分享给大家供大家参考,具体如下: 一 点睛 Java语言对对象的引用有如下四种方式 强引用:我们平时一般都是这种引用,当一个对象被一个或一个以上的引用变量所引用时,它处于可达状态,不可能被系统垃圾回收机制回收. 软引用:软引用需要通过SoftReference类来实现,当一个对象只具有软引用时,它有可能被垃圾回收机制回收.对于只有软引用的对象而言,当系统内存空间足够时,它不会被系统回收,程序也可以使用该对象,当系统内存空间不够时,系统可能回收它.软引用通

  • thinkPHP5.1框架中Request类四种调用方式示例

    本文实例讲述了thinkPHP5.1框架中Request类四种调用方式.分享给大家供大家参考,具体如下: 1. 传统调用 访问方式:http://127.0.0.1/demo/demo3/test?name=kk&age=22 <?php /** * Created by PhpStorm. * User: 10475 * Date: 2018/8/27 * Time: 22:59 */ namespace app\demo\controller; use think\Request; cl

随机推荐