PHP+jQuery 注册模块开发,phpjquery模块开发
PHP+jQuery 注册模块开发,phpjquery模块开发
/* ******* 环境: Apache2.2.8 + PHP5.2.6 + MySQL5.0.51b + jQuery-1.8.3.min.js *******
******* 其他组件:Zend_mail( Zend_framework 1.11.11 )
******* Date:2014-09-25
******* Author:小dee
******* Blog:http://www.cnblogs.com/dee0912/
*/
写了一个简单的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语句来计算字符的长度
1 php 2 //php.ini开启了php_mbstring.dll扩展 3 $str="博客园小dee"; 4 5 echo (strlen($str)+mb_strlen($str,'utf-8'))/2;
输出: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代码片段:
1 2 div class="ipt fipt"> 3 input type="text" name="uname" id="uname" value="" placeholder="输入用户名" autocomplete="off" /> 4 5 span id="unamechk">span> 6 div>
register.js公用部分的js代码:
1 $(function(){ 2 3 //说明文字 4 function notice(showMsg,noticeMsg){ 5 showMsg.html(noticeMsg).attr("class","notice"); 6 } 7 //显示错误信息 8 function error(showMsg,errorMsg){ 9 showMsg.html(errorMsg).attr("class","error"); 10 } 11 //显示正确信息 12 function success(showMsg,successMsg){ 13 showMsg.html(successMsg) 14 .css("height","20px") 15 .attr("class","success"); 16 } 17 18 //计算字符长度 19 function countLen(value){ 20 21 var len = 0; 22 for (var i = 0; i ) {
推荐阅读
-
asp.net abp模块化开发之通用树2:设计思路及源码解析
-
C# - SPC(Statistical Process Control)系统 - 6西格玛数据决策和Chart模块的开发与实现
-
Django 开发拓展 auth 模块,注册用户时发生 ValueError: The given username must be set
-
分享一个基于Net Core 3.1开发的模块化的项目
-
asp.net 在DNN模块开发中遇到的resx怪问题
-
Java Web开发过程中登陆模块的验证码的实现方式总结
-
门店订餐管理系统定制开发 小猪O2O快店模块开启线下零售模式
-
Python开发之日志记录模块:logging
-
电子商城项目开发(前台功能模块开发)
-
phpcms模块开发之swfupload的使用介绍