2017ife_yaoyao College_task1
Tasks:
Form (1) Verification of Single Form Items
-
Mission purpose
Enhance mastery of JavaScript
Familiar with common form processing logic
Task description
As shown in the example diagram, an input box and a button are implemented in the page. After clicking the validation button, the content in the input box is formatted and the validation results are displayed below. -
ValidateRules
1. Number of characters is 4-16 bits
2. The length of each letter, number and symbol in English is 1.
3. For each Chinese character, the length of Chinese symbols is 2. -
Task Notes
Requirement function implementation is completely consistent with task description
Sample diagrams are for reference only, and styles do not need to be fully consistent
Note the neatness and elegance of the code style
The code contains the necessary comments
No third-party component libraries are allowed to be implemented
Relevant knowledge points:
-
Control the height and width of input type="text"
input { height:30px;/*Change the height of input*/ } <input type="text" name="username" id="username" size=40px/> Prompt switching
When changing the prompt, the whole line of TR should be hidden, the id should be set on the tr, and the following statements should be used for hiding and displaying
document.getElementById("error2").style.display="table-row";
document.getElementById("init").style.display="none";-
Judging whether a character is Chinese or English
Chinese: text. charCodeAt (i) > 256
English: text. charCodeAt(i)<=256 -
github demo
Add htmlpreview.github.com/? To the website where the html code is located in the GitHub project to access [there should be more useful methods, here's the method for reference only]
Code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>yaoyao-task1</title>
<style>
form{
margin-left:50px;
margin-top:50px;
}
label{
font-size:18px;
font-weight:bold;
}
input{
height:30px;/*Change the height of input*/
border-radius:8px;
border:1px #999 solid;
}
#button{
background-color:blue;
color:white;
border:1px blue solid;
border-radius:4px;
height:34px;
font-size:18px;
width:80px;
}
td{
padding-top:10px;
}
/*Prompting part*/
#init{
font-size:14px;
color:#999;
}
#error1{
font-size:14px;
color:red;
display:none;
}
#error2{
font-size:14px;
color:red;
display:none;
}
#correct{
font-size:14px;
color:green;
display:none;
}
</style>
<script>
function check(){
var text=document.getElementById("username").value;
var sum=0;
if(text=="")
{
document.getElementById("error2").style.display="table-row";
document.getElementById("init").style.display="none";
document.getElementById("error1").style.display="none";
document.getElementById("correct").style.display="none";
}
else
{
for(var i=0; i<text.length;i++)
{
if(text.charCodeAt(i)>256)//It's Chinese.
{
sum=sum+2;
}
else
{
sum=sum+1;
}
}
console.log(sum);
if(sum<4||sum>16)
{
document.getElementById("error1").style.display="table-row";
document.getElementById("init").style.display="none";
document.getElementById("error2").style.display="none";
document.getElementById("correct").style.display="none";
}
else
{
document.getElementById("correct").style.display="table-row";
document.getElementById("init").style.display="none";
document.getElementById("error2").style.display="none";
document.getElementById("error1").style.display="none";
}
}
}
</script>
</head>
<body>
<form>
<table>
<tr>
<td>
<label>Name </label>
</td>
<td>
<input type="text" name="username" id="username" size=40px/>
</td>
<td>
<input type="button" id="button" onclick="check()" value="Verification"/>
</td>
</tr>
<tr id="init">
<td></td>
<td>
<span>Must be filled, length 4~16 Character</span>
</td>
</tr>
<tr id="error1">
<td></td>
<td>
<span>Input character length is incorrect</span>
</td>
</tr>
<tr id="error2">
<td></td>
<td>
<span>Name cannot be empty</span>
</td>
</tr>
<tr id="correct">
<td></td>
<td>
<span>Name format is correct</span>
</td>
</tr>
</table>
</form>
</body>
</html>
<!--
//Note: When changing the prompt, the whole line of TR should be hidden, the id should be set on the tr, and the following statements should be used for hiding and displaying
document.getElementById("error2").style.display="table-row";
document.getElementById("init").style.display="none";
-->