日韩性视频-久久久蜜桃-www中文字幕-在线中文字幕av-亚洲欧美一区二区三区四区-撸久久-香蕉视频一区-久久无码精品丰满人妻-国产高潮av-激情福利社-日韩av网址大全-国产精品久久999-日本五十路在线-性欧美在线-久久99精品波多结衣一区-男女午夜免费视频-黑人极品ⅴideos精品欧美棵-人人妻人人澡人人爽精品欧美一区-日韩一区在线看-欧美a级在线免费观看

歡迎訪問 生活随笔!

生活随笔

當(dāng)前位置: 首頁 > 编程语言 > php >内容正文

php

PHP+JavaScript+HTML实现注册界面表单及日历控件

發(fā)布時(shí)間:2024/5/28 php 74 豆豆
生活随笔 收集整理的這篇文章主要介紹了 PHP+JavaScript+HTML实现注册界面表单及日历控件 小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
? ? ? ? 本文主要是介紹我做PHP網(wǎng)站時(shí)的一個(gè)HTML的簡(jiǎn)單靜態(tài)界面,它的主要功能是用戶注冊(cè)界面,并且參照了網(wǎng)上的例子使用JavaScript判斷和My97DatePicker的日歷控件。界面效果如下圖所示:

? ? ? ? 同時(shí)插入數(shù)據(jù)庫顯示效果如下圖所示:
? ? ? ? 可以看到引用My97DatePicker的日歷控件及判斷效果如下圖所示: ??
? ? ? ? 其中注冊(cè)界面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("學(xué)號(hào):");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("學(xué)院專業(yè):");msg.document.write(form1.zy.value+"<br>");msg.document.write("個(gè)人簡(jiǎn)介:");msg.document.write(form1.instruction.value+"<br>");msg.document.write("<br>"); }function mycheck() {//判斷if(document.form1.number.value==""){alert("請(qǐng)輸入學(xué)號(hào)");document.form1.number.focus();return false;}var number = /^[0-9]{6,14}$/;if (!number.exec(document.form1.number.value)) {window.alert("學(xué)號(hào)必須由數(shù)字組成且長度為6-14!");document.form1.number.focus();return false;}if(document.form1.name.value==""){alert("請(qǐng)輸入姓名");document.form1.name.focus();return false;}if(document.form1.sex.value=="未指定"){alert("請(qǐng)指明性別");document.form1.sex.focus();return false;}if(document.form1.email.value.indexOf("@")==-1||document.form1.email.value.indexOf(".")==-1){alert("郵箱格式不正確,請(qǐng)重新輸入!");document.form1.email.focus();return false;}if(document.form1.pwd.value==""){alert("請(qǐng)輸入密碼");document.form1.pwd.focus();return false;}var patrn=/^[a-zA-Z0-9]{5,20}$/;if (!patrn.exec(document.form1.pwd.value)) {window.alert("密碼只能由字母或者數(shù)字組成且長度為5-20之間!");return false;}if(document.form1.pwd2.value==""){alert("請(qǐng)輸入確認(rèn)密碼");document.form1.pwd2.focus();return false;}if(document.form1.pwd.value!=document.form1.pwd2.value){alert("輸入的密碼與確認(rèn)密碼不一致!");document.form1.pwd2.focus();return false;}if(do_selected()==""){alert("請(qǐng)至少選擇一門課");document.form1.subject.focus();return false;}//win_open(); } </script> <style type="text/css">/* 這個(gè)鏈接改變顏色 */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>用戶注冊(cè)</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" οnsubmit="return mycheck()"><table width="570" border="0" align="center"><tr><td colspan="2" align=center><H2>學(xué)生用戶注冊(cè)</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">學(xué)號(hào):<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">確認(rèn)密碼:<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">學(xué)院:</div></td><td><select name="zy" id="zy" value="" style=width:165pt; maxlength="50"><option value="軟件學(xué)院">軟件學(xué)院</option><option value="計(jì)算機(jī)學(xué)院">計(jì)算機(jī)學(xué)院</option><option value="自動(dòng)化學(xué)院">自動(dòng)化學(xué)院</option><option value="光電學(xué)院">光電學(xué)院</option><option value="車輛學(xué)院">車輛學(xué)院</option><option value="信息與電子學(xué)院">信息與電子學(xué)院</option><option value="機(jī)電學(xué)院">機(jī)電學(xué)院</option><option value="基礎(chǔ)教育學(xué)院">基礎(chǔ)教育學(xué)院</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">專業(yè):</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="數(shù)字媒體">數(shù)字媒體</option><option value="信息安全">信息安全</option><option value="數(shù)字仿真">數(shù)字仿真</option><option value="移動(dòng)應(yīng)用開發(fā)">移動(dòng)應(yīng)用開發(fā)</option></select></td></tr><tr><td><div align="right">入學(xué)年月:</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包括學(xué)號(hào)、姓名、密碼長度、性別等判斷,同時(shí)register_sresult.php顯示結(jié)果代碼如下,數(shù)據(jù)庫方面是封裝在類中,調(diào)用下面代碼實(shí)現(xiàn)的:
? ? ? ? //判斷插入的用戶是否重復(fù)
? ? ? ? $hpi = new HttpPostInf();
? ? ? ? $result = Human::id_vf($_SESSION['name'],$_SESSION['pwd'],1);

? ? ? ? //執(zhí)行插入操作
? ? ? ? $hgi=new HttpPostInf();
? ? ? ? $result=$hgi->doquery('1',$sql);

? ? ? ? 同時(shí)采用Session記錄數(shù)據(jù),但Session更好的方面是在登錄操作。
<?phpheader("Content-Type: text/html; charset=utf-8");include ("database/human.php");session_start(); //輸入POST非空時(shí)賦值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');}//聯(lián)系數(shù)據(jù)庫$hpi = new HttpPostInf();//調(diào)用靜態(tài)函數(shù)方法 “::” 1-學(xué)生$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) { //插入數(shù)據(jù)庫$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',"; //分?jǐn)?shù)非空$sql .= "'".$_SESSION['birth']."'";$sql .= ");";//echo $sql;$hgi=new HttpPostInf();$result=$hgi->doquery('1',$sql);//echo $result;if($result=='error'){ //添加失敗echo "<script>alert('抱歉,您注冊(cè)用戶失敗!');window.history.go(-1)</script>"; session_destroy();exit();}} ?> <html> <head> <style type="text/css">/* 這個(gè)鏈接改變顏色 */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>用戶注冊(cè)</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>恭喜您注冊(cè)成功</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">學(xué)號(hào):</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">專業(yè):</span></div></td><td width="343"><?php echo $_SESSION['subject']; ?></td></tr><tr><td width="217"><div align="right"><span class="STYLE1">入學(xué)時(shí)間:</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控件主要是通過文件夾調(diào)用,核心代碼如下:
? ? ? ??<!-- 引用日歷控件 百度知道-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
? ? ? ? ?最后希望文章對(duì)大家有所幫助,如果有錯(cuò)誤或不足之處,請(qǐng)海涵!
? ? ? ? ?(By:Eastmount 2015-2-23
?http://blog.csdn.net/eastmount)


總結(jié)

以上是生活随笔為你收集整理的PHP+JavaScript+HTML实现注册界面表单及日历控件的全部?jī)?nèi)容,希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò),歡迎將生活随笔推薦給好友。