js生成验证码并直接在前端判断
编程学习 2021-07-04 21:48www.dzhlxh.cn编程入门
众所周知,js是客户端的,那么把验证都做在客户端有意义吗?还是必须从服务器生成的验证码安全啊?前端生成的验证码安全吗?x狼蚁网站SEO优化我们来看个例子
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>
以上所述就是本文的全部内容了,希望大家能够喜欢。