JavaScript验证码

<!DOCTYPE html>
<html>
<head>
    <meta charset = "utf-8"/>
	<title>
		
	</title>
	
	<script type="text/javascript" src="../../js/jquery1.7.js"></script>
	<style type="text/css">
		
		*{
			margin: 0;
			padding: 0;
		}
		#login {
			border: 1px solid red;
			margin: 10% 25% 25%;
			width: auto;
			height: 400px;
		}
		#loginInput {
			float: right;
			overflow: hidden;
			margin: 100px 80px auto;
			padding: 20px;
			line-height: 35px;
		}
		#loginInput #submit {
			text-align: center;
			margin: 0 auto;
			display: block;
		}
		#showValue {
			color: red;
			font-weight: bold;
		}

	</style>
</head>
<body>
	
	<div id="login">

		<div id="loginInput">
			name:
			<input type="text" id="name"></input>
			<br>
			p w d:
			<input type="password" id="name"></input>
			<br>
			
			<div id="yanzhengma"></div>
			<input type="text" id="inputValue" maxlength="8" onkeyup="yanzheng(event)"></input>
			<label id="showValue" onclick="changeValue()" style="display: inline-block; height: 25px; width: auto;  margin-left: 7px; ">我是可爱的验证码</label>
			<div id="return" style="display: inline-block; color: red; font-weight: bold;"></div>
			
			<br>
			<input type="submit" id="submit" value="login" onclick="yanzheng(event)"></input>
		</div>
	</div>
	
	<script type="text/javascript">
		
		var yanzhengma = "";
		var length = 4;
		var flag = 0;
		$(function(){

			changeValue();

		});

		function changeValue() {
			
			yanzhengma = "";

			var code = 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 < length; i++) {
				
				var oneCode = Math.round(Math.random()*35);
				yanzhengma += code[oneCode];
			}
			//console.log(yanzhengma);
			$('#showValue').html(yanzhengma);
			

		}



		function yanzheng(event) {
			
			if(event.keyCode == 13) {

				flag++;
			}

			if(flag == 2 || event.target.id == "submit") {

				console.log(typeof($('#inputValue').val().toLowerCase()));

				if(yanzhengma == $('#inputValue').val().toLowerCase()) {
					
					//alert("success");
					$('#return').html("√");
				}
				else {
					$('#return').html("×");
				}
				flag = 0;
			}
			else {
				return false;
			}
		}
	</script>

</body>
</html>
猜你喜欢
