在线时间:8:00-16:00
迪恩网络APP
随时随地掌握行业动态
扫描二维码
关注迪恩网络微信公众号
写了一个简单的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 < value.length; i++) {
23 if (value[i].match(/[^\x00-\xff]/ig) != null)
24 len += 2;
25 else
26 len += 1;
27 }
28 return len;
29 }
30
31 //......
32 )};
register.js用户名部分的js代码: 1 //检测用户名长度
2 function unameLen(value){
3
4 var showMsg = $("#unamechk");
5
6 /* (strlen($str)+mb_strlen($str))/2 可得出限制字符长度的上限,
7 * 例如:$str为7个汉字:"博客园记录生活",利用上面的语句可得出14,
8 * 同样,14个英文,利用上面的语句同样能得出字符长度为14
9 */
10 if(countLen(value) > 14){
11
12 var errorMsg = '用户名长度不能超过14个英文或7个汉字';
13 error(showMsg,errorMsg);
14 }else if(countLen(value) == 0){
15
16 var noticeMsg = '用户名不能为空';
17 notice(showMsg,noticeMsg);
18 }else{
19
20 var successMsg = '长度符合要求';
21 success(showMsg,successMsg);
22 }
23
24 return countLen(value);
25 }
26
27 //用户名
28 unameLen($("#uname").val());
29
30 $("#uname").focus(function(){
31
32 var noticeMsg = '中英文均可,最长为14个英文或7个汉字';
33 notice($("#unamechk"),noticeMsg);
34 })
35 .click(function(){
36
37 var noticeMsg = '中英文均可,最长为14个英文或7个汉字';
38 notice($("#unamechk"),noticeMsg);
39 })
40 .keyup(function(){
41
42 unameLen(this.value);
43 }).keydown(function(){
44
45 //把焦点移至邮箱栏目
46 if(event.keyCode == 13){
47
48 $("#uemail").focus();
49 }
50 })
51 .blur(function(){
52
53 if($("#uname").val()!="" && unameLen(this.value)<=14 && unameLen(this.value)>0){
54 //检测中
55 $("#unamechk").html("检测中...").attr("class","loading");
56 //ajax查询用户名是否被注册
57 $.post("./../chkname.php",{
58
59 //要传递的数据
60 uname : $("#uname").val()
61 },function(data,textStatus){
62
63 if(data == 0){
64
65 var successMsg = '恭喜,该用户名可以注册';
66 $("#unamechk").html(successMsg).attr("class","success");
67
68 //设置参数
69 nameval = true;
70 }else if(data == 1){
71
72 var errorMsg = '该用户名已被注册';
73 error($("#unamechk"),errorMsg);
74 }else{
75
76 var errorMsg = '查询出错,请联系网站管理员';
77 error($("#unamechk"),errorMsg);
78 }
79 });
80 }else if(unameLen(this.value)>14){
81
82 var errorMsg = '用户名长度不能超过14个英文或7个汉字';
83 error($("#unamechk"),errorMsg);
84 }else{
85
86 var errorMsg = '用户名不能为空';
87 error($("#unamechk"),errorMsg);
88 }
89 });
90
91 //加载后即获得焦点
92 $("#uname").focus();
checkname.php代码: 1 <?php
2
3 header("charset=utf-8");
4
5 require_once("conn/conn.php");
6
7 if(isset($_POST['uname']) && $_POST['uname']!=""){
8
9 $uname = trim(addslashes($_POST['uname']));
10 }
11
12 $sql = "select uname from user where uname='".$uname."'";
13
14 if($conne->getRowsNum($sql) == 1){
15
16 $state = 1;
17 }else if($conne->getRowsNum($sql) == 0){
18
19 $state = 0;
20 }else{
21
22 echo $conne->msg_error();
23 }
24
25 echo $state;
提示文字( Chrome下 ) ①初始获得焦点、再次获得焦点或点击时
②输入时实时检测长度
③删除至空且未失去焦点时,使用蓝色图标提示不能为空——用户在输入时看起来不突兀
④失去焦点且不为空,检测是否被注册( 非常短暂,一闪而过 )
⑤失去焦点时为空、可以注册、已被注册时
用户名分析至此完毕。
邮箱栏目: 流程 ①当栏目获得焦点或者点击时不论栏目为空、填写正确或者填写错误时都出现说明文字; ②用户输入时出现下拉菜单显示多种邮件后缀供用户选择; ③失去焦点时首先判断邮箱格式是否正确,如果正确则检测邮箱是否被注册 ; ④在使用回车选择下拉菜单时,将自动填充邮箱栏目;没有出现下拉菜单时,将焦点移至密码栏目 如图: register.html 邮箱栏目HTML代码片段: 1 <!-- email -->
2 <div class="ipt">
3 <input type="text" name="uemail" id="uemail" value="" placeholder="常用邮箱地址" />
4 <span id="uemailchk"></span>
5 <ul class="autoul"></ul>
6 </div>
下拉功能emailup.js同之前的博文《jQuery实现下拉提示且自动填充的邮箱》,略有修改,注意用回车( keydown和keyup事件 )在不同情况下触发的不同动作:
View Code
register.js邮箱代码片段: //邮箱下拉js单独引用emailup.js
$("#uemail").focus(function(){
var noticeMsg = '用来登陆网站,接收到激活邮件才能完成注册';
notice($("#uemailchk"),noticeMsg);
})
.click(function(){
var noticeMsg = '用来登陆网站,接收到激活邮件才能完成注册';
notice($("#uemailchk"),noticeMsg);
})
.blur(function(){
if(this.value!="" && this.value.match(/^[\w-]+(\.[\w-]+)*@[\w-]+(\.[\w-]+)+$/)!=null){
//检测是否被注册
$("#uemailchk").html("检测中...").attr("class","loading");
//ajax查询用户名是否被注册
$.post("./../chkemail.php",{
//要传递的数据
uemail : $("#uemail").val()
},function(data,textStatus){
if(data == 0){
var successMsg = '恭喜,该邮箱可以注册';
$("#uemailchk").html(successMsg).attr("class","success");
emailval = true;
}else if(data == 1){
var errorMsg = '该邮箱已被注册';
error($("#uemailchk"),errorMsg);
}else{
var errorMsg = '查询出错,请联系网站管理员';
error($("#uemailchk"),errorMsg);
}
});
}else if(this.value == ""){
var errorMsg = '邮箱不能为空';
error($("#uemailchk"),errorMsg);
}else{
var errorMsg = '请填写正确的邮箱地址';
$("#uemailchk").html(errorMsg).attr("class","error");
}
});
提示文字( Chrome下 ) ①获得焦点时、点击时 ②输入时 ③失去焦点为空、格式错误、已被注册、可以注册时分别为 邮箱功能至此结束。
密码栏目: 要求 ①6-16个个字符,区分大小写(参考豆瓣和网易) ②密码不能为同一字符 ③实时提示是否符合要求以及判断并显示密码强度,: 1.输入时如果为空(删除时)则用蓝色符号提示不能为空,超过长度时用红色符号 2.密码满足长度但是为相同字符的组合时:密码太简单,请尝试数字、字母和下划线的组合 3.密码强度判断有多种规则,有直接依据长度和组合规则作出判断,也有给每种长度和组合设置分数,通过验证实际密码的情况计算出最后分数来判断强弱。在这个模块中采用比较简单的一种形式,也是网易注册采用的方法: 密码满足长度且全部为不同字母、全部为不同数字或全部为不同符号时为弱:弱:试试字母、数字、符号混搭 密码满足长度且为数字、字母和符号任意两种组合时为中 密码满足长度且为数字、字母和符号三种组合时为强 ④输入时大写提示 如图: register.html 密码栏目HTML代码片段: 1 <div class="ipt">
2 <input type="password" name="upwd" id="upwd" value="" placeholder="设置密码" />
3 <div class="upwdpic">
4 <span id="upwdchk"></span>
5 <img id="pictie" />
6 </div>
7 </div>
register.js密码代码片段: 1 function noticeEasy(){
2
3 //密码全部为相同字符或者为123456,用于keyup时的notice
4 var noticeMsg = '密码太简单,请尝试数字、字母和下划线的组合';
5 return notice($("#upwdchk"),noticeMsg);
6 }
7
8 function errorEasy(){
9
10 //密码全部为相同字符或者为123456,用于blur时的error
11 var errorMsg = '密码太简单,请尝试数字、字母和下划线的组合';
12 return error($("#upwdchk"),errorMsg);
13 }
14
15 //检测密码长度函数
16 //检测密码长度
17 function upwdLen(value,func){
18
19 var showMsg = $("#upwdchk");
20
21 if(countLen(value) > 16){
22
23 var errorMsg = '密码不能超过16个字符';
24 error(showMsg,errorMsg);
25
26 $("#pictie").hide();
27 }else if(countLen(value) < 6){
28
29 //使用notice更加友好
30 var noticeMsg = '密码不能少于6个字符';
31 notice(showMsg,noticeMsg);
32
33 $("#pictie").hide();
34 }else if(countLen(value) == 0){
35
36 //使用notice更加友好
37 var noticeMsg = '密码不能为空';
38 notice(showMsg,noticeMsg);
39
40 $("#pictie").hide();
41 }else{
42
43 upwdStrong(value,func);//如果长度不成问题,则调用检测密码强弱
44 }
45
46 return countLen(value);//返回字符长度
47 }
48
49 //检测密码强弱
50 function upwdStrong(value,func){
51
52 var showMsg = $("#upwdchk");
53
54 if(value.match(/^(.)\1*$/)!=null || value.match(/^123456$/)){
55
56 //密码全部为相同字符或者为123456,调用函数noticeEasy或errorEasy
57 func;
58 }else if(value.match(/^[A-Za-z]+$/)!=null || value.match(/^\d+$/)!=null || value.match(/^[^A-Za-z0-9]+$/)!=null){
59
60 //全部为相同类型的字符为弱
61 var successMsg = '弱:试试字母、数字、符号混搭';
62 success(showMsg,successMsg);
63
64 //插入强弱条
65 $("#pictie").show().attr("src","images/weak.jpg");
66
67 pwdval = true;
68
69 }else if(value.match(/^[^A-Za-z]+$/)!=null || value.match(/^[^0-9]+$/)!=null || value.match(/^[a-zA-Z0-9]+$/)!=null){
70
71 //任意两种不同类型字符组合为中强( 数字+符号,字母+符号,数字+字母 )
72 var successMsg = '中强:试试字母、数字、符号混搭';
73 success(showMsg,successMsg);
74
75 $("#pictie").show().attr("src","images/normal.jpg");
76
77 pwdval = true;
78 }else{
79
80 //数字、字母和符号混合
81 var successMsg = '强:请牢记您的密码';
82 success(showMsg,successMsg);
83
84 $("#pictie").show().attr("src","images/strong.jpg");
85
86 pwdval = true;
87 }
88 }
89
90 $upper = $("<div id=\"upper\">大写锁定已打开</div>");
91
92 $("#upwd").focus(function(){
93
94 var noticeMsg = '6到16个字符,区分大小写';
95 notice($("#upwdchk"),noticeMsg);
96
97 $("#pictie").hide();
98 })
99 .click(function(){
100
101 var noticeMsg = '6到16个字符,区分大小写';
102 notice($("#upwdchk"),noticeMsg);
103
104 $("#pictie").hide();
105 }).keydown(function(){
106
107 //把焦点移至邮箱栏目
108 if(event.keyCode == 13){
109
110 $("#rupwd").focus();
111 }
112 })
113 .keyup(function(){
114
115 //判断大写是否开启
116 //输入密码的长度
117 var len = this.value.length;
118 if(len!=0){
119
120 //当输入的最新以为含有大写字母时说明开启了大写锁定
121 if(this.value[len-1].match(/[A-Z]/)!=null){
122
123 //给出提示
124 $upper.insertAfter($(".upwdpic"));
125 }else{
126
127 //移除提示
128 $upper.remove();
129 }
130 }else{
131
132 //当密码框为空时移除提示
133 if($upper){
134
135 $upper.remove();
136 }
137 }//判断大写开启结束
138
139 //判断长度及强弱
140 upwdLen(this.value,noticeEasy());
141 })
142 //keyup事件结束
143 .blur(function(){
144
145 upwdLen(this.value,errorEasy());
146 //upwdLen函数中部分提示使用notice是为了keyup事件中不出现红色提示,而blur事件中则需使用error标红
147 if(this.value == ""){
148
149 var errorMsg = '密码不能为空';
150 error($("#upwdchk"),errorMsg);
151
152 $("#pictie").hide();
153 }else if(countLen(this.value)<6){
154
155 var errorMsg = '密码不能少于6个字符';
156 error($("#upwdchk"),errorMsg);
157
158 $("#pictie").hide();
159 }
160 });
大写锁定的思路是:判断输入的字符的最新一位是否是大写字母,如果是大写字母,则提示大写锁定键打开。这种方法并不十分准确,网上有一些插件能判断大写锁定,在这里只是简单地做了一下判断。 提示文字( Chrome下 ) ①获得焦点、点击时 ②输入时 失去焦点时与此效果相同 失去焦点时与此效果相同 失去焦点时与此效果相同 失去焦点时与此效果相同 ③失去焦点为空时 ④出现大写时 密码栏目至此结束。
重复密码:失去焦点时判断是否和密码一致 reister.html代码片段: <div class="ipt">
<input type="password" name="rupwd" id="rupwd" value="" placeholder="确认密码" />
<span id="rupwdchk"></span>
</div>
register.js代码片段: 1 $("#rupwd").focus(function(){
2
3 var noticeMsg = '再次输入你设置的密码';
4 notice($("#rupwdchk"),noticeMsg);
5 })
6 .click(function(){
7
8 var noticeMsg = '再次输入你设置的密码';
9 notice($("#rupwdchk"),noticeMsg);
10 }).keydown(function(){
11
12 //把焦点移至邮箱栏目
13 if(event.keyCode == 13){
14
15 $("#yzm").focus();
16 }
17 })
18 .blur(function(){
19
20 if(this.value == $("#upwd").val() && this.value!=""){
21
22 success($("#rupwdchk"),"");
23
24 rpwdval = true;
|
2022-08-17
2022-11-06
2022-07-18
2022-08-18
2022-07-29
请发表评论