为了开发出一个家教信息服务网站，家教注册登录，家教信息发布这些都需要通过表单还实现。
系列文章汇总：
一、整体设计：家教信息服务平台的开发
二、前端设计：表单实现登录注册功能
三、后台设计：MySQL数据库的增删改查
登录/注册的实现
在"我是大学生"子网页下设置两个超链接，完成用户的登录/注册
分步注册页：
分步表单这一部分是从网上搜索的一些模板网页源码中剥离出来的，同时做了一些修改。具体实现要用到一些CSS和js文件。到了这地方，js不怎么懂，不分析了，直接调用：
<link rel="stylesheet" href="assets/css/style.css">……
<script src="assets/js/jquery.backstretch.min.js"></script>
<script src="assets/js/scripts.js"></script>在从第一步输入之后，到第二步显示之前，需要验证密码和重复密码是否一致。设计为只有密码一致才能进入注册第二步。用JS实现：
<!--密码一致性验证-->
<script>
(function(){
var onenext=document.getElementById("onenext");
//初始化移入移出事件
if(onenext.addEventListener){
onenext.addEventListener("click",confirmPass);}
else if(onenext.attachEvent){
onenext.attachEvent("onClick",confirmPass);
}
})();
function confirmPass(){
var pass=document.getElementById("inputPassword");
var repeatpass=document.getElementById("repeatPassword");
if(pass.value != repeatpass.value){
alert("两次密码输入不一致！");
location.reload();
}
}
</script>代码中“onenext”就是上图“下一步”按钮的ID
完整表单内容如下：
<!--用户注册-->
<div class="container">
<div class="col-sm-6 col-sm-offset-3 form-box">
<form role="form" action="?page=registered" method="post" class="registration-form">
<fieldset>
<div class="form-top">
<div class="form-top-left">
<h3><strong>Step 1 / 3</strong></h3>
<h4>设置登录密码<h4>
</div>
</div>
<div class="form-bottom">
<div class="form-group">
<label class="sr-only" for="inputUser">用户</label>
<input type="number" name="user" placeholder="填写QQ号码" class="form-control" id="inputUser">
</div>
<div class="form-group">
<label class="sr-only" for="inputPassword">密码</label>
<input type="password" name="pass" placeholder="设置本站密码" class="form-control" id="inputPassword">
</div>
<div class="form-group">
<label class="sr-only" for="repeatPassword">重复密码</label>
<input type="password" name="repeatpass" placeholder="重复输入密码" class="form-control" id="repeatPassword">
</div>
<button type="button" id="onenext" class="btn btn-next btn-primary">下一步</button>
</div>
</fieldset>
<fieldset>
<div class="form-top">
<div class="form-top-left">
<h3><strong>Step 2 / 3</strong></h3>
<h4>填写基本资料</h4>
</div>
</div>
<div class="form-bottom">
<div class="form-group">
<label class="sr-only" for="inputName">姓名</label>
<input type="text" name="name" placeholder="姓名" class="form-control" id="inputName">
</div>
<div class="form-group">
<label class="checkbox-inline">
<input type="radio" name="gender"
value="男生" checked>男生
</label>
<label class="checkbox-inline">
<input type="radio" name="gender"
value="女生"> 女生
</label>
</div>
<div class="form-group">
<label for="inputSchool"> 学校：</label>
<select name="school" id="inputSchool" class="form-control">
<option>南京师范大学</option>
<option>南京大学</option>
<option>东南大学</option>
<option>南京农业大学</option>
<option>南京航空航天大学</option>
<option>南京理工大学</option>
<option>河海大学</option>
<option>中国药科大学</option>
<option>南京工业大学</option>
<option>南京林业大学</option>
<option>南京邮电大学</option>
<option>南京财经大学</option>
<option>南京信息工程大学</option>
<option>南京医科大学</option>
<option>南京中医药大学</option>
<option>三江学院</option>
<option>南京艺术学院</option>
<option>南京体育学院</option>
<option>南京晓庄学院</option>
<option>南京审计大学</option>
<option>其它院校</option>
</select>
</div>
<div class="form-group">
<label class="checkbox-inline">
<input type="radio" name="grade"
value="大一" checked> 大一
</label>
<label class="checkbox-inline">
<input type="radio" name="grade"
value="大二"> 大二
</label>
<label class="checkbox-inline">
<input type="radio" name="grade"
value="大三"> 大三
</label>
<label class="checkbox-inline">
<input type="radio" name="grade"
value="大四"> 大四
</label>
<label class="checkbox-inline">
<input type="radio" name="grade"
value="研一"> 研一
</label>
<label class="checkbox-inline">
<input type="radio" name="grade"
value="研二"> 研二
</label>
<label class="checkbox-inline">
<input type="radio" name="grade"
value="研三"> 研三
</label>
<label class="checkbox-inline">
<input type="radio" name="grade"
value="博士"> 博士
</label>
<label class="checkbox-inline">
<input type="radio" name="grade"
value="其它年级"> 其它年级
</label>
</div>
<button type="button" class="btn btn-previous btn-primary">上一步</button>
<button type="button" class="btn btn-next btn-primary">下一步</button>
</div>
</fieldset>
<fieldset>
<div class="form-top">
<div class="form-top-left">
<h3><strong>Step 3 / 3</strong></h3>
<h4>完善简历信息</h4>
</div>
</div>
<div class="form-bottom">
<div class="form-group">
<label class="sr-only" for="inputMajor">专业</label>
<input type="text" name="major" placeholder="在读专业" class="form-control" id="inputMajor">
</div>
<div class="form-group">
<span><strong>可教授科目：</strong></span>
<label class="checkbox-inline">
<input type="checkbox" name="subject[]" value="小学语文"> 小学语文
</label>
<label class="checkbox-inline">
<input type="checkbox" name="subject[]" value="小学数学"> 小学数学
</label>
<label class="checkbox-inline">
<input type="checkbox" name="subject[]" value="小学英语"> 小学英语
</label>
<label class="checkbox-inline">
<input type="checkbox" name="subject[]" value="初中语文"> 初中语文
</label>
<label class="checkbox-inline">
<input type="checkbox" name="subject[]" value="初中数学"> 初中数学
</label>
<label class="checkbox-inline">
<input type="checkbox" name="subject[]" value="初中英语"> 初中英语
</label>
<label class="checkbox-inline">
<input type="checkbox" name="subject[]" value="高中语文"> 高中语文
</label>
<label class="checkbox-inline">
<input type="checkbox" name="subject[]" value="高中数学"> 高中数学
</label>
<label class="checkbox-inline">
<input type="checkbox" name="subject[]" value="高中英语"> 高中英语
</label>
<label class="checkbox-inline">
<input type="checkbox" name="subject[]" value="初中物理"> 初中物理
</label>
<label class="checkbox-inline">
<input type="checkbox" name="subject[]" value="初中化学"> 初中化学
</label>
<label class="checkbox-inline">
<input type="checkbox" name="subject[]" value="初中物理"> 高中物理
</label>
<label class="checkbox-inline">
<input type="checkbox" name="subject[]" value="初中化学"> 高中化学
</label>
<label class="checkbox-inline">
<input type="checkbox" name="subject[]" value="史地政生"> 史地政生
</label>
<label class="checkbox-inline">
<input type="checkbox" name="subject[]" value="竞赛"> 竞赛
</label>
<label class="checkbox-inline">
<input type="checkbox" name="subject[]" value="复读"> 复读
</label>
<label class="checkbox-inline">
<input type="checkbox" name="subject[]" value="课外英语"> 课外英语
</label>
<label class="checkbox-inline">
<input type="checkbox" name="subject[]" value="艺术类"> 艺术类
</label>
<label class="checkbox-inline">
<input type="checkbox" name="subject[]" value="其它"> 其它
</label>
</div>
<div class="form-group">
<label for="aboutMe">自我描述：</label>
<textarea name="aboutme" placeholder="例如：个人擅长、证书、技能、家教经验等"
class="form-control" id="aboutMe"></textarea>
</div>
<button type="button" class="btn btn-previous btn-primary">上一步</button>
<button type="submit" class="btn btn-primary">注册！</button>
</div>
</fieldset>
</form>
</div>
</div>点击注册后，将表单内容通过POST的方式传入registered.php，然后后者将数据存入数据库。
教员登录：功能的实现需要用到session变量。在登录页面的最开始使用语句session_start（）；登录验证通过后定义session变量；退出时可以使用语句session_destroy（）;
"记住我"功能的实现是由cookie变量的实现
设置cookie
// re-save username and, ack, password in cookies for another week
setcookie("user", $_COOKIE["user"], time() + 7 * 24 * 60 * 60);
setcookie("pass", $_COOKIE["pass"], time() + 7 * 24 * 60 * 60);清除cookie
// delete cookies, if any
setcookie("user", "", time() - 3600);
setcookie("pass", "", time() - 3600);登录的验证通过比对表单提交和数据库里的用户名、密码完成；如果存在cookie变量，用户打开该页面时会优先通过数据库检查用户密码的有效性。如果有效，将直接送入登录后的状态。
“忘记密码”的实现使用了bootstrap自带的模态框范例
<!-- 模态框（Modal） -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog"
aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close"
data-dismiss="modal" aria-hidden="true">
×
</button>
<h4 class="modal-title" id="myModalLabel">
提醒：
</h4>
</div>
<div class="modal-body">
请联系网站管理人员找回密码。联系方式：QQ11111111。
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default"
data-dismiss="modal">关闭
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal -->
</div>显示效果如下：
说白了，登录/注册都是一个表单的处理，包括“我是家长”下的发布需求信息也是一个表单：
登录的表单比较简单；注册和需求发布的表单相似，数据较复杂。值得注意的应该是怎么把需要提交的各种类型的数据装进input元素内；罗列一下，这里使用到的input元素包括number、password、text、radio、select、checkbox、textarea。
所以到这里，教员的注册，登录，还有家长的信息发布页面就做好了。
1847
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
