表单正则（含验证码）

最新推荐文章于 2022-08-08 10:09:12 发布

wc_it

最新推荐文章于 2022-08-08 10:09:12 发布

阅读量207

点赞数

分类专栏：总结文章标签：正则表单验证码

本文链接：https://blog.csdn.net/qq_37850554/article/details/100024422

版权

总结专栏收录该内容

23 篇文章 0 订阅

订阅专栏

注册表单

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>表单（正则）</title>
		<style type="text/css">
			#container{
				position: absolute;
				width: 100%;
				height: 100%;
				top: 0;
				left: 0;
				background: url(img/f1.jpg) no-repeat;
				background-size: 100% 100%;
			}
			#form{
				width: 500px;
				height: 450px;
				border: 0.5px solid burlywood;
				border-radius: 10px;
				background-color: cornsilk;
				position: absolute;
				margin: auto;
				top: 0;
				right: 0;
				bottom: 0;
				left: 0;
				box-shadow: 2px 2px 4px gray;
				opacity: 0.96;
			}
			#login{
				width: 80px;
				height: 45px;
				font-size: 35px;
				color: brown;
				position: absolute;
				left: 42%;
			}
			form{
				display: block;
				position: absolute;
				margin-top: 45px;
				margin-left: 40px;
				top:0;
				right: 0;
				bottom: 0;
				left: 0;
			}
			
			input{
				width: 250px;
				height: 35px;
				border-radius: 3px;
				margin-top: 13px;
				margin-right: 15px;
			}
			input[type='submit']{
				width: 380px;
				height: 40px;
				margin-top: 18px;
				border-radius: 6px;
				background-color: #008000;
				color: honeydew;
				font-size: 20px;
			}
			#check{
				width: 180px;
			}
			#code{
				display: inline-block;
				width: 100px;
				height:35px;
				border: 0.5px solid black;
				text-align: center;
				line-height:35px;
				background: #DEB887;
				font-family: "bodoni mt black";
			}
			#codetip{
				width: 100px;
				height:35px;
				text-align: center;
				line-height:35px;
				display: inline-block;
				left:30px;
			}
			.correct{
				color: green;
				font-size: 25px;
			}
			.error{
				color: red;
				font-size: 12px;
			}
		</style>
	</head>
	<body>
		<div id="container">
			<div id="form">
				<div id="login">
					登录
				</div>
				<form action="#" method="get">
					<input type="text" id="username" name="username" placeholder="请输入用户名" /><span id="nametip"></span><br/>
					<input type="password" id="pwd" name="pwd" placeholder="请输入密码" /><span id="pwdtip"></span><br/>
					<input type="password" id="pwd2" name="pwd2" placeholder="确认密码" /><span id="checkpwdtip"></span><br/>
					<input type="text" id="email" name="email" placeholder="请输入邮箱" /><span id="emailtip"></span><br/>
					<input type="text" id="tele" name="tele" placeholder="请输入手机号" /><span id="teletip"></span><br/>
					<input type="text" id="check" name="check" placeholder="验证码" /><span id="code">1234</span><span id="codetip"></span><br/>
					<input type="submit" id="reg" name="reg" value="注册"/>
				</form>
			</div>
		</div>		
		<script type="text/javascript">
			
			var codeChars = 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',
			            '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');
			var codechar;
			var username = document.getElementById("username");
			var nametip = document.getElementById("nametip");
			var pwd = document.getElementById("pwd");
			var pwdtip = document.getElementById("pwdtip");
			var pwd2 = document.getElementById("pwd2");
			var checkpwdtip = document.getElementById("checkpwdtip");
			var email = document.getElementById("email");
			var emailtip = document.getElementById("emailtip");
			var tele = document.getElementById("tele");
			var teletip = document.getElementById("teletip");
			var reg = document.getElementById("reg");
			var check = document.getElementById("check");
			var code = document.getElementById("code");
			var isPwd = false;
			
			window.onload = function(){
				code.onclick();
				// for(var i = 0;i<6;i++){
				// 	var index = parseInt(Math.random()*62);
				// 	codechar.push(codeChars[index]); 
				// }
				// console.log(codechar);
				// var temp = codechar.join('');
				// console.log(temp);
				// code.innerHTML = temp;
			}
			
			username.onblur = function(){
				if(/^[A-Za-z]\w{7,17}$/.test(this.value)){
					nametip.innerHTML = "√";
					nametip.className = "correct";
					return true;
				}else {
					nametip.innerHTML = "用户名长度8-18位,首位必须为字母";
					nametip.className = "error";
					return false;
				}
			}
			
			pwd.onblur = function(){
				if(isPwd){
					pwd2.onblur();
				}
				if(/^\w{6,18}$/.test(this.value)){
					pwdtip.innerHTML = "√";
					pwdtip.className = "correct";
					return true;
				}else {
					pwdtip.innerHTML = "用户名长度6-18位";
					pwdtip.className = "error";
					return false;
				}
			}
			
			pwd2.onblur = function(){
				isPwd = true;
				if(/^\w{6,18}$/.test(this.value)&&this.value == pwd.value){
					checkpwdtip.innerHTML = "√";
					checkpwdtip.className = "correct";
					return true;
				}else {
					checkpwdtip.innerHTML = "两次密码不同";
					checkpwdtip.className = "error";
					return false;
				}
			}
			
			
			email.onblur = function(){
				if(/^\w{1,10}@\w{1,3}\.\w{1,3}$/.test(this.value)){
					emailtip.innerHTML = "√";
					emailtip.className = "correct";
					return true;
				}else {
					emailtip.innerHTML = "邮箱格式要满足xxx@xxx.xxx";
					emailtip.className = "error";
					return false;
				}
			}
			
			tele.onblur = function(){
				if(/^1\d{10}$/.test(this.value)){
					teletip.innerHTML = "√";
					teletip.className = "correct";
					return true;
				}else {
					teletip.innerHTML = "手机长度11位，必须以1开头";
					teletip.className = "error";
					return false;
				}
			}
			
			check.onblur = function(){	
				var temp1 = code.innerHTML.toLowerCase();
				var temp2 = this.value.toLowerCase();
				if(temp1 == temp2){
					codetip.innerHTML = "√";
					codetip.className = "correct";
					return true;
				}else {
					codetip.innerHTML = "验证码错误";
					codetip.className = "error";

					return false;
				}
			}
			
			code.onclick = function(){
				codechar = new Array();
				for(var i = 0;i<6;i++){
					var index = parseInt(Math.random()*62);
					codechar.push(codeChars[index]); 
				}
				var temp = codechar.join('');
				code.innerHTML = temp;
			}
			
			reg.onclick = function(){
				if(username.onblur()==true&&pwd.onblur()==true&&pwd2.onblur()==true&&email.onblur()==true&&tele.onblur()==true&&check.onblur()){
					alert("注册成功");
					return true;
				}else{	
					return false;
				}
			}
			
		</script>
	</body>
</html>

预览效果
在这里插入图片描述

wc_it

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
表单正则（含验证码）

注册表单<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>表单（正则）</title> <style type="text/css"> #container{ position: absolute; widt...
复制链接

扫一扫