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 相关文章推荐
Package.js  现代化的JavaScript项目make工具
May 23 Javascript
javascript读写json示例
Apr 11 Javascript
JavaScript框架(iframe)操作总结
Apr 16 Javascript
javascript控制层显示或隐藏的方法
Jul 22 Javascript
javascript之Boolean类型对象
Jun 07 Javascript
第二篇Bootstrap起步
Jun 21 Javascript
require、backbone等重构手机图片查看器
Nov 17 Javascript
JS简单实现移动端日历功能示例
Dec 28 Javascript
将鼠标焦点定位到文本框最后(代码分享)
Jan 11 Javascript
Vue下滚动到页面底部无限加载数据的示例代码
Apr 22 Javascript
jquery实现的简单轮播图功能【适合新手】
Aug 17 jQuery
echarts实现获取datazoom的起始值(包括x轴和y轴)
Jul 20 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
追忆往昔!浅谈收音机的百年发展历史
2021/03/01 无线电
PHP数组及条件,循环语句学习
2012/11/11 PHP
PHP中的Streams详细介绍
2014/11/12 PHP
php简单实现多字节字符串翻转的方法
2015/03/31 PHP
php上传大文件设置方法
2016/04/14 PHP
PHP下用Swoole实现Actor并发模型的方法
2019/06/12 PHP
Laravel 微信小程序后端实现用户登录的示例代码
2019/11/26 PHP
php实现的证件照换底色功能示例【人像抠图/换背景图】
2020/05/29 PHP
动态改变textbox的宽高的js
2006/10/26 Javascript
javascript入门基础之私有变量
2010/02/23 Javascript
JS代码随机生成姓名、手机号、身份证号、银行卡号
2016/04/27 Javascript
Windows系统下安装Node.js的步骤图文详解
2016/11/15 Javascript
React学习之事件绑定的几种方法对比
2017/09/24 Javascript
zTree树形菜单交互选项卡效果的实现方法
2017/12/25 Javascript
Vue.directive()的用法和实例详解
2018/03/04 Javascript
深入了解javascript 数组的sort方法
2018/06/01 Javascript
在Vuex使用dispatch和commit来调用mutations的区别详解
2018/09/18 Javascript
element-ui表格合并span-method的实现方法
2019/05/21 Javascript
微信小程序 简易计算器实现代码实例
2019/09/02 Javascript
js HTML DOM EventListener功能与用法实例分析
2020/04/27 Javascript
python time模块用法实例详解
2014/09/11 Python
Python从函数参数类型引出元组实例分析
2019/05/28 Python
python-pyinstaller、打包后获取路径的实例
2019/06/10 Python
Python实现的统计文章单词次数功能示例
2019/07/08 Python
Python函数中的可变长参数详解
2019/09/12 Python
适合各种场合的美食礼品:Harry & David
2016/08/03 全球购物
世界上最大的糖果店:Dylan’s Candy Bar
2017/11/07 全球购物
Puma印度官网:德国运动品牌
2019/10/06 全球购物
大学生大二自我鉴定
2013/10/28 职场文书
工作自荐信
2013/12/11 职场文书
求职简历中个人的自我评价
2013/12/25 职场文书
《梅兰芳学艺》教学反思
2014/02/24 职场文书
初中语文教学研修日志
2015/11/13 职场文书
十大最强水系宝可梦,最美宝可梦排第三,榜首大家最熟悉
2022/03/18 日漫
vue项目配置sass及引入外部scss文件
2022/04/14 Vue.js
MySQL数据库中的锁、解锁以及删除事务
2022/05/06 MySQL