? ? ? ? 本文主要是介紹我做PHP網站時的一個HTML的簡單靜態界面，它的主要功能是用戶注冊界面，并且參照了網上的例子使用JavaScript判斷和My97DatePicker的日歷控件。界面效果如下圖所示：
? ? ? 同時插入數據庫顯示效果如下圖所示：
? ? ? 可以看到引用My97DatePicker的日歷控件及判斷效果如下圖所示：
?
? ? ? 其中注冊界面register_student.html代碼如下：
~~~
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<script language="javascript" type="text/javascript">
function do_selected()
{
var yourchoise="";
for(var i=0;i<form1.subject.length;i++)
{
if(form1.subject.options[i].selected)
{
yourchoise +=form1.subject[i].value+";";
}
}
return yourchoise;
}
function win_open()
{
msg=window.open("","DisplayWindow","toolbar=no,directories=no,resizable=yes,menubar=no");
msg.document.write("學號:");
msg.document.write(form1.number.value+"<br>");
msg.document.write("姓名:");
msg.document.write(form1.name.value+"<br>");
msg.document.write("性別:");
msg.document.write(form1.sex.value+"<br>");
msg.document.write("Email郵件:");
msg.document.write(form1.email.value+"<br>");
msg.document.write("學院專業:");
msg.document.write(form1.zy.value+"<br>");
msg.document.write("個人簡介:");
msg.document.write(form1.instruction.value+"<br>");
msg.document.write("<br>");
}
function mycheck()
{
//判斷
if(document.form1.number.value=="")
{
alert("請輸入學號");
document.form1.number.focus();
return false;
}
var number = /^[0-9]{6,14}$/;
if (!number.exec(document.form1.number.value)) {
window.alert("學號必須由數字組成且長度為6-14!");
document.form1.number.focus();
return false;
}
if(document.form1.name.value=="")
{
alert("請輸入姓名");
document.form1.name.focus();
return false;
}
if(document.form1.sex.value=="未指定")
{
alert("請指明性別");
document.form1.sex.focus();
return false;
}
if(document.form1.email.value.indexOf("@")==-1||document.form1.email.value.indexOf(".")==-1)
{
alert("郵箱格式不正確，請重新輸入!");
document.form1.email.focus();
return false;
}
if(document.form1.pwd.value=="")
{
alert("請輸入密碼");
document.form1.pwd.focus();
return false;
}
var patrn=/^[a-zA-Z0-9]{5,20}$/;
if (!patrn.exec(document.form1.pwd.value))
{
window.alert("密碼只能由字母或者數字組成且長度為5-20之間!");
return false;
}
if(document.form1.pwd2.value=="")
{
alert("請輸入確認密碼");
document.form1.pwd2.focus();
return false;
}
if(document.form1.pwd.value!=document.form1.pwd2.value)
{
alert("輸入的密碼與確認密碼不一致!");
document.form1.pwd2.focus();
return false;
}
if(do_selected()=="")
{
alert("請至少選擇一門課");
document.form1.subject.focus();
return false;
}
//win_open();
}
</script>
<style type="text/css">
/* 這個鏈接改變顏色 */
a.one:link {color: #ff0000}
a.one:visited {color: #0000ff}
a.one:hover {color: #ffcc00}
</style>
<!-- 引用日歷控件 百度知道-html日期選擇控件 -->
<script language="javascript" type="text/javascript"
src="My97DatePicker/WdatePicker.js">
</script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>用戶注冊</title>
<style type="text/css">
<!--
.STYLE1 {color: #FF0000}
-->
</style>
</head>
<body>
<!-- autocomplete="off"禁止保存緩存 -->
<form id="form1" name="form1" method="post" autocomplete="off" action="register_sresult.php" onsubmit="return mycheck()">
<table width="570" border="0" align="center">
<tr>
<td colspan="2" align=center><H2>學生用戶注冊</H2></td>
</tr>
<tr>
<td colspan="2" align=right><A href="index.php" class="one">返回</A></td>
</tr>
<tr>
<td colspan="2"><hr width="95%" size="1" color="#FF0000"></td>
</tr>
<tr>
<td width="217"><div align="right">學號:<span class="STYLE1">*</span></div></td>
<td width="343"><input type="text" name="number" id="number" value="" style=width:165pt; maxlength="50"/></td>
</tr>
<tr>
<td><div align="right">姓名:<span class="STYLE1">*</span></div></td>
<td><input type="text" name="name" id="name" value="" style=width:165pt; maxlength="50"/></td>
</tr>
<tr>
<td><div align="right">性別:<span class="STYLE1">*</span></div></td>
<td><select name="sex" id="sex" value="" style=width:165pt; maxlength="50">
<option value="未指定">未指定</option>
<option value="男">男</option>
<option value="女">女</option>
</select>
</td>
</tr>
<tr>
<td><div align="right">Email郵件:<span class="STYLE1">*</span></div></td>
<td><input type="text" name="email" id="email" value="" style=width:165pt; maxlength="50"/></td>
</tr>
<tr>
<td><div align="right">密碼:<span class="STYLE1">*</span></div></td>
<td><input type="password" name="pwd" id="pwd" value="" style=width:165pt; maxlength="50"/></td>
</tr>
<tr>
<td><div align="right">確認密碼:<span class="STYLE1">*</span></div></td>
<td><input type="password" name="pwd2" id="pwd2" value="" style=width:165pt; maxlength="50"/></td>
</tr>
<tr>
<td colspan="2"><hr width="95%" size="1" color="#FF0000"></td>
</tr>
<tr>
<td><div align="right">學院:</div></td>
<td><select name="zy" id="zy" value="" style=width:165pt; maxlength="50">
<option value="軟件學院">軟件學院</option>
<option value="計算機學院">計算機學院</option>
<option value="自動化學院">自動化學院</option>
<option value="光電學院">光電學院</option>
<option value="車輛學院">車輛學院</option>
<option value="信息與電子學院">信息與電子學院</option>
<option value="機電學院">機電學院</option>
<option value="基礎教育學院">基礎教育學院</option>
<option value="其他">其他</option>
</select>
</td>
</tr>
<tr>
<td><div align="right">出生日期:<span class="STYLE1">*</span></div></td>
<td><input type=text name="birth" id="birth" value=""
style=width:165pt; maxlength="50" onClick="WdatePicker()"></td>
</tr>
<tr>
<td><p align="right">專業:</p>
<p align="right">（單選）</p></td>
<td><select name="subject" size="4" id="subject" value="" style=width:165pt; maxlength="50">
<option value="軟件工程">軟件工程</option>
<option value="數字媒體">數字媒體</option>
<option value="信息安全">信息安全</option>
<option value="數字仿真">數字仿真</option>
<option value="移動應用開發">移動應用開發</option>
</select></td>
</tr>
<tr>
<td><div align="right">入學年月:</div></td>
<td><select name="year" id="year" value="" style=width:165pt; maxlength="50">
<option value="2010年">2010年</option>
<option value="2011年">2011年</option>
<option value="2012年">2012年</option>
<option value="2013年">2013年</option>
<option value="2014年">2014年</option>
<option value="2015年">2015年</option>
<option value="2016年">2016年</option>
<option value="2017年">2017年</option>
<option value="2018年">2018年</option>
</select>
</td>
</tr>
<tr>
<td><div align="right"></div></td>
<td><select name="month" id="month" value="" style=width:165pt; maxlength="50">
<option value="1月">01月</option>
<option value="2月">02月</option>
<option value="3月">03月</option>
<option value="4月">04月</option>
<option value="5月">05月</option>
<option value="6月">06月</option>
<option value="7月">07月</option>
<option value="8月">08月</option>
<option value="9月">09月</option>
<option value="10月">10月</option>
<option value="11月">11月</option>
<option value="12月">12月</option>
</select>
</td>
</tr>
<tr>
<td colspan="2"><hr width="95%" size="1" color="#FF0000"></td>
</tr>
<tr>
<td><div align="right">
<input type="submit" style='font-size:15px' name="Submit" value="提交"/>
</div></td>
<td><div align="center">
<input type="reset" name="button2" style='font-size:15px' id="button2" value="重置" />
</div></td>
</tr>
</table>
</form>
</body>
</html>
~~~
? ? ? JavaScript包括學號、姓名、密碼長度、性別等判斷，同時register_sresult.php顯示結果代碼如下，數據庫方面是封裝在類中，調用下面代碼實現的：
? ? ? //判斷插入的用戶是否重復
? ? ? $hpi = new HttpPostInf();
? ? ? $result = Human::id_vf($_SESSION['name'],$_SESSION['pwd'],1);
? ? ? //執行插入操作
? ? ? $hgi=new HttpPostInf();
? ? ? $result=$hgi->doquery('1',$sql);
? ? ? 同時采用Session記錄數據，但Session更好的方面是在登錄操作。
~~~
<?php
header("Content-Type: text/html; charset=utf-8");
include ("database/human.php");
session_start();
//輸入POST非空時賦值
if (!empty($_POST))
{
$_SESSION['number'] = $_POST['number'];
$_SESSION['name'] = $_POST['name'];
$_SESSION['email'] = $_POST['email'];
$_SESSION['sex'] = $_POST['sex'];
$_SESSION['pwd'] = $_POST['pwd'];
$_SESSION['zy'] = $_POST['zy'];
$_SESSION['subject'] = $_POST['subject'];
$_SESSION['year'] = $_POST['year'];
$_SESSION['month'] = $_POST['month'];
$_SESSION['birth'] = $_POST['birth'];
}
if($_SESSION['number']=='' || $_SESSION['name']=='')
{
header('Location:index.php');
}
//聯系數據庫
$hpi = new HttpPostInf();
//調用靜態函數方法 “::” 1-學生
$result = Human::id_vf($_SESSION['name'],$_SESSION['pwd'],1);
if($result!=-1) { //-1表示沒有用戶
echo "<script>alert('抱歉,您提交的用戶名id已存在!');window.history.go(-1)</script>";
session_destroy();
exit();
}
if($result==-1) { //插入數據庫
$sql = "INSERT INTO Student_Info (SInf_ID,SInf_Name,SInf_Sex,SInf_Maj,SInf_Eym,SInf_Pwd,SInf_Email,SInf_Score,Sinf_Bir) VALUES (";
$sql .= "'".$_SESSION['number']."',";
$sql .= "'".$_SESSION['name']."',";
$sql .= "'".$_SESSION['sex']."',";
$sql .= "'".$_SESSION['subject']."',";
$sql .= "'".$_SESSION['year'].$_SESSION['month']."',";
$sql .= "'".$_SESSION['pwd']."',";
$sql .= "'".$_SESSION['email']."',";
$sql .= "'0',"; //分數非空
$sql .= "'".$_SESSION['birth']."'";
$sql .= ");";
//echo $sql;
$hgi=new HttpPostInf();
$result=$hgi->doquery('1',$sql);
//echo $result;
if($result=='error'){ //添加失敗
echo "<script>alert('抱歉,您注冊用戶失敗!');window.history.go(-1)</script>";
session_destroy();
exit();
}
}
?>
<html>
<head>
<style type="text/css">
/* 這個鏈接改變顏色 */
a.one:link {color: #ff0000}
a.one:visited {color: #0000ff}
a.one:hover {color: #ffcc00}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>用戶注冊</title>
</head>
<body>
<table width="100%" height="80%" border="0" cellspacing="0" cellpadding="0">
<tr><td align="center" valign="middle">
<table>
<tr>
<td align=center><IMG height=60 src="images/Tasks.png" width=60></td>
<td align=center><H2>恭喜您注冊成功</H2></td>
</tr>
<tr>
<td colspan="2" align=right><A href="login.php" class="one">立即登陸</A></td>
</tr>
<tr>
<td colspan="2"><hr width="95%" size="1" color="#FF0000"></td>
</tr>
<tr>
<td width="217"><div align="right"><span class="STYLE1">學號:</span></div></td>
<td width="343"><?php echo $_SESSION['number']; ?></td>
</tr>
<tr>
<td width="217"><div align="right"><span class="STYLE1">姓名:</span></div></td>
<td width="343"><?php echo $_SESSION['name']; ?></td>
</tr>
<tr>
<td width="217"><div align="right"><span class="STYLE1">性別:</span></div></td>
<td width="343"><?php echo $_SESSION['sex']; ?></td>
</tr>
<tr>
<td width="217"><div align="right"><span class="STYLE1">專業:</span></div></td>
<td width="343"><?php echo $_SESSION['subject']; ?></td>
</tr>
<tr>
<td width="217"><div align="right"><span class="STYLE1">入學時間:</span></div></td>
<td width="343"><?php echo $_SESSION['year'].$_SESSION['month']; ?></td>
</tr>
<tr>
<td width="217"><div align="right"><span class="STYLE1">郵件:</span></div></td>
<td width="343"><?php echo $_SESSION['email']; ?></td>
</tr>
<tr>
<td width="217"><div align="right"><span class="STYLE1">出生日期:</span></div></td>
<td width="343"><?php echo $_SESSION['birth']; ?></td>
</tr>
<tr>
<td colspan="2"><hr width="95%" size="1" color="#FF0000"></td>
</tr>
</table>
</td></tr>
</table>
</body>
</html>
~~~
? ? ? 至于My97DatePicker控件主要是通過文件夾調用，核心代碼如下：
? ? ??<!-- 引用日歷控件 百度知道-html日期選擇控件 -->
? ? ? <script language="javascript" type="text/javascript"?
? ? ? ? ? ? ?src="My97DatePicker/WdatePicker.js">
? ? ? </script>
? ? ??<input type=text name="birth" id="birth" value=""?
? ? ? ? ? ? ?style=width:165pt; maxlength="50" onClick="WdatePicker()">
? ? ? ?下載地址：[http://download.csdn.net/detail/eastmount/8454441](http://download.csdn.net/detail/eastmount/8454441)
? ? ? ?最后希望文章對大家有所幫助，如果有錯誤或不足之處，請海涵！
? ? ? ?(By:Eastmount 2015-2-23 ?[http://blog.csdn.net/eastmount](http://blog.csdn.net/eastmount))
