Develop a registered HTML page to collect user registration information. Including: name (cannot be empty), age (must be over 17 years old), weight (30-150kg), class (drop-down list), login password (at least 8 digits long), confirmation password (the same as the login password), email (cannot be empty), phone number, QQ, resume and other information. And create corresponding verifications for the elements of these tables. If an error is detected, an error will be displayed in red words after the input box. You should use the single-line text input box text, drop-down list box select, password input box password, and multi-line text input box textarea learned in the previous sections. This is a more practical user registration form.
register.html:
The code copy is as follows:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Experiment 2</title>
<link href="check.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="load.js">
</script>
</head>
<!--return validate() and validate() are about whether the form is cleared->
<body onload="load_greeting()">
<form id="test" align="left" onSubmit="return validate()">
<table>
<tr>
<td>Name*:</td>
<td><input type="text" name="Name" id="name" size="20" onChange='check("name")'></td>
<td id="nameCheck" hidden="true">*Name cannot be empty</td>
</tr>
<tr>
<td>Age:</td>
<td><input type="text" name="Age" id="age" size="20" onChange='check("age")'></td>
<td id="ageCheck" hidden="true">*Age cannot be less than 17 years old</td>
</tr>
<tr >
<td>weight:</td>
<td><input type="text" name="weight" id="weight" size="20" onChange='check("weight")'></td>
<td id="weightCheck" hidden="true">*Weight range is 30~150KG</td>
</tr>
<tr>
<td>Class:</td>
<td><select id="class" name="class">
<option>class0</option>
<option>class1</option>
<option>class2</option>
<option>class3</option>
</select>
</td>
</tr>
<tr>
<td>Password*:</td>
<td><input type="password" name="Password" id="password" size="20" onChange='check("password")'></td>
<td id="passwordCheck" hidden="true">*password length less than 8</td>
</tr>
<tr>
<td>Confirm Password*:</td>
<td><input type="password" name="cpassword" id="cpassword" size="20" onChange='check("cpassword")'></td>
<td id="cpasswordCheck" hidden="true">*Two passwd is not same</td>
</tr>
<tr >
<td>Email*:</td>
<td><input type="email" name="email" id="email" size="20" onChange='check(this.id)'></td>
<td id="emailCheck" hidden="true">*The email name is illegal! </td>
</tr>
<tr>
<td>TEL:</td>
<td><input type="text" name="TEL" id="TEL" size="20"></td>
</tr>
<tr>
<td>QQ:</td>
<td><input type="text" name="QQ" id="QQ" size="20"></td>
</tr>
<tr>
<td>Personal Information:</td>
<td><textarea rows="10" cols="19"></textarea></td>
</tr>
<tr>
<td colspan="3">
<input type="submit" name="submit">
<input type="reset" name="reset">
</td>
</tr>
</table>
</form>
</body>
</html>
check.css:
The code copy is as follows:
td.check{
color:#C00;
font-weight:bold;
}
load.js:
The code copy is as follows:
function check(str)
{
var x = document.getElementById(str);
var y = document.getElementById(str+"Check");
//alert("check!");
if(str=="name")
{
if(x.value=="")
y.hidden = false;
else
y.hidden = true;
}
else if(str=="age")
{
if(isNaN(x.value) || x.value < 17)
y.hidden = false;
else
y.hidden = true;
}
else if(str=="weight")
{
x = x.value;
if(isNaN(x) || x < 30 || x > 150)
y.hidden = false;
else
y.hidden = true;
}
else if(str=="password")
{
x = x.value.length;
if(x < 8)
{
y.hidden = false;
//alert("check!");
}
else
y.hidden = true;
}
else if(str=="cpassword")
{
var z = document.getElementById("password").value;
x = x.value;
if(x != z)
y.hidden = false;
else
y.hidden = true;
}
else if(str=="email")
{
x = x.value.indexOf("@")
if(x == -1)
y.hidden = false;
else
y.hidden = true;
}
return y.hidden;
}
function validate()
{
var arr=["name", "age", "weight", "password", "cpassword", "email"];
var i = 0;
submitOK = true;
while(i <= 5)
{
if(!check(arr[i]))
{
alert(arr[i]+" wrong!");
submitOK = false;
break;
}
i++;
}
if(submitOK)
{
alert("Submit successful!");
return true;
}
else
{
alert("Submission failed");
return false;
}
}
function load_greeting()
{
//alert("visit /n");
}