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

        本文主要是介绍我做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
         最后希望文章对大家有所帮助，如果有错误或不足之处，请海涵！
         (By:Eastmount 2015-2-23  http://blog.csdn.net/eastmount)

时间： 2024-04-20 06:26:27

PHP+JavaScript+HTML实现注册界面表单及日历控件的相关文章

看实例学VFP：编程方式向表单添加新控件

vfp的"表单控件工具栏"包含了标签(Label).文本框(TextBox)等常用的控件类,以前我们向表单添加控件时多数都是在设计时使用该工具栏. 单击该工具栏上的某个控件图标后,即可在表单上拖动.绘制出所需要的控件.但有时我们需要的控件有可能在设计时无法确定,而是在应用程序运行时根据具体情况动态创建的,这时就需要以编程的方式,通过使用addobject()函数或creatobject()函数动态地向表单添加新控件. 本例在命令按钮的click事件代码中,使用系统基类grid动态创建出

mvc4表单提交后控件器验证失败如何返回提交表单前的页面

问题描述 各位大侠,小弟刚学mvc4不久,请大家帮忙.问题如下:mvc4表单提交后控件器验证失败如何返回提交表单前的页面,提交表单页面有使用Ajax请求联动的下拉框,我想在提交表单后,如果控制器验证错误,还要反回页面继续修改表单. 解决方案 解决方案二:参看引用3楼Asa_Jim的回复: 这很简单啊,举两个例子页面里面写functiondelComplement(id){ajaxpost('/AfterSales/Complement_Delete_Array',{hid_ID:id},func

javascript如何监听form 表单提交请求？

问题描述 javascript如何监听form 表单提交请求? 前端form 表单提交请求如何监听?就像ajax请求可以通过xmlHttpRquest对象去监听所有的ajax请求,对其中的参数做一层包装再发送到后台,后台返回的数据也可以在此处做一次封装再发给指定的页面一样,但是xmlHttpRquest捕捉不到form表单提交的请求,请问各位大神form表单提交的请求前端如何捕获? 解决方案 表单的onsubmit事件,或者给input为submit的类型添加onclick事件也行,返回fals

Javascript实例教程(9) 检验表单有效性

javascript|教程 利用javascript表单的有效性检验 表单的有效性检验是javascript一个很有用的方面.它可以用于检查一个给定的表单以及发现表单中的任何问题,比如一个空白的输入框或者一个无效的E-mail(电子邮件)地址,然后它可以通知用户并且就不会将这些错误的表单传给服务器以节省时间.另外,除此以外,对表单标签的一些修改跟其它类型的脚本是类似的.以下的例子是一个简单的表单,如下面表单所示.你可以让名字的方框留空白或者输入一个电子邮件地址而没有@符号,即是输入错误的内容,看

Javascript 函数: CTRL+回车 提交表单

javascript|函数|提交表单 <script type="text/javascript"> //<![CDATA[ Javascript 函数: Ctrl+回车 提交表单 // 例: <textarea name="textarea" ></textarea> // 注意: Form 必须有 Name 或 ID      function submitForm(formName) {         if(wind

Javascript中CTRL+回车提交表单

<script type="text/javascript"> //<![CDATA[ Javascript 函数: Ctrl+回车 提交表单 // 例: <textarea name="textarea" onKeyDown="submitForm(this.form.name)"></textarea> // 注意: Form 必须有 Name 或 ID function submitForm(for

JavaScript实现仿网易通行证表单验证

  这篇文章主要介绍了JavaScript实现仿网易通行证表单验证,十分的实用,有需要的小伙伴可以参考下. 介绍一下表单验证,不错哦: 如图 CSS代码 ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60

JavaScript获取按钮所在form表单id的方法

 本文实例讲述了JavaScript获取按钮所在form表单id的方法.分享给大家供大家参考.具体如下: 这里使用javascript获取form表单按钮的id,可以通过下面的JS代码获取. 1 2 3 4 5 6 7 8 9 10 11 12 13 <!DOCTYPE html> <html> <body> <h1>www.sharejs.com</h1> <form id="form1"> <button

javascript获取form里的表单元素的示例代码

 本篇文章主要是对javascript获取form里的表单元素的示例代码进行了介绍,需要的朋友可以过来参考下,希望对大家有所帮助 //获取form对象   var form=document.getElementById('my_form');   //用户名input对象 user_name是对象的name属性   var userName=form.user_name;   //用户名清空   userName.value='';   //用户密码input对象 password是对象的na