写了一个简单的PHP+jQuery注册模块,需要填写的栏目包括用户名、邮箱、密码、重复密码和验证码,其中每个栏目需要具备的功能和要求如下图: 在做这个模块的时候,很大程度上借鉴了网易注册(http://reg.163.com/reg/reg.jsp?product=urs)的功能和样式。但网易对于每个栏目的判断的做法是:在输入文字时,并不给出任何实时的检测结果,而在这个栏目失去焦点时,才把检测的结果展示出来,这种做法我认为会使用户在输入时视觉上比较统一,看到的是关于该栏目要求的提示,不会出现其他信息的打扰,但同时也不会得到正在输入的字符的检测提示。所以在做这个功能的时候,我把我自认为需要实时提示的一些信息做了相应的加强,比如用户名长度超过限制和密码的长度以及强弱,并且给邮箱的大写锁定做了简单的判断。 注:表单的提交按钮type为button而不是submit,因此所有栏目的回车( keydown )都统一设置为将焦点移至下一个栏目,除了最后一个栏目验证码,在验证码栏目使用回车( keydown )会触发提交事件。 功能分析 用户名栏目: 流程 ①页面加载完即获得焦点,获得焦点时出现初始说明文字; ②鼠标点击用户名输入框,出现初始说明文字; ③输入字符,即时提示是否符合长度要求; ④失去焦点时首先判断是否为空,为空时提示不能为空;非空且长度满足要求时,开始检测用户名是否被注册; ⑤用户名已被注册,给出提示,如果没有注册,则提示可以注册; ⑥再次获得焦点时,不论输入框中是否有输入,或是否输入符合规定,都出现初始说明文字 ⑦回车时将焦点移至邮箱栏目 如图: 细节 可以使用任意字符,并且字数限制为:中文长度不超过7个汉字,英文、数字或符号长度不超过14个字母、数字或符号(类似豆瓣注册https://www.douban.com/accounts/register),即不超过14个字符 关于占位符(字符长度),一个汉字的占位符是2,一个英文(数字)的占位符是1,可以用php语句来计算字符的长度 输出:11 而strlen($str) 输出的是15:4*3+3,汉字在utf-8编码下占3个字节,英文占1个, mb_strlen($str,'utf-8') 输出的是7:一个汉字的长度是1, 如果用jquery的length来输出这个字符串,alert($("#uname").val().length),则会得到长度7, 这点要注意。 同时用户名两端不能含有空格,在检测以及注册时,程序会自动过滤用户名两端的空格。 register.html 用户名栏目的HTML代码片段: register.js公用部分的js代码:
register.js用户名部分的js代码:
checkname.php代码:
提示文字( Chrome下 ) ①初始获得焦点、再次获得焦点或点击时
②输入时实时检测长度
③删除至空且未失去焦点时,使用蓝色图标提示不能为空——用户在输入时看起来不突兀
④失去焦点且不为空,检测是否被注册( 非常短暂,一闪而过 ) ⑤失去焦点时为空、可以注册、已被注册时 用户名分析至此完毕。 邮箱栏目: 流程 ①当栏目获得焦点或者点击时不论栏目为空、填写正确或者填写错误时都出现说明文字; ②用户输入时出现下拉菜单显示多种邮件后缀供用户选择; ③失去焦点时首先判断邮箱格式是否正确,如果正确则检测邮箱是否被注册 ; ④在使用回车选择下拉菜单时,将自动填充邮箱栏目;没有出现下拉菜单时,将焦点移至密码栏目 如图: register.html邮箱栏目HTML代码片段: 下拉功能emailup.js同之前的博文《jQuery实现下拉提示且自动填充的邮箱》,略有修改,注意用回车( keydown和keyup事件)在不同情况下触发的不同动作:
register.js邮箱代码片段:
提示文字( Chrome下 ) ①获得焦点时、点击时 ②输入时 ③失去焦点为空、格式错误、已被注册、可以注册时分别为 邮箱功能至此结束。 密码栏目: 要求 ①6-16个个字符,区分大小写(参考豆瓣和网易) ②密码不能为同一字符 ③实时提示是否符合要求以及判断并显示密码强度,: 1.输入时如果为空(删除时)则用蓝色符号提示不能为空,超过长度时用红色符号 2.密码满足长度但是为相同字符的组合时:密码太简单,请尝试数字、字母和下划线的组合 3.密码强度判断有多种规则,有直接依据长度和组合规则作出判断,也有给每种长度和组合设置分数,通过验证实际密码的情况计算出最后分数来判断强弱。在这个模块中采用比较简单的一种形式,也是网易注册采用的方法: 密码满足长度且全部为不同字母、全部为不同数字或全部为不同符号时为弱:弱:试试字母、数字、符号混搭 密码满足长度且为数字、字母和符号任意两种组合时为中 密码满足长度且为数字、字母和符号三种组合时为强 ④输入时大写提示 如图: register.html密码栏目HTML代码片段: register.js密码代码片段:
大写锁定的思路是:判断输入的字符的最新一位是否是大写字母,如果是大写字母,则提示大写锁定键打开。这种方法并不十分准确,网上有一些插件能判断大写锁定,在这里只是简单地做了一下判断。 提示文字( Chrome下 ) ①获得焦点、点击时 ②输入时 ③失去焦点为空时 ④出现大写时 密码栏目至此结束。 重复密码:失去焦点时判断是否和密码一致 reister.html代码片段: register.js代码片段:
提示文字: ①获得焦点、点击时 ②失去焦点时和密码不一致、一致时分别为 至此重复密码结束。 验证码:不区分大小写 验证码采用4位,可以包含的字符为数字1-9,字母a-f 点击验证码和刷新按钮都能刷新验证码 register.html验证码代码部分:
register.js验证码部分:
valcode.php验证码生成php代码:
注:把字体"Arial"放在服务器的相应目录 提示文字: ①获得焦点时、点击时 ②为空且失去焦点时 ③输入错误、输入正确且失去焦点时分别为 验证码至此结束。 使用协议:默认勾选; register.html相应代码: register.js相应代码: 效果图: ①勾选之后 ②未勾选
提交按钮:检测是否所有栏目都填写正确,否则所有填写错误的栏目将给出错误提示。全部填写正确后提交并且发送验证邮件到注册邮箱中,邮件的验证地址在3日后失效 首先在register.js开始部分定义几个参数:nameval,emailval,pwdval,rpwdval,yzmval,fuwuval,全部设为0;当相应栏目符合规定之后,把相应的参数设为true。当所有的参数都为true之后,提交至registerChk.php,否则return false。 register.html相应代码: register.js相应代码: 参数设置: var nameval,emailval,pwdval,rpwdval,yzmval,fuwuval = 0; 提交事件:
显示效果: 有栏目为空时点击提交按钮
注册以及发送邮件: 使用了Zend Framework( 1.11.11 )中的zend_email组件。Zend Framework的下载地址是:https://packages./releases/ZendFramework-1.11.11/ZendFramework-1.11.11.zip。在Zend Framework根目录下library路径下,剪切Zend文件至服务器下,在注册页面中引入Zend/Mail/Transport/Smtp.php和Zend/Mail.php两个文件。 当点击提交按钮时,表单将数据提交至register_chk.php,然后页面在当前页跳转至register_back.html,通知用户注册结果并且进邮箱激活。 验证邮箱的地址参数使用用户名和一个随机生成的key。 register_chk.php:
邮箱中收取的邮件截图: 然后点击邮箱中的链接进行激活,把数据库中的active设置为1。 activation.php:
关于注册成功后的邮件页和跳转页,这里不做了。 关于数据库防注入的几种方式magic_quote_gpc,addslashes/stripslashes,mysql_real_eascpae_string,我做了一张表格
附 数据库设计: user表 说明:md5的长度是32。 模块的目录结构如下: ROOT: 模块至此结束。 |
|