current position:Home>HTML page making - Verification of information

HTML page making - Verification of information

2022-01-26 22:55:00 #HashMap#

1.HTML Information verification code

<html>
	<head>
		<meta charset="utf-8">
		<title>Music Login Form</title>
		<!--css Code declaration -->
		<style type="text/css">
			#showdiv{
				width: 530px;
				height: 520px;
				border: solid 2px grey;
				border-radius: 10px;
				margin: auto;
				margin-top: 10px;
				margin-left: 230px;
			}
			table{
				margin: auto;
				color: white;
				font-family: "Consolas";
				margin-top: 10px;
			}
			span{
				font-size: 13px;
			}
			#codeSpan{
				font-size: 20px;
			}
			body{
				background: url(img/backgroud.jpg);
				background-repeat: no-repeat;
				background-size: cover;
			}
			tr{
				height: 35px;
			}
			input[type=text]{
				border-radius: 10px;
			}
			input[type=password]{
				border-radius: 10px;
			}
			h3{
				color: white;
				font-family: "Brush Script MT";
				font-size: 30px;
			}
		</style>
		<!--js Code declaration -->
		<script type="text/javascript">
		// Verification Code 
			function creatCode(){
				// Get a four digit random number 
				var code=Math.floor(Math.random()*9000+1000);
				// obtain span object 
				var span=document.getElementById("codeSpan");
				// Assign a random number to span
				span.innerHTML=code;
			}
		// Verify user name 
			function checkUname(){
				// Get user information 
					var uname=document.getElementById("uname").value;
				// Make verification rules 
					var reg=/^[a-zA-Z]{1,10}$/
				// obtain span object 
					var span=document.getElementById("unameSpan");
				// Start checking 
					if(uname=="" || uname==null){
						// Get the verification result 
						span.innerHTML="*The user name cannot be empty";
						span.style.color="red";
						return false;
					}else if(reg.test(uname)){
						// Get the verification result 
						span.innerHTML="*Legitimate user";
						span.style.color="green";
						return true;
					}else{
						// Get the verification result 
						span.innerHTML="*Out of specification";
						span.style.color="red";
						return false;
					}	
			}
		// Verify password 
			function checkPwd(){
				// Get the user password 
					var pwd=document.getElementById("pwd").value;
				// Develop validation information 
					var reg=/^[a-z][\w]{5,7}$/
				// obtain span object 
					var span=document.getElementById("pwdSpan");
				// Get the verification result 
					if(pwd=="" || pwd==null){
						span.innerHTML="*The password cannot be empty";
						span.style.color="red";
						return false;
					}else if(reg.test(pwd)){
						span.innerHTML="*Legitimate password";
						span.style.color="green";
						return true;
					}else{
						span.innerHTML="*Out of specification";
						span.style.color="red";
						return false;
					}
					checkConfirm();
			}
		// Verify the password 
			function checkConfirm(){
				// Get the first password 
					var pwd=document.getElementById("pwd").value;
				// Get the confirmation password 
					var confirm=document.getElementById("confirm").value;
				// obtain span object 
					var span=document.getElementById("conSpan");
				// Start checking 
				if(confirm=="" || confirm==null){
					// Get the verification result 
					span.innerHTML="*Password can not be empty"
					span.style.color="red";
					return false;
				}else if(confirm==pwd){
					// Get the verification result 
					span.innerHTML="*Both consistent";
					span.style.color="green";
					return true;
				}else{
					// Get the verification result 
					span.innerHTML="*Not the same";
					span.style.color="red";
					return false;
				}
			}
		// Verification phone 
			function checkTel(){
				return	checkField("num",/^1[3,4,5,7,8]\d{9}$/);
			}
		// Verify email 
			function checkMail(){
				return	checkField("mail",/^[a-z0-9]+([._\\-]*[a-z0-9])*@([a-z0-9]+[-a-z0-9]*[a-z0-9]+.){1,63}[a-z0-9]+$/);
			}
		/*------------------------ encapsulation --------------------------*/
			function checkField(id,reg){
				// Get user information 
					var inp=document.getElementById(id);
					var va=inp.value;
					var alt=inp.alt;
				// obtain span object 
					var span=document.getElementById(id+"Span");
				// Get the verification results 
					if(va=="" || va==null){
						span.innerHTML="*The "+alt+" cannot be empty";
						span.style.color="red";
						return false;
					}else if(reg.test(va)){
						span.innerHTML="*Legitimate "+alt;
						span.style.color="green";
						return true;
					}else{
						span.innerHTML="*Out of specification";
						span.style.color="red";
						return false;
					}
			}
		 // Verify native place 
		 	function checkAddress(){
		 		// Get native place information 
		 			var choice=document.getElementById("address").value;
		 		// obtain span object 
		 			var span=document.getElementById("addressSpan");
		 		// Start checking 
		 			if(choice!=0){
		 				span.innerHTML="sucessed";
		 				span.style.color="green";
		 				return true;
		 			}else{
		 				span.innerHTML="please choice";
		 				span.style.color="red";
		 				return false;
		 			}
		 	}
		 // Verify hobbies 
		 	function checkHobby(){
		 		// Get hobby information 
		 			var favs=document.getElementsByName("fav");
		 		// obtain span object 
		 			var span=document.getElementById("favSpan");
		 		// Start checking 
		 			for(var i=0;i<favs.length;i++){
		 				if(favs[i].checked){
		 					span.innerHTML="sucessed";
		 					span.style.color="green";
		 					return;
		 				}
		 			}
		 			span.innerHTML="Choose at least one";
		 			span.style.color="red";
		 			return false;
		 	}
		 // verification "self-introduction"
		 	function checkIntro(){
		 		// Get content information 
		 			var intro=document.getElementById("intro").value;
		 		// obtain span object 
		 			var span=document.getElementById("introSpan");
		 		// Start checking 
		 				if( intro.length<=10){
		 				span.innerHTML="keep write";
		 				span.style.color="green";
		 			}else{
		 				span.innerHTML="More than words";
		 				span.style.color="red";
		 			}
		 	}
		 // Verification of verification code 
		 	function checkCode(){
		 		// Get verification code 
		 			var codeSpan=document.getElementById("codeSpan");
		 		// Get the input verification code 
		 			var code=document.getElementById("code").value;
		 		// obtain span object 
		 			var span=document.getElementById("showSpan");
		 			if(code=="" || code==null){
					// Get the verification result 
					span.innerHTML="*code can not be empty"
					span.style.color="red";
					return false;
				}else if(code==codeSpan.innerHTML){
					// Get the verification result 
					span.innerHTML="*Both consistent";
					span.style.color="green";
					return true;
				}else{
					// Get the verification result 
					span.innerHTML="*Not the same";
					span.style.color="red";
					return false;
				}
			}
		 		
		 //" Whether to agree to the company agreement option " And " Register now "
		 	function checkAgree(){
		 		document.getElementById("sub").disabled=!document.getElementById("agree").checked;
		 	}
		 // Only after filling in the complete information can the submission be successful 
		 	function checkSub(){
		 		checkUname();
		 		checkPwd();
		 		checkConfirm();
		 		checkTel();
		 		checkMail();
		 		checkAddress();
		 		checkHobby();
		 		checkCode();
		 		return checkUname()&&checkPwd()&&checkConfirm()&&checkTel()&&checkMail()&&checkAddress()&&checkHobby()&&checkCode();
		 	}
		</script>
	</head>
	<body onload="creatCode()">
		<h3 align="center">
				<span style="color: orange;font-size: 30px;">M</span>usic
				<span style="color: orange;font-size: 30px;">L</span>ogin
				<span style="color: orange;font-size: 30px;">F</span>orm
		</h3>
		<div id="showdiv">
			<form action="#" onsubmit="return checkSub()">
				<table>
					<tr >
						<td width="50px">Usename:</td>
						<td width="500px">
							<input type="text" name="uname" id="uname" value="" onblur="checkUname()"/><span id="unameSpan" >*Within ten words</span>
						</td>
					</tr>
					<tr >
						<td>Password:</td>
						<td >
							<input type="password" name="pwd" id="pwd" value="" onblur="checkPwd()"/><span id="pwdSpan"></span>
						</td>
					</tr>
					<tr >
						<td>Confirm:</td>
						<td >
							<input type="password" name="confirm" id="confirm" value="" onblur="checkConfirm()"/><span id="conSpan"></span>
						</td>
					</tr>
					<tr >
						<td>Tel:</td>
						<td >
							<input type="text" name="num" id="num" value="" alt="tel" onblur="checkTel()"/><span id="numSpan"></span>
						</td>
					</tr>
					<tr >
						<td>E-Mail:</td>
						<td >
							<input type="text" name="mail" id="mail" value="" alt="Mail" onblur="checkMail()"/><span id="mailSpan"></span>
						</td>
					</tr>
					<tr>
						<td>Gender:</td>
						<td >
							F<input type="radio" name="sex" id="" value="1" checked="checked"/>
							M<input type="radio" name="sex" id="" value="0" />
		
						</td>
					</tr>
					<tr>
						<td>Native Place:</td>
						<td >
							<select name="address" id="address" onchange="checkAddress()">
								<option value="0">--Choices--</option>
								<option value="1"> Beijing </option>
								<option value="2"> Shanghai </option>
								<option value="3"> Guangzhou </option>
								<option value="4"> Shenzhen </option>
								<option value="5"> Hong Kong </option>
								<option value="5"> nanchang </option>
								<option value="6"> Ganzhou </option>
								<option value="7"> ruijin </option>
								<option value="8"> Xi'an </option>
							</select><span id="addressSpan"></span>
						</td>
					</tr>
					<tr >
						<td>Hobby:</td>
						<td >
							<input type="checkbox" name="fav" id="" value="" onclick="checkHobby()"/>Game&nbsp;
							<input type="checkbox" name="fav" id="" value="" onclick="checkHobby()"/>Guitar
							<input type="checkbox" name="fav" id="" value="" onclick="checkHobby()"/>basketball
							<br />
							<input type="checkbox" name="fav" id="" value="" onclick="checkHobby()"/>Music
							<input type="checkbox" name="fav" id="" value="" onclick="checkHobby()"/>Movie&nbsp;
							<input type="checkbox" name="fav" id="" value="" onclick="checkHobby()"/>Running
							<span id="favSpan"></span>
						</td>
					</tr>
					<tr >
						<td>Self-introduction:</td>
						<td >
							<textarea name="intro" id="intro" rows="5" cols="30" onclick="checkIntro()"></textarea>
							<span id="introSpan"></span>
						</td>
					</tr>
					<tr >		
						<td>Identtifying code:</td>
						<td >
							<input type="text" name="code" id="code" value="" onblur="checkCode()"/>
							<span id="codeSpan" onclick="creatCode()" style="background: url(img/code.jpg.gif);color: black;"></span>
							<span id="showSpan"></span>
						</td>
					</tr>
					<tr >
						<td colspan="2" align="center">
							<input type="checkbox" name="" id="agree" value="1" onclick="checkAgree()"/><b>Do you agree the company agreement?</b>
						</td>
					</tr>
					<tr >
						<td colspan="2" align="center">
							<input type="submit" name="" id="sub" value="Register" disabled="disabled"/>
						</td>
					</tr>
				</table>
			</form>
		</div>
	</body>
</html>

2. Realizable functions

2.1 The basic content
1. Show the whole page , Including background pictures , The style of the table , Font style
2. The information entered each time is correct input in span The value of will change “ green ”,“ Red ” Indicates that the input requirements are not met , Prompt the user to re-enter
3. Users can only click “ Whether to agree to the company agreement ” Button “ Register now ” Button to click
4. If the user fails to fill in the content as required ,“ Register now ” It's going to fail , That is, you cannot submit form Forms
2.2 The page display
(1) The following is the result when all the information entered by the user is correct , You can see “ green ” Tips , Show correct
 Insert picture description here
(2) The following is the effect displayed when the user does not fill in the information completely or does not fill in the information completely , In both cases, you can't submit form Forms
 Insert picture description here
(3) Production process data
link :https://pan.baidu.com/s/1I_gKfU1uknnrPn8-M5U8lg
Extraction code :g2ev

copyright notice
author[#HashMap#],Please bring the original link to reprint, thank you.
https://en.cdmana.com/2022/01/202201262254578792.html

Random recommended