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
<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
<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
(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
(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
The sidebar is recommended
- Spring IOC container loading process
- [thinking] the difference between singleton mode and static method - object-oriented programming
- Hadoop environment setup (MySQL environment configuration)
- 10 minutes, using node JS creates a real-time early warning system for bad weather!
- Git tool
- Force deduction algorithm - 92 Reverse linked list II
- What is the sub problem of dynamic programming?
- C / C + +: static keyword summary
- Idea does not have the artifacts option when configuring Tomcat
- Anaconda can't open it
guess what you like
-
I don't know how to start this
-
Matlab simulation of transportation optimization algorithm based on PSO
-
MySQL slow log optimization
-
[Vue] as the window is stretched (larger, smaller, wider and higher), the text will not be displayed
-
Popular Linux distributions for embedded computing
-
Suzhou computer research
-
After installing SSL Certificate in Windows + tomcat, the domain name request is not successful. Please answer!!
-
Implementation time output and greetings of jQuery instance
-
The 72 year old uncle became popular. Wu Jing and Guo fan made his story into a film, which made countless dreamers blush
-
How to save computer research
Random recommended
- Springboot implements excel import and export, which is easy to use, and poi can be thrown away
- The final examination subjects of a class are mathematical programming, and the scores are sorted and output from high to low
- Two pronged approach, Tsinghua Professor Pro code JDK and hotspot source code notes, one-time learning to understand
- C + + recursive knapsack problem
- The use of GIT and GitHub and the latest git tutorial are easy to understand -- Video notes of crazy God speaking
- PostgreSQL statement query
- Ignition database test
- Context didn't understand why he got a high salary?, Nginxfair principle
- Bootstrap switch switch control user's guide, springcloud actual combat video
- A list that contains only strings. What other search methods can be used except sequential search
- [matlab path planning] multi ant colony algorithm grid map path planning [including GUI source code 650]
- [matlab path planning] improved genetic algorithm grid map path planning [including source code phase 525]
- Iinternet network path management system
- Appium settings app is not running after 5000ms
- Reactnative foundation - 07 (background image, status bar, statusbar)
- Reactnative foundation - 04 (custom rpx)
- If you want an embedded database (H2, hsql or Derby), please put it on the classpath
- When using stm32g070 Hal library, if you want to write to flash, you must perform an erase. If you don't let it, you can't write continuously.
- Linux checks where the software is installed and what files are installed
- SQL statement fuzzy query and time interval filtering
- 69. Sqrt (x) (c + + problem solving version with vs runnable source program)
- Fresh students are about to graduate. Do you choose Java development or big data?
- Java project: OA management system (java + SSM + bootstrap + MySQL + JSP)
- Titanic passenger survival prediction
- Vectorization of deep learning formula
- Configuration and use of private image warehouse of microservice architect docker
- Relearn JavaScript events
- For someone, delete return 1 and return 0
- How does Java dynamically obtain what type of data is passed? It is used to judge whether the data is the same, dynamic data type
- How does the database cow optimize SQL?
- [data structure] chain structure of binary tree (pre order traversal) (middle order traversal) (post order traversal) (sequence traversal)
- Webpack packaging optimization solution
- 5. Operation element
- Detailed explanation of red and black trees
- redhat7. 9 install database 19C
- Blue Bridge Cup notes: (the given elements are not repeated) complete arrangement (arrangement cannot be repeated, arrangement can be repeated)
- Detailed explanation of springboot default package scanning mechanism and @ componentscan specified scanning path
- How to solve the run-time exception of test times
- Detailed explanation of k8s management tool kubectl
- Android system view memory command