首页 > 编程 > JavaScript > 正文

js生成验证码并直接在前端判断

2019-11-20 12:28:06
字体:
来源:转载
供稿:网友

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>

以上所述就是本文的全部内容了,希望大家能够喜欢。

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表