JS实现的一个验证码，可以在前端验证后在提交action
js实现的一个验证码功能，可以在前端判断验证码输入是否正确
输入的邮箱格式是否正确
验证成功后才提交action到后台
1<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml" > 3 <head> 4 <title>无标题页</title> 5 <style type="text/css"> 6 .code 7 { 8 <!--可以放一张背景图片更好看--> 9 background-image:url(code.jpg); 10 font-family:Arial; 11 font-style:italic; 12 color:Red; 13 border:0; 14 padding:2px 3px; 15 letter-spacing:3px; 16 font-weight:bolder; 17 } 18 .unchanged 19 { 20 border:0; 21 } 22 </style> 23 <script language="javascript" type="text/javascript"> 24 25 var code ; //在全局 定义验证码 26 function createCode() 27 { 28 code = ""; 29 var codeLength = 6;//验证码的长度 30 var checkCode = document.getElementById("checkCode"); 31 var selectChar = 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');//所有候选组成验证码的字符，当然也可以用中文的 32 33 for(var i=0;i<codeLength;i++) 34 { 35 36 37 var charIndex = Math.floor(Math.random()*36); 38 code +=selectChar[charIndex]; 39 40 41 } 42 // alert(code); 43 if(checkCode) 44 { 45 checkCode.className="code"; 46 checkCode.value = code; 47 } 48 49 } 50 51 function validate () 52 { 53 var inputCode = document.getElementById("input1").value; 54 if(inputCode.length <=0) 55 { 56 document.getElementById("yzm").innerText="请输入验证码！"; 57 return false; 58 59 } 60 else if(inputCode != code ) 61 { 62 document.getElementById("yzm").innerText="验证码输入错误！"; 63 //alert("验证码输入错误！"); 64 createCode();//刷新验证码 65 return false; 66 } 67 else 68 { 69 var inputCode = document.getElementById("email").value; 70 if(inputCode.length <=0) 71 { 72 document.getElementById("yzm").innerText="请输入您的邮箱，方便我们联系您！"; 73 return false; 74 }else{ 75 76 //提交action 77 var f = document.forms[0]; 78 f.action=""; 79 f.submit(); 80 } 81 } 82 83 } 84 <!-- 可以控制验证是否是邮箱格式 85 function emailCheck() { 86 var objName = document.getElementById("email"); 87 var pattern = /^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/; 88 if (!pattern.test(objName.value)) { 89 document.getElementById("yzm").innerText="请输入正确的邮箱地址！"; 90 objName.focus(); 91 document.getElementById("email").innerText=""; 92 return false; 93 } 94 document.getElementById("yzm").innerText=""; 95 return true; 96 } 97 --> 98 </script> 99 </head> 100 <body onload="createCode()"> 101 <form action="#"> 102 <input type="text" id="input1" placeholder="此项必填哦"/> 103 <input type="text" onclick="createCode()" readonly="readonly" id="checkCode" class="unchanged" style="width: 80px" /><br /> 104 <input id="Button1" onclick="validate();" type="button" value="确定" /> 105 <label id="yzm" style="color:red;margin-left:15em"></label> 106 </form> 107 </body> 108 </html>