众所周知,js 是客户端的,那么把验证都做在客户端有意义吗?还是必须从服务器生成的验证码安全啊?前端生成的验证码安全吗?x 下面我们来看个例子
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
js 生成验证码并直接在前端判断
- <script type="text/javascript" src="img/jquery-1.5.1.min.js"></script>
- <script language="javascript" type="text/javascript">
- var code; //在全局 定义验证码
- var code2; //在全局 定义验证码
- function createCode() {
- code = "";
- var checkCode = document.getElementById("checkCode");
- function RndNum(n) {
- var rnd = "";
- for (var i = 0; i < n; i++)
- rnd += Math.floor(Math.random() * 10);
- return rnd;
- }
- var num = RndNum(2);
- var num2 = RndNum(2);
- code = num + "+" + num2 + "=";
- code2 = parseInt(num) + parseInt(num2)
- if (checkCode) {
- checkCode.className = "code";
- checkCode.value = code;
- }
- }
- </script>
- <script type="text/javascript">
- $(document).ready(function () {
- $("#input1").blur(function () {
- var inputCode = document.getElementById("input1").value;
- if (inputCode.length <= 0) {
- alert("请输入验证码!");
- }
- else if (inputCode != code2) {
- alert("验证码输入错误!");
- createCode(); //刷新验证码
- }
- else {
- alert("^-^ OK");
- }
- });
- })
- </script>
html:
- <form action="#">
- <input type="text" id="input1" />
- <input type="text" onclick="createCode()" readonly="readonly" id="checkCode"
- class="unchanged" style="width: 80px;background: #660099" />
- <br />
- </form>
CSS:
- <style type="text/css">
- .code
- {
- font-family: Arial;
- font-style: italic;
- color: Red;
- border: 0;
- padding: 2px 3px;
- letter-spacing: 3px;
- font-weight: bolder;
- }
- .unchanged
- {
- border: 0;
- }
- </style>
来源: http://www.phperz.com/article/17/0222/271301.html