一个纯前端JS验证码
来源:互联网 发布:剑三成女喵姐捏脸数据 编辑:程序博客网 时间:2024/05/22 11:34
之前在工作中发现一个纯前端JS验证码编写的验证码,比较简单易懂,在此作为收藏:
checkCode.js源码:
var code; // 在全局定义验证码// 生成验证码window.onload = function createCode() {code = "";var codeLength = 4;// 验证码的长度var checkCode = document.getElementById("code");var random = 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');// 随机数for (var i = 0; i < codeLength; i++) {// 循环操作var index = Math.floor(Math.random() * 36);// 取得随机数的索引(0~35)code += random[index];// 根据索引取得随机数加到code上}checkCode.value = code;// 把code值赋给验证码}// 校验验证码function validate() {var inputCode = document.getElementById("input").value.toUpperCase(); // 取得输入的验证码并转化为大写if (inputCode.length <= 0) { // 若输入的验证码长度为0alert("请输入验证码!"); // 则弹出请输入验证码return;} else if (inputCode != code) { // 若输入的验证码与产生的验证码不一致时alert("验证码输入错误!"); // 则弹出验证码输入错误createCode();// 刷新验证码document.getElementById("input").value = "";// 清空文本框return;} else { // 输入正确时 执行登录逻辑}}其CSS样式:
<style type="text/css"> #code { font-family:Arial; font-style:italic; font-weight:bold; border:0; letter-spacing:2px; color:blue; } </style>注意: id='code',相信 这个通过代码也应该都能看懂!!!!!
阅读全文
0 0
- 一个纯前端JS验证码
- js 前端验证码
- 前端静态基于纯js的最后一步验证
- 纯js随机生成验证码
- 纯js验证代码
- 纯js表单验证
- 转别人一个js前端验证上传文件大小限制
- 前端js+html实现简单验证码
- JS前端验证码的实现
- 纯 JS FCKEditor 输入验证
- js前端输入验证
- js前端验证脚本
- JS 前端验证 脚本
- 前端验证代码 - JS
- js 表单前端验证
- JS-Web前端验证
- JS前端验证
- [js]前端表单验证
- Spring Cloud 服务注册发现-路由-负载均衡-全链路日志跟踪-监控
- Android打包生成自定义文件名配置
- 贪吃蛇的多种实现
- laravel里面一个上传图片的接口,并建立软链接,访问图片
- linux开机跳过输入用户名密码
- 一个纯前端JS验证码
- 什么是多域名通配符SSL证书?
- mysql 索引
- js原型和原型链总结
- 炼数成金 Streams流计算引航公开课附讲义
- Ubuntu14.04调教手册(安装中文输入法等)
- 单链表(C++模板类)
- 算法架构系列活动—大数据风控技术应用
- 自动寻路方案