使用JavaScript实现非法输入字符实时过滤

2016-04-11

1. 前言
2. 解决
3. 说明

前言

　　表单提交是一项常见操作，对于输入内容的合法性必须在前后端都做验证才能保证可靠性。表单验证有很重要的意义，除了防止注入攻击之类的安全问题外，有时如果不能正确的进行验证，可能会使合法的页面渲染受到影响。比如在实际开发中遇到的一种问题，jsp页面使用JSTL库自定义标签渲染后台传来的数据时，需要将这组数据作为参数传入相应点击事件的回调函数，如果参数中一旦也有双引号”，就会导致解析错误—onclick属性值未能正常闭合。如下图所示：

解决

　　一般前端表单验证有以下几种方式：

html5自带表单验证，如maxLength、min、max等
jQuery第三方验证库：jquery.validate.js
自定义正则表达式进行验证

　　一般的交互提示形式有以下几种：

随着输入结束表单元素（如输入框）失去焦点，旁边提示tip
点击确定提交表单时，弹出模态框提示有误
实时监测输入内容，对于非法输入直接过滤（即无法向输入框中输入这些非法字符）

本文采用：自定义正则表达式 + 实时监测输入内容，对于非法输入直接过滤

html文件：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery-1.12.4.js"></script>
    <script src="test.js"></script>
</head>
<body>
<h1>非法字符过滤</h1>
<span>请勿输入非法字符：~！!@#$^￥%…&*()—+{}“”《》?？<>'"</span>
<input id="ind_name" type="text" placeholder="请输入指标名称"/>
</body>
</html>

js文件：

/**
 * Created by gaochang on 2016/10/11.
 */
$(function(){
    $("#ind_name").on("input propertychange", function(){
        var reg = /\~|\！|\!|\@|\#|\$|\^|\￥|\%|\…|\&|\*|\(|\)|\—|\+|\{|\}|\“|\”|\《|\》|\?|\？|\<|\>|\'|\"/g;
        $("#ind_name").val($(this).val().replace(reg, ""));
    })
})

说明

　　以上js代码中,使用了监听输入框值变化的标准方法oninput。oninput事件在IE9以下版本不支持，需要使用IE特有的onpropertychange事件替代。由于使用了jQuery，因此在输入框上直接绑定这两个事件即可。