js生成验证码并验证
前台代码：
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="checkCode.js" type="text/javascript"></script>
<style type="text/css">
#code
{
font-family: Arial;
font-style: italic;
font-weight: bold;
border: 0;
letter-spacing: 2px;
color: blue;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<input type="text" id="input" />
<input type="button" id="code" onclick="createCode()" />
<input type="button" value="验证" onclick="validate()" />
</div>
</form>
</body>
</html>
我这里是aspx页面。
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("vali_code").value.toUpperCase(); //取得输入的验证码并转化为大写
if (inputCode.length <= 0) { //若输入的验证码长度为0
alert("请输入验证码！"); //则弹出请输入验证码
return false;
}
else if (inputCode != code) { //若输入的验证码与产生的验证码不一致时
alert("验证码输入错误！@_@"); //则弹出验证码输入错误
createCode(); //刷新验证码
document.getElementById("vali_code").value = ""; //清空文本框
return false;
}
else { //输入正确时
alert("^-^"); //弹出^-^
}
}
js生成验证码并验证的更多相关文章
- js生成验证码并且验证
<html> <head> <title>验证码</title> <style type="text/css"> #co ...
- js生成验证码并验证的登录页面
<!Doctype html> <html> <head> <meta charset="utf-8"/> <title> ...
- 纯js生成验证码
实现代码: <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"& ...
- JAVA WEB项目中生成验证码及验证实例（附源码及目录结构）
[我是一个初学者,自己总结和网上搜索资料,代码是自己敲了一遍,亲测有效,现将所有的目录结构和代码贴出来分享给像我一样的初学者] 作用 验证码为全自动区分计算机和人类的图灵测试的缩写,是一种区分用户是计 ...
- H5+JS生成验证码
效果图如下: <canvas id="canvas1" style="margin-left: 200px;"></canvas>< ...
- node.js生成验证码及图片
示例代码: var svgCaptcha = require('svg-captcha'); var fs = require('fs'); var codeConfig = { size: 5,// ...
- js生成验证码并检验
<html> <head> <title>验证码</title> <style type="text/css"> #co ...
- js生成验证码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- js生成验证码并且判断
<style type="text/css"> .code { font-family: Arial; ...
随机推荐
- [Storm] 内部消息缓存
这篇文件翻译自 http://www.michael-noll.com/blog/2013/06/21/understanding-storm-internal-message-buffers/ 当进 ...
- 格式化Double类型
//格式化Double类型 //F:默认是2位小数点 //F6:输出小数点后6位,不够的话用0补齐 //G:默认输出原先的,保留小数点后面的位数 LalTotal.Text = "合计:原始 ...
- 避免在WHERE条件中，在索引列上进行计算或使用函数，因为这将导致索引不被使用
点击(此处)折叠或打开 --在sal列上创建非唯一索引 scott@TESTDB11>create index idx_emp1_sal on emp1(sal); Index created. ...
- CSS使用自定义光标样式-遁地龙卷风
测试环境是chrome浏览器 Mozilla/5.0 (Windows NT 6.1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/43.0.2357. ...
- webpack 教程 那些事儿02-从零开始
接着上篇我们有了最简单的安装了webpack的项目目录这节我们从零开始搭建一个简单的基于webpack的spa应用demo本节只说基础常用配置项,复杂后续讲解. 文章目录 1. 新建项目结构目录,如下 ...
- java网络osi基础
- tomcat中配置jmx监控
1.在tomcat的start.bat中添加下面代码, -Dcom.sun.management.jmxremote.ssl=false -Dcom.sun.management.jmxremote. ...
- 网络之AFNetsorking
AFNetsorking作为功能全面的网络第三方,既通俗好用又与时俱进-及时的更新使用了NSURLSession,不得不爱. AFNetsorking使用: 1,AFNetsorking GET请求 ...
- OpenCV图像的缩放
函数介绍: 1.cvResize 改变图像大小 void cvResize(const CvArr *src, CvArr *dst, int interpolation) 函数说 ...
- net-snmp源码VS2013编译添加加密支持(OpenSSL)
net-snmp源码VS2013编译添加加密支持(OpenSSL) snmp v3 协议使用了基于用户的安全模型,具有认证和加密两个模块. 认证使用的算法是一般的消息摘要算法,例如MD5/SHA等.这 ...