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

 更新时间:2015年05月15日 11:18:07   投稿:hebedich  
众所周知,js是客户端的,那么把验证都做在客户端有意义吗?还是必须从服务器生成的验证码安全啊?前端生成的验证码安全吗?x下面我们来看个例子

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="#">
  &nbsp;<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>

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

相关文章

  • javascript中的 onchange事件详解

    javascript中的 onchange事件详解

    onchange 事件会在域的内容改变时发生,可用于单选框与复选框改变后触发的事件,本文通过示例代码介绍javascript中的 onchange事件,感兴趣的朋友跟随小编一起看看吧
    2023-10-10
  • 基于JavaScript实现网页版羊了个羊游戏

    基于JavaScript实现网页版羊了个羊游戏

    最近羊了个羊火的不得了,这篇文章主要为大家介绍了如何利用JS实现个网页版羊了个羊游戏,有需要的朋友可以借鉴参考下,希望能够有所帮助
    2022-09-09
  • 教你用Uniapp实现微信小程序的GPS定位打卡

    教你用Uniapp实现微信小程序的GPS定位打卡

    地图组件用于展示地图,而定位API只是获取坐标,请勿混淆两者,下面这篇文章主要给大家介绍了关于如何使用Uniapp实现微信小程序的GPS定位打卡的相关资料,需要的朋友可以参考下
    2022-11-11
  • Bootstrap表单控件使用方法详解

    Bootstrap表单控件使用方法详解

    Bootstrap让Web开发更迅速、更简单,这篇文章主要为大家详细介绍了Bootstrap表单控件,用来与用户做交流的一个网页控件,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-01-01
  • Javascript 遍历对象中的子对象

    Javascript 遍历对象中的子对象

    昨天同事问我一个问题:“有一个JSON对象,其中有若干个子对象,如何遍历这个对象中的子对象?”
    2009-07-07
  • 一道关于JavaScript变量作用域的面试题

    一道关于JavaScript变量作用域的面试题

    这篇文章主要为大家介绍了一道关于JavaScript变量作用域的面试题,如何解决这道面试题,感兴趣的小伙伴们可以参考一下
    2016-03-03
  • js事件监听机制(事件捕获)总结

    js事件监听机制(事件捕获)总结

    添加事件的js方法也很多,有直接加到页面结构上的,有使用一些js事件监听的方法,由于各个浏览器对事件冒泡事件监听的机制不同
    2014-08-08
  • 如何使用three.js 制作一个三维的推箱子游戏

    如何使用three.js 制作一个三维的推箱子游戏

    这篇文章主要介绍了如何使用three.js 制作一个三维的推箱子游戏,文中代码非常细致,帮助大家更好的理解和学习,感兴趣的朋友可以了解下
    2020-07-07
  • 深入理解JavaScript中的call、apply、bind方法的区别

    深入理解JavaScript中的call、apply、bind方法的区别

    下面小编就为大家带来一篇深入理解JavaScript中的call、apply、bind方法的区别。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-05-05
  • 图片上传之FileAPI与NodeJs

    图片上传之FileAPI与NodeJs

    本文主要介绍了使得我们处理图片上传更加简单的方法FileAPI。具有很好的参考价值,下面跟着小编一起来看下吧
    2017-01-01

最新评论