注册界面：
界面布局的实现：
<body id="b">
<h1 style="color:white;font-size:40px;font-weight:bold;">
IMAGE STYLE TRANSFER</h1>
<tr valign="middle" align="center">
<td colspan="0" height="10" valign="middle" top="10" align="center"><font
face="MV Boli" weight="bold" size="40px" color="#196ed1 "
style="padding-left: 600px; top:30px; vertical-align: middle" >register</font></td>
</tr>
<fieldset style="width:500px;
height:260px;
left:400px;
top:50px;
position:relative;
">
<table background="image\4.jpg " width="500" height="260" left="400" top="4000" align="center">
<tr height="30" >
<td></td>
</tr>
<tr>
<td>
<table>
<form method ="POST" action="" name="frmLogin" style="top:20px; ">
<tr>
<td style="font-size: 30px; font-family: MV Boli;" class="login_td">User Name：</td>
<td><input type="text" class="login_td" id="username" name="Your name" value="" size="15" onChange="chang1()" maxlength="15" style="width:160px; height:23px; "
/></td>
<td id="usName"></td>
</tr>
<tr>
<td style="font-size: 30px; font-family:MV Boli;" class="login_td" >Password：</td>
<td><input type="password" name="password" class="login_td" value="" size="15" maxlength="15"
style="width:160px; height:23px; " onChange="chang2()" id="password"/></td>
<td id="ps1"></td>
</tr>
<tr>
<td style="font-size: 30px; font-family:MV Boli;" class="login_td" >Confirm it：</td>
<td><input type="password" name="Confirm It" id="confirm" class="login_td" value="" size="15" maxlength="15" style="width:160px; height:23px;" onChange="chang3()"/></td>
<td id="ps2"></td>
</tr>
</form>
</table>
<table>
<tr>
<td>
<tr>
<td >
<input type="submit" name="login" value="registor"
onClick="sub()"/>
<!--<button class="login_button" onClick="sub()">提交</button>-->
</td>
<td style="font-size: 30px;font-family: MV Boli;width: 30px;height: 15px;" ><input type="button" name="button" value="return" onclick="window.location.href='login.html'"></td>
</tr>
</td>
</tr>
</table>
</td>
</tr>
</table>
</fieldset>
</body>
注册界面与登录界面最大的不同之处是：
注册界面对用户名和密码以及重复密码的输入位数进行了限制，并且判断了所输入的内容是否合理：
<script language="javascript">
var reg=/^[a-zA-Z]\w*$/;
var flag1=false,flag2=false,flag3=false;
function chang1(){
var name=document.getElementById("username").value;
if(name.length<3||name.length>8){
alert("Username requires 3-8 bits！！");
//document.getElementById("usName").innerHTML="<font color='red'>Username requires 3-8 bits！</font>";
}
else if(!reg.test(name)){
alert(" The user name begins with a letter, followed by letters, Numbers, or underscores");
//document.getElementById("usName").innerHTML="<font color='red'> The user name begins with a letter, followed by letters, Numbers, or underscores</font>";
flag1=false;
}
else{
flag1=true;
document.getElementById("usName").innerHTML="<font color='green'>ok</font>";
}
}
function chang2(){
var pwd=document.getElementById("password").value;
if(pwd.length<6||pwd.length>8){
alert("Password requires 3-8 bits！");
//document.getElementById("ps1").innerHTML="<font color='red'>Password requires 3-8 bits！</font>";
flag2=false;
}
else{
document.getElementById("ps1").innerHTML="<font color='green'>ok</font>";
flag2=true;
}
}
function chang3(){
var pwd1=document.getElementById("confirm").value;
var pwd=document.getElementById("password").value;
if(pwd1.length<6||pwd1.length>8){
alert("Password requires 3-8 bits！");
//document.getElementById("ps2").innerHTML="<font color='red'>Password requires 3-8 bits！</font>";
}
else if(pwd!=pwd1){
alert("Entered passwords differ！");
//document.getElementById("ps2").innerHTML="<font color='red'>Entered passwords differ！</font>";
flag3=false;
}
else{
document.getElementById("ps2").innerHTML="<font color='green'>ok</font>";
flag3=true;
}
if ((sPassword =="") || (sPassword=="Your password")){
alert("Please input Password!");
return false ;
}
}
function sub(){
if(flag1&&flag2&&flag3){
document.regist.submit();
}
else{
alert("Please fill in the register information!");
}
}
</script>
效果如下：
