JS实现的一个验证码,可以在前端验证后在提交action
js实现的一个验证码功能,可以在前端判断验证码输入是否正确
输入的邮箱格式是否正确
验证成功后才提交action到后台
<!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>
<title>无标题页</title>
<style type="text/css">
.code
{
<!--可以放一张背景图片更好看-->
background-image:url(code.jpg);
font-family:Arial;
font-style:italic;
color:Red;
border:;
padding:2px 3px;
letter-spacing:3px;
font-weight:bolder;
}
.unchanged
{
border:;
}
</style>
<script language="javascript" type="text/javascript"> var code ; //在全局 定义验证码
function createCode()
{
code = "";
var codeLength = ;//验证码的长度
var checkCode = document.getElementById("checkCode");
var selectChar = new Array(,,,,,,,,,,'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=;i<codeLength;i++)
{ var charIndex = Math.floor(Math.random()*);
code +=selectChar[charIndex]; }
// alert(code);
if(checkCode)
{
checkCode.className="code";
checkCode.value = code;
} } function validate ()
{
var inputCode = document.getElementById("input1").value;
if(inputCode.length <=)
{
document.getElementById("yzm").innerText="请输入验证码!";
return false; }
else if(inputCode != code )
{
document.getElementById("yzm").innerText="验证码输入错误!";
//alert("验证码输入错误!");
createCode();//刷新验证码
return false;
}
else
{
var inputCode = document.getElementById("email").value;
if(inputCode.length <=)
{
document.getElementById("yzm").innerText="请输入您的邮箱,方便我们联系您!";
return false;
}else{ //提交action
var f = document.forms[];
f.action="";
f.submit();
}
} }
<!-- 可以控制验证是否是邮箱格式
function emailCheck() {
var objName = document.getElementById("email");
var pattern = /^([a-zA-Z0-]+[_|\_|\.]?)*[a-zA-Z0-]+@([a-zA-Z0-]+[_|\_|\.]?)*[a-zA-Z0-]+\.[a-zA-Z]{,}$/;
if (!pattern.test(objName.value)) {
document.getElementById("yzm").innerText="请输入正确的邮箱地址!";
objName.focus();
document.getElementById("email").innerText="";
return false;
}
document.getElementById("yzm").innerText="";
return true;
}
-->
</script>
</head>
<body onload="createCode()">
<form action="#">
<input type="text" id="input1" placeholder="此项必填哦"/>
<input type="text" onclick="createCode()" readonly="readonly" id="checkCode" class="unchanged" style="width: 80px" /><br />
<input id="Button1" onclick="validate();" type="button" value="确定" />
<label id="yzm" style="color:red;margin-left:15em"></label>
</form>
</body>
</html>
JS实现的一个验证码,可以在前端验证后在提交action的更多相关文章
- 使用 js 和 Beacon API 实现一个简易版的前端埋点监控 npm 包
使用 js 和 Beacon API 实现一个简易版的前端埋点监控 npm 包 前端监控,埋点,数据收集,性能监控 Beacon API https://caniuse.com/beacon 优点,请 ...
- 用Vue.js开发一个电影App的前端界面
我们要构建一个什么样的App? 我们大多数人使用在线流媒体服务(如Netflix)观看我们最喜欢的电影或者节目.这篇文章将重点介绍如何通过使用vue.js 2 建立一个类似风格的电影流媒体WEB交互界 ...
- 本博文将一步步带领你实现抽屉官网的各种功能:包括登陆、注册、发送邮箱验证码、登陆验证码、页面登陆验证、发布文章、上传图片、form验证、点赞、评论、文章分页处理以及基于tronado的后端和ajax的前端数据处理。
本博文将一步步带领你实现抽屉官网的各种功能:包括登陆.注册.发送邮箱验证码.登陆验证码.页面登陆验证.发布文章.上传图片.form验证.点赞.评论.文章分页处理以及基于tronado的后端和ajax的 ...
- node.js 模拟自动发送邮件验证码
node.js 模拟自动发送邮件验证码 引言 正文 1. QQ邮箱设置 2. 安装nodemailer 3.配置信息 4.综合 5.讲解 结束语 引言 先点赞,再看博客,顺手可以点个关注. 微信公众号 ...
- 基于gulp编写的一个简单实用的前端开发环境好了,安装完Gulp后,接下来是你大展身手的时候了,在你自己的电脑上面随便哪个地方建一个目录,打开命令行,然后进入创建好的目录里面,开始撸代码,关于生成的json文件请点击这里https://docs.npmjs.com/files/package.json,打开的速度看你的网速了注意:以下是为了演示 ,我建的一个目录结构,你自己可以根据项目需求自己建目
自从Node.js出现以来,基于其的前端开发的工具框架也越来越多了,从Grunt到Gulp再到现在很火的WebPack,所有的这些新的东西的出现都极大的解放了我们在前端领域的开发,作为一个在前端领域里 ...
- 关于引入多个jquery冲突的问题(附一个很好用的validate前端验证框架及使用方法)
废话不多说,进入正题: 如果一个jsp中想要使用两个不同版本的jquery怎么办呢?客官往下看: <script src="${ctxStatic}/jquery/jquery-1.8 ...
- Node.js 撸第一个Web应用
使用Node.js 创建Web 应用与使用PHP/Java 语言创建Web应用略有不同. 使用PHP/Java 来编写后台代码时,需要Apache 或者 Nginx 的HTTP 服务器,而接受请求和提 ...
- js实现滑动拼图验证码
js实现滑动拼图验证码,我这个样式是仿那些大网站做了, 学习用的,只用到前端. 小的个人网站感觉还可以用,大一点的别人用机器一下就破解了. 下面看图示: 样子大概是这样的. 源码在这 百度网盘: ...
- HBuilder:一个不错的web前端IDE(代码编辑器)
Web前端开发,2000之后基本就是三剑客的天下.到现在DW也是不错的HTMLcoder,如今的前端开发早已是JS的天下.但是DW对于JS方面就弱爆了.DW虽然支持JS语法高亮也支持JQuery Jq ...
随机推荐
- opengl多重采样
效果图如下,两幅图效果是一样的,只是换了个背景.两幅图均是左侧使用了多重采样,右侧的没有使用多重采样.
- CDH安装Hadoop
一.安装CDH-manager 1.关闭selinux 修改/etc/selinux/config 文件 将SELINUX=enforcing改为SELINUX=disabled 重启机器即可 2 ...
- Python设计模式——装饰模式(Decorator)
假如我们需要开发一个程序来展示一个人穿衣服的过程. #encoding=utf-8 __author__ = 'kevinlu1010@qq.com' class Person(): def __in ...
- CSS3学习之 animation 属性
发现animation这个新属性很有趣,在此学习,并整理下! 浏览器支持: Internet Explorer 10.Firefox 以及 Opera 支持 animation 属性: Safari ...
- 使用Yeoman搭建 AngularJS 应用 (3) —— 让我们搭建一个网页应用
原文地址:http://yeoman.io/codelab/setup.html 与Yeoman的交互大多数是通过命令行.在苹果机器需要使用Terminal应用,在Linux使用shell.如果使用W ...
- sjtu1313 太湖旅行
Description 西山风景区是苏州著名的国家级风景区,一到暑假,游客们都蜂拥而至.作为太湖风景区的精华,西山景区吸引人的地方主要在它的群岛风光.花果丛林和名胜古迹. ginrat对这个地方向往已 ...
- 快速扫描文本文件,统计行数,并返回每一行的索引位置(Delphi、C#)
由项目需要,需要扫描1200万行的文本文件.经网友的指点与测试,发现C#与Delphi之间的差距并不大.不多说,列代码测试: 下面是Delphi的代码: //遍历文件查找回车出现的次数 functio ...
- java路径中的空格问题(转)
java路径中的空格问题 1. URLTest.class.getResource("/").getPath(); URLTest.class.getResource(" ...
- PHP奇趣笔试试题一则
$a = 3; $b = 5; if($a = 5 || $b = 7){ $a++; $b++; } echo $a, ' ', $b; 输出结果为: A.6 8 B.6 6 C.2 6 D.1 6 ...
- Visual Studio中一个解决方案设置多个启动项目
在解决方案上右键,选择属性. 这样设置之后,点击开始运行之后,会同时启动2个项目. 适合一个项目既包含客户端也包含服务端,方便调试