jquery实现验证码检验功能（前端）

最新推荐文章于 2024-08-03 23:12:36 发布

张菁海

最新推荐文章于 2024-08-03 23:12:36 发布

阅读量496

点赞数

文章标签：前端 jquery javascript

本文链接：https://blog.csdn.net/dhyway/article/details/131432671

版权

用jquery实现前端验证码的功能，校验
效果图如下：
在这里插入图片描述
html代码如下：

 <p>
          <label>      验证码：</label>
        <div class="code" id="checkCode" onclick="createCode()" ></div>
        <a class="yz"  href="#" onclick="createCode()">看不清换一张</a>
        </p>
        <p>
          <label>请输入验证码：</label><input id="YZ" name="yz" width="30px;">
        </p>
        <input class="btttom"  type="button" name="OK" id="OK" onclick="GetDom()" value="确认"/>

样式代码：

 /*验证码*/
    .code
    {
      background-color: silver;
      font-family:Arial; /*设置字体*/
      font-style:initial;
      color:brown;
      font-size:20px;
      border:0;
      padding:2px 3px;
      letter-spacing:3px;
      font-weight:bolder;

      width:81px;
      height:23px;
      margin-left: 120px;
      margin-top: -35px;

    }
    a
    {
      text-decoration:none;
      font-size:12px;
      color:#288bc4;
    }
    a:hover
    {
      text-decoration:underline;
    }
    .yz{
      position: absolute;
      margin-left: 220px;
      margin-top:-10px;
    }

js代码：

function GetDom(){
    if($("#YZ").value==""){
      alert("验证码不能为空！");
      createCode();//输错一次或提交一次都将会刷新一次验证码
      return false; //结束本次会话
    }else if(document.getElementById("YZ").value.toUpperCase()!=code.toUpperCase()){ //toUpperCase不区分大小写
      alert("您输入的验证码有误，请重新输入！！");
      createCode();//读取文件
    }
    else{
      alert("ok");
    }
  }

  var code;
  function createCode() {  //函数体
    code = "";
    var codeLength = 5; //验证码的长度
    var checkCode = document.getElementById("checkCode");
    var codeChars = new Array(0, 1, 2, 3, 4, 5, 6, 7, 8, 9,
            'a','b','c','d','e','f','g','h','i','j','k','l','m','n','o','p','q','r','s','t','u','v','w','x','y','z',
            'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'); //所有候选组成验证码的字符，当然也可以用中文的
    for (var i = 0; i < codeLength; i++)
    {
      var charNum = Math.floor(Math.random() * 52);//设置随机产生
      code += codeChars[charNum];
    }
    if (checkCode)
    {
      checkCode.className = "code";
      checkCode.innerHTML = code;
    }
  }

欢迎交流！！！