表单实现登录注册功能

为了开发出一个家教信息服务网站，家教注册登录，家教信息发布这些都需要通过表单还实现。

系列文章汇总：

一、整体设计：家教信息服务平台的开发

二、前端设计：表单实现登录注册功能

三、后台设计：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 weeksetcookie("user", $_COOKIE["user"], time() + 7 * 24 * 60 * 60);setcookie("pass", $_COOKIE["pass"], time() + 7 * 24 * 60 * 60);

清除cookie

    // delete cookies, if anysetcookie("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。

所以到这里，教员的注册，登录，还有家长的信息发布页面就做好了。

表单实现登录注册功能相关推荐

为什么jsp的form表单不能跳转_UI设计干货分享：设计语言 - 表单（登录/注册）...
原文作者:罗耀_UI 设计语言中的表单中的登录与注册部分大致讲完了按钮.下拉菜单.导航栏.分页等,就要开始讲表单了.表单也分几种功能和几种样式,我也不可能不能把它们一一讲出来,所以只挑出几个常用的来 ...
Flask项目实战——7—(Redis数据库存储验证码信息、验证登录界面的表单信息、注册功能实现、登录实现)
推荐一个API平台:聚合数据 1.Redis数据库存储验证码信息保存手机验证码到Redis数据库公有视图文件:apps/common/views.py # -*- encoding: utf-8 ...
【PHP学习】表单验证实现注册功能
上次学了一下最基本的语法,这次笔记中记录的是用上次学到的语法以及第一次的前端页面做表单验证,实现注册功能. 网页界面博客链接:PHP 学习之路(1)-- Simple Message 系统基础语法博 ...
表单：登录注册页面
from :双标签,一般在此标签里面放置其他标签(表单元素==表单控件): 输入框,密码输入框,按钮,复选框,单选框,文件上传表单元素基本上都是input标签结合type属性来使用表单:提交数据 ...
Django练习——基于Mysql的登录注册功能界面(django模型、模板、表单简单应用)
目录 1.创建 2.配置Mysql (1)连接数据库驱动 (2)创建表格 (3)创建迁移文件并同步到数据库 3.admin后台 (1)创建超级用户 (2)注册模型login_msg 4.路由与视图 4 ...
注册登录案例用MVC和mysql_用MVC模式实现简单用户登录注册功能
Model2模式 Jsp+Servlet+JavaBean MVC:开发模式 M:Model 模型层 ----> JavaBean V:View 视图层 ----> Jsp C:Contr ...
node mysql登录注册_图解NodeJS实现登录注册功能
该Demo根据菜鸟教程的练手项目,请提前到菜鸟教程的官网查看nodejs的相关教程,根据教程实际操作一遍,然后自己动手去实现登录.注册功能,此Demo只作参考,不符合前端相关规范. 使用的技术栈 no ...
java wed登录面代码_JavaWeb实现用户登录注册功能实例代码(基于Servlet+JSP+JavaBean模式)...
下面通过通过图文并茂的方式给大家介绍JavaWeb实现用户登录注册功能实例代码,一起看看吧. 一.Servlet+JSP+JavaBean开发模式(MVC)介绍 Servlet+JSP+JavaBea ...
Axure实战——实现登录注册功能
背景在做系分项目原型的时候,我需要做一个简单的登录注册模块.但要实现这个功能,只是看我之前写的博客中的相关教程是远远不够的.因此,我需要重新开始摸索,便有了这篇博客. 为了完成该功能,我们需要用到两 ...

表单实现登录注册功能

登录/注册的实现

表单实现登录注册功能相关推荐

最新文章

热门文章