众所周知，js是客户端的，那么把验证都做在客户端有意义吗？还是必须从服务器生成的验证码安全啊？前端生成的验证码安全吗？x下面我们来看个例子
js生成验证码并直接在前端判断
<script type="text/javascript" src="https://www.jb51.net/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" /> <input type="text" readonly="readonly"/><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>
以上所述就是本文的全部内容了，希望大家能够喜欢。
您可能感兴趣的文章: