前言
表单提交是一项常见操作,对于输入内容的合法性必须在前后端都做验证才能保证可靠性。表单验证有很重要的意义,除了防止注入攻击之类的安全问题外,有时如果不能正确的进行验证,可能会使合法的页面渲染受到影响。比如在实际开发中遇到的一种问题,jsp页面使用JSTL库自定义标签
解决
一般前端表单验证有以下几种方式:
- html5自带表单验证,如
maxLength
、min
、max
等 - jQuery第三方验证库:jquery.validate.js
- 自定义正则表达式进行验证
一般的交互提示形式有以下几种:
- 随着输入结束表单元素(如输入框)失去焦点,旁边提示tip
- 点击确定提交表单时,弹出模态框提示有误
- 实时监测输入内容,对于非法输入直接过滤(即无法向输入框中输入这些非法字符)
本文采用: 自定义正则表达式 + 实时监测输入内容,对于非法输入直接过滤
html文件:1
2
3
4
5
6
7
8
9
10
11
12
13
14
<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文件:1
2
3
4
5
6
7
8
9/**
* 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,因此在输入框上直接绑定这两个事件即可。