js生成验证码并验证

客官°小女子只卖身不卖艺 2021-12-22 02:13 320阅读 0赞

<!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>JS生成验证码</title>
    <style type="text/css">
    .code {
    background-image: url(code.jpg);
    font-family: Arial;
    font-style: italic;
    color: Red;
    border: 0;
    padding: 2px 3px;
    letter-spacing: 3px;
    font-weight: bolder;
    }
    .unchanged {
    border: 0;
    }
    </style>
    <script language="javascript" type="text/javascript">  
    var code; //在全局 定义验证码   
    function createCode() {
        code = "";
        var codeLength = 6;//验证码的长度   
        var checkCode = document.getElementById("checkCode");
        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');//所有候选组成验证码的字符，当然也可以用中文的   
     
        for (var i = 0; i < codeLength; i++) {
            var charIndex = Math.floor(Math.random() * 36);
            code += selectChar[charIndex];
        }
        //alert(code);
        if (checkCode) {
            checkCode.className = "code";
            checkCode.value = code;
        }
    }
     
    function validate() {
        var inputCode = document.getElementById("input1").value;
        if (inputCode.length <= 0) {
            alert("请输入验证码！");
        } else if (inputCode != code) {
            alert("验证码输入错误！");
        createCode();//刷新验证码   
        } else {
        alert("^-^ OK");
        }
    }
    </script>
    </head>
    <body οnlοad="createCode()">
    <form action="#">
        <input type="text" id="input1" /> <input type="text" οnclick="createCode()" readonly="readonly" id="checkCode" class="unchanged" style="width: 80px" /><br />
        <input id="Button1" οnclick="validate();" type="button" value="确定" />
    </form>
    </body>
    </html>

示例2：(推荐！)

HTML部分

<html>
    	<head>
    		<title>验证码</title>
    		<style type="text/css">
    			#code
    			{
    				font-family:Arial;
    				font-style:italic;
    				font-weight:bold;
    				border:0;
    				letter-spacing:2px;
    				color:blue;　　　　　　　　　　　　　　　　　　 
                                    width:60px;　　　　　　　　　　　　　　　　　　 
                                    height:24px;
    			}
    		</style>
    		<script type = "text/javascript" src = "checkCode.js">
    		</script>
    	</head>
    	<body οnlοad="createCode()">
    		<div>
    			<input type = "text" id = "input"/>
    			<input type = "button" id="code" οnclick="createCode()"/>
    			<input type = "button" value = "验证" onclick = "validate()"/>
    		</div>
    	</body>
    </html>

JS部分：checkCode.js

//在全局定义验证码 
    　　　　　　var code ;
    
    //产生验证码
    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("input").value.toUpperCase(); //取得输入的验证码并转化为大写      
    	if(inputCode.length <= 0) { //若输入的验证码长度为0
    		alert("请输入验证码！"); //则弹出请输入验证码
    	}       
    	else if(inputCode != code ) { //若输入的验证码与产生的验证码不一致时
    		alert("验证码输入错误！@_@"); //则弹出验证码输入错误
    		createCode();//刷新验证码
    		document.getElementById("input").value = "";//清空文本框
    	}       
    	else { //输入正确时
    		alert("^-^"); //弹出^-^
    	}           
    }

转载于:https://www.cnblogs.com/kenshinobiy/p/4894792.html