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


Posted in Javascript onMay 15, 2015

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>

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

Javascript 相关文章推荐
JS实现浏览器菜单命令
Sep 05 Javascript
强悍无比的WEB开发好助手FireBug(Firefox Plugin)
Jan 16 Javascript
JavaScript实现Sleep函数的代码
Mar 04 Javascript
Javascript 类与静态类的实现
Apr 01 Javascript
利用js的Node遍历找到repeater的一个字段实例介绍
Apr 25 Javascript
javascript制作的简单注册模块表单验证
Apr 13 Javascript
js仿微博动态栏功能
Feb 22 Javascript
Webpack打包css后z-index被重新计算的解决方法
Jun 18 Javascript
微信小程序之多文件下载的简单封装示例
Jan 29 Javascript
详解element-ui中form验证杂记
Mar 04 Javascript
深入理解vue中的slot与slot-scope
Apr 22 Javascript
从0到1学习JavaScript编写贪吃蛇游戏
Jul 28 Javascript
javascript实现表格增删改操作实例详解
May 15 #Javascript
javascript实现可全选、反选及删除表格的方法
May 15 #Javascript
javascript实现点击商品列表checkbox实时统计金额的方法
May 15 #Javascript
javascript实现Table排序的方法
May 15 #Javascript
Javascript动态创建表格及删除行列的方法
May 15 #Javascript
javascript制作的滑动图片菜单
May 15 #Javascript
Javascript通过overflow控制列表闭合与展开的方法
May 15 #Javascript
You might like
php中获取指定IP的物理地址的代码(正则表达式)
2011/06/23 PHP
php将url地址转化为完整的a标签链接代码(php为url地址添加a标签)
2014/01/17 PHP
PHP数组中头部和尾部添加元素的方法(array_unshift,array_push)
2017/04/10 PHP
javascript 客户端验证上传图片的大小(兼容IE和火狐)
2009/08/15 Javascript
js获取图片长和宽度的代码
2009/11/24 Javascript
超轻量级的基于jquery的三级展开列表
2011/04/26 Javascript
JS实现鼠标滑过链接改变网页背景颜色的方法
2015/10/20 Javascript
快速掌握Node.js之Window下配置NodeJs环境
2016/03/21 NodeJs
JavaScript直播评论发弹幕切图功能点集合效果代码
2016/06/26 Javascript
浅谈javascript中关于日期和时间的基础知识
2016/07/13 Javascript
JavaScript制作颜色反转小游戏
2016/09/25 Javascript
Vue常用指令V-model用法
2017/03/08 Javascript
微信小程序中input标签详解及简单实例
2017/05/18 Javascript
underscore之Chaining_动力节点Java学院整理
2017/07/10 Javascript
bootstrap动态调用select下拉框的实例代码
2018/08/09 Javascript
JS动画实现回调地狱promise的实例代码详解
2018/11/08 Javascript
详解javascript设计模式三:代理模式
2019/03/25 Javascript
Websocket 向指定用户发消息的方法
2020/01/09 Javascript
[02:03]《现实生活中的DOTA2》—林书豪&DOTA2职业选手出演短片
2015/08/18 DOTA
python实现识别相似图片小结
2016/02/22 Python
Python端口扫描简单程序
2016/11/10 Python
Java及python正则表达式详解
2017/12/27 Python
python迭代器常见用法实例分析
2019/11/22 Python
Python字符串中删除特定字符的方法
2020/01/15 Python
python 高阶函数简单介绍
2021/02/19 Python
使用phonegap进行提示操作的具体方法
2017/03/30 HTML / CSS
Prototype中如何为一个元素添加一个方法
2014/12/08 面试题
统计员岗位职责
2013/11/14 职场文书
餐饮企业总经理岗位职责范文
2014/02/18 职场文书
《美丽的田园》教学反思
2014/03/01 职场文书
中央空调节能方案
2014/06/15 职场文书
幼儿园中班区域活动总结
2014/07/09 职场文书
竞选纪律委员演讲稿
2014/09/13 职场文书
自查自纠整改报告
2014/11/06 职场文书
乔迁之喜答谢词
2015/01/05 职场文书
JavaScript前端面试扁平数据转tree与tree数据扁平化
2022/06/14 Javascript