JS实现的一个验证码，可以在前端验证后在提交action

时间：2023-03-09 19:15:37
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="#">

     &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>

相关文章