<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:///TR/xhtml1/DTD/">
<html xmlns="http:///1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>User Registration</title>
<style type="text/css">
@import "css/";
</style>
</head>
<body >
<div >
<form method="post" action="url" >
<table >
<tbody>
<tr>
<td>Username:</td>
<td>
<input name="username" type="text" onfocus="showDesc(this)" onblur="checkText(this)"/>
</td>
</tr>
<tr>
<td>Password:</td>
<td>
<input name="password" type="text" onfocus="showDesc(this)" onblur="checkText(this)"/>
</td>
</tr>
<tr>
<td>Confirm password:</td>
<td>
<input name="password2" type="text" onfocus="showDesc(this)" onblur="checkText(this)"/>
</td>
</tr>
<tr>
<td>Identity card number:</td>
<td>
<input name="IDNumber" type="text" onfocus="showDesc(this)" onblur="checkText(this)"/>
</td>
</tr>
<tr>
<td>Tel number:</td>
<td>
<input name="phoneNumber" type="text" onfocus="showDesc(this)" onblur="checkText(this)"/>
</td>
</tr>
<tr>
<td>Email：</td>
<td>
<input name="email" type="text" onfocus="showDesc(this)" onblur="checkText(this)"/>
</td>
</tr>
<tr>
<td> </td>
<td align="right">
<input type="submit" value="confirm submission" />
</td>
</tr>
</tbody>
</table>
<table border="0">
<tr><td><span >Please enter the username</span></td></tr>
<tr><td><span >Please enter your password</span></td></tr>
<tr><td><span >Please enter your password again</span></td></tr>
<tr><td><span >Please enter your ID number</span></td></tr>
<tr><td><span >Please enter your phone number</span></td></tr>
<tr><td><span >Please enter your email address</span></td></tr>
</table>
</form>
</div>
<script type="text/javascript" src="jslib/">
</script>
</body>
</html>
// When the input box gets focus, the prompt content will be displayed
function showDesc(obj)
{
var id= ;
(id).="inline";
}
//Check whether the input content is valid when the input box loses focus
function checkText(obj)
{
//Get the id value of the input box
var id= ;
var text=(().toUpperCase()).value;
//Judge whether it is empty
if((/\s/g, "")=="")
{
(id).innerHTML="Input cannot be empty";
}
else
{
//Assembly method
//Convert the first letter to capitalize, the rest remains unchanged
var firstChar=(0).toString().toUpperCase();
//
var strsub=(1,);
var strMethod="check"+firstChar+strsub+"()";
var isTrue = eval(strMethod);
if(isTrue)
{
(id).innerHTML="Input is valid";
}
}
}
function checkUsername()
{
//Just simply judge the length of the username
var id = ("USERNAME");
var username=;
if( > 10)
{
().innerHTML = "The entered username is too long";
return false;
}
else
return true;
}
function checkPassword()
{
var password = ("PASSWORD").value;
return true;
}
function checkPassword2()
{
var id=("PASSWORD");
var id2=("PASSWORD2");
var password = ;
var password2 = ;
if(password!=password2)
{
().innerHTML="Password inconsistent";
return false;
}
return true;
}
function checkIDNumber()
{
var id=("IDNUMBER");
var IDNumber =;
if(<18||>19)
{
().innerHTML="The length of the ID card number is incorrect";
return false;
}
var expr=/([0]{18}[x|y]?)|([1]{18}[x|y]?)/i;
if((IDNumber))
{
().innerHTML="The ID number cannot be '0' or '1'";
return false;
}
return true;
}
function checkPhoneNumber()
{
// Use regular expressions to match input data
var id=("PHONENUMBER");
var phone = ;
//Match a non-numeric character and return false
var expr = /\D/i;
if((phone))
{
().innerHTML="Not numeric characters cannot be entered";
return false;
}
return true;
}
function checkEmail()
{
// Use regular expressions to match input data
var id = ("EMAIL")
var email = ;
//Start with letters or numbers, keep up with @, alphanumeric ends with .com
var expr = /^([0-9]|[a-z])+@([0-9]|[a-z])+(\.[c][o][m])$/i;
if(!(email))
{
().innerHTML="The entered email format is incorrect";
return false;
}
return true;
}
CSS
@charset "utf-8";
/* CSS Document */
#BODY{
text-align:center;
}
#TABLE{
text-align:left;
margin: auto;
float:left;
}
#DIV_FORM{
margin-left:300px;
}
#TABLE2{
text-align:left;
width:150px;
height:150px;
}
#TABLE2 tr
{
height:24px;
}
#TABLE2 span{
display:none;
}