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="#">

     &nbsp;<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="确定" />&nbsp;

     <label id="yzm" style="color:red;margin-left:15em"></label>

 </form>

 </body>

 </html>

JS实现的一个验证码，可以在前端验证后在提交action的更多相关文章

  1. 使用 js 和 Beacon API 实现一个简易版的前端埋点监控 npm 包

    使用 js 和 Beacon API 实现一个简易版的前端埋点监控 npm 包 前端监控,埋点,数据收集,性能监控 Beacon API https://caniuse.com/beacon 优点,请 ...

  2. 用Vue.js开发一个电影App的前端界面

    我们要构建一个什么样的App? 我们大多数人使用在线流媒体服务(如Netflix)观看我们最喜欢的电影或者节目.这篇文章将重点介绍如何通过使用vue.js 2 建立一个类似风格的电影流媒体WEB交互界 ...

  3. 本博文将一步步带领你实现抽屉官网的各种功能：包括登陆、注册、发送邮箱验证码、登陆验证码、页面登陆验证、发布文章、上传图片、form验证、点赞、评论、文章分页处理以及基于tronado的后端和ajax的前端数据处理。

    本博文将一步步带领你实现抽屉官网的各种功能:包括登陆.注册.发送邮箱验证码.登陆验证码.页面登陆验证.发布文章.上传图片.form验证.点赞.评论.文章分页处理以及基于tronado的后端和ajax的 ...

  4. node.js 模拟自动发送邮件验证码

    node.js 模拟自动发送邮件验证码 引言 正文 1. QQ邮箱设置 2. 安装nodemailer 3.配置信息 4.综合 5.讲解 结束语 引言 先点赞,再看博客,顺手可以点个关注. 微信公众号 ...

  5. 基于gulp编写的一个简单实用的前端开发环境好了，安装完Gulp后，接下来是你大展身手的时候了，在你自己的电脑上面随便哪个地方建一个目录，打开命令行，然后进入创建好的目录里面，开始撸代码,关于生成的json文件请点击这里https://docs.npmjs.com/files/package.json，打开的速度看你的网速了注意:以下是为了演示 ，我建的一个目录结构，你自己可以根据项目需求自己建目

    自从Node.js出现以来,基于其的前端开发的工具框架也越来越多了,从Grunt到Gulp再到现在很火的WebPack,所有的这些新的东西的出现都极大的解放了我们在前端领域的开发,作为一个在前端领域里 ...

  6. 关于引入多个jquery冲突的问题（附一个很好用的validate前端验证框架及使用方法）

    废话不多说,进入正题: 如果一个jsp中想要使用两个不同版本的jquery怎么办呢?客官往下看: <script src="${ctxStatic}/jquery/jquery-1.8 ...

  7. Node.js 撸第一个Web应用

    使用Node.js 创建Web 应用与使用PHP/Java 语言创建Web应用略有不同. 使用PHP/Java 来编写后台代码时,需要Apache 或者 Nginx 的HTTP 服务器,而接受请求和提 ...

  8. js实现滑动拼图验证码

    js实现滑动拼图验证码,我这个样式是仿那些大网站做了, 学习用的,只用到前端. 小的个人网站感觉还可以用,大一点的别人用机器一下就破解了. 下面看图示: 样子大概是这样的. 源码在这 百度网盘:    ...

  9. HBuilder：一个不错的web前端IDE(代码编辑器)

    Web前端开发,2000之后基本就是三剑客的天下.到现在DW也是不错的HTMLcoder,如今的前端开发早已是JS的天下.但是DW对于JS方面就弱爆了.DW虽然支持JS语法高亮也支持JQuery Jq ...

随机推荐

  1. poj 2175 Evacuation Plan 最小费用流判定，消圈算法

    题目链接 题意:一个城市有n座行政楼和m座避难所,现发生核战,要求将避难所中的人员全部安置到避难所中,每个人转移的费用为两座楼之间的曼哈顿距离+1,题目给了一种方案,问是否为最优方案,即是否全部的人员 ...

  2. 一步步学习ASP.NET MVC3 (8)——EmptyResult,ContentResult,RedirectResult

    请注明转载地址:http://www.cnblogs.com/arhat 上一章,我们阐述了Controller,Action和ActionResult所代表的含义及使用,本章继续研究ActionRe ...

  3. C# dynamic

    [TestMethod] public void DynamicTest() { dynamic Customer = new ExpandoObject(); Customer.Name = &qu ...

  4. 告诉你KVC的一切－b

    KVC(Key-value coding)键值编码,单看这个名字可能不太好理解.其实翻译一下就很简单了,就是指iOS的开发中,可以允许开发者通过Key名直接访问对象的属性,或者给对象的属性赋值.而不需 ...

  5. zoj 3761

    很简单但很虐心的一道题: 我感觉自己的算法没错,但是老是过不了:= = 但是还是把代码贴出来: 我的方法,用并查集的方式做一课树,然后对树进行遍历: 有多少棵树就有多少个点剩余: #include&l ...

  6. asp 下拉框二级联动

    <script language = "JavaScript"> //js开始 var aaa;//定义aaa变量 aaa=0;//aaa赋0 bb = new Arr ...

  7. [jobdu]丑数

    由于思维的惯性,用了queue.后来发现一要注意要用集合判重,二是每次往queue里放的多,后来溢出了,要用long long.但这样要用数组,集合,队列,内存多.效率是O(n*logn)的. #in ...

  8. UDP模块（黑胶体）

    UDP模块是采用PIP封装技术的U盘半成品模块,直接加上外壳,就是成品U盘. 它有以下特点: 防水.防尘.防震. 一体WAFER封装技术. 薄.轻.时尚. 产品装配方便.简单. 产品标准化,适合客户在 ...

  9. MyGui 3.2.0(OpenGL平台)的编译（五篇文章）

    MyGui是一个用来创建用户图形界面的库,用于游戏和3D应用程序.这个库的主要目标是达到:快速.灵活.易用. 1.下载准备: 源代码:http://svn.code.sf.net/p/my-gui/c ...

  10. 二维图形的矩阵变换（二）——WPF中的矩阵变换基础

    原文:二维图形的矩阵变换(二)--WPF中的矩阵变换基础 在前文二维图形的矩阵变换(一)——基本概念中已经介绍过二维图像矩阵变换的一些基础知识,本文中主要介绍一下如何在WPF中进行矩阵变换. Matr ...