Home > Article > Backend Development > PHP+jQuery registration module development, phpjquery module development_PHP tutorial

PHP+jQuery registration module development, phpjquery module development_PHP tutorial

WBOYOriginal: 2016-07-13 10:18:221213browse

PHP+jQuery registration module development, phpjquery module development

<span>/*</span><span>
******* 环境: Apache2.2.8 + PHP5.2.6 + MySQL5.0.51b + jQuery-1.8.3.min.js *******<br />******* 其他组件：Zend_mail( Zend_framework 1.11.11 )<br />******* Date：2014-09-25<br />******* Author：小dee<br />******* Blog：http://www.cnblogs.com/dee0912/<br /></span><span>*/</span>

Written a simple PHP+jQuery registration module. The columns that need to be filled in include user name, email, password, repeated password and verification code. The functions and requirements of each column are as follows:

When making this module, I largely drew on the functions and styles of NetEase Registration (http://reg.163.com/reg/reg.jsp?product=urs). However, NetEase’s approach to judging each column is that it does not provide any real-time detection results when entering text, and only displays the detection results when the column loses focus. I think this approach will make The user's vision is relatively unified when typing. What he sees is the prompt about the requirements of the column, and there will be no interruption of other information, but at the same time, he will not get the detection prompt of the character being entered. So when I was working on this function, I made corresponding enhancements to some information that I thought needed real-time prompts, such as the length of the user name exceeding the limit and the length and strength of the password, and made a simple judgment on the caps lock of the mailbox. .

Note: The submit button type of the form is button instead of submit, so the keydown in all columns is uniformly set to move the focus to the next column, except for the verification code in the last column. Use return in the verification code column. Cart (keydown) will trigger the commit event.

Functional Analysis

UsernameColumn:

Process

①The page will get focus after loading, and the initial description text will appear when it gets focus;

②Click the user name input box with the mouse, and the initial description text will appear;

③Enter characters and you will be prompted immediately to see if they meet the length requirements;

④When the focus is lost, first determine whether it is empty. If it is empty, the prompt cannot be empty; when it is not empty and the length meets the requirements, start to detect whether the user name has been registered;

⑤The user name has been registered, and a prompt will be given. If it is not registered, it will prompt that you can register;

⑥When the focus is gained again, regardless of whether there is input in the input box or whether the input meets the requirements, the initial description text will appear

⑦ When you press Enter, move the focus to the mailbox column

Pictured:

Details

You can use any characters, and the word limit is: Chinese characters cannot exceed 7 Chinese characters, and English characters, numbers or symbols cannot exceed 14 letters, numbers or symbols (similar to Douban registration https://www.douban.com/ accounts/register), that is, no more than 14 characters

Regarding placeholders (character length), the placeholder for a Chinese character is 2, and the placeholder for an English (number) is 1. You can use php statements to calculate the length of characters

<span>1</span> <?<span>php
</span><span>2</span> <span>//</span><span>php.ini开启了php_mbstring.dll扩展</span>
<span>3</span> <span>$str</span>="博客园小dee"<span>;
</span><span>4</span>  
<span>5</span> <span>echo</span> (<span>strlen</span>(<span>$str</span>)+mb_strlen(<span>$str</span>,'utf-8'))/2;

Output: 11

The output of strlen($str) is 15:4*3+3. Chinese characters occupy 3 bytes in utf-8 encoding and English occupies 1 bytes.

mb_strlen($str,'utf-8') outputs 7: the length of a Chinese character is 1,

If you use jquery’s length to output this string, alert($("#uname").val().length), you will get a length of 7,

This should be noted.

At the same time, the user name cannot contain spaces at both ends. During detection and registration, the program will automatically filter the spaces at both ends of the user name.

<span>1</span> <span><!--</span><span> 用户名 </span><span>--></span>        
<span>2</span> <span><</span><span>div </span><span>class</span><span>="ipt fipt"</span><span>></span>
<span>3</span>     <span><</span><span>input </span><span>type</span><span>="text"</span><span> name</span><span>="uname"</span><span> id</span><span>="uname"</span><span> value</span><span>=""</span><span> placeholder</span><span>="输入用户名"</span><span>  autocomplete</span><span>="off"</span> <span>/></span>
<span>4</span>     <span><!--</span><span>提示文字</span><span>--></span>
<span>5</span>     <span><</span><span>span </span><span>id</span><span>="unamechk"</span><span>></</span><span>span</span><span>></span>
<span>6</span> <span></</span><span>div</span><span>></span>

<span> 1</span> $(<span>function</span><span>(){
</span><span> 2</span>     
<span> 3</span>     <span>//</span><span>说明文字</span>
<span> 4</span>     <span>function</span><span> notice(showMsg,noticeMsg){            
</span><span> 5</span>         showMsg.html(noticeMsg).attr("class","notice"<span>);
</span><span> 6</span> <span>    }
</span><span> 7</span>     <span>//</span><span>显示错误信息</span>
<span> 8</span>     <span>function</span><span> error(showMsg,errorMsg){    
</span><span> 9</span>         showMsg.html(errorMsg).attr("class","error"<span>);
</span><span>10</span> <span>    }    
</span><span>11</span>     <span>//</span><span>显示正确信息</span>
<span>12</span>     <span>function</span><span> success(showMsg,successMsg){    
</span><span>13</span> <span>        showMsg.html(successMsg)                
</span><span>14</span>                        .css("height","20px"<span>)
</span><span>15</span>                        .attr("class","success"<span>);
</span><span>16</span> <span>    }
</span><span>17</span> 
<span>18</span>     <span>//</span><span>计算字符长度</span>
<span>19</span>     <span>function</span><span> countLen(value){
</span><span>20</span>     
<span>21</span>         <span>var</span> len = 0<span>; 
</span><span>22</span>         <span>for</span> (<span>var</span> i = 0; i < value.length; i++<span>) { 
</span><span>23</span>             <span>if</span> (value[i].match(/[^\x00-\xff]/ig) != <span>null</span><span>) 
</span><span>24</span>             len += 2<span>; 
</span><span>25</span>             <span>else</span> 
<span>26</span>             len += 1<span>; 
</span><span>27</span> <span>        } 
</span><span>28</span>         <span>return</span><span> len;
</span><span>29</span>     <span>}                     
</span><span>30</span> 
<span>31</span>     <span>//</span><span>......</span>
<span>32</span> )};

<span> 1</span> <span>//</span><span>检测用户名长度</span>
<span> 2</span> <span>function</span><span> unameLen(value){
</span><span> 3</span>     
<span> 4</span>         <span>var</span> showMsg = $("#unamechk"<span>);
</span><span> 5</span> 
<span> 6</span>         <span>/*</span><span> (strlen($str)+mb_strlen($str))/2 可得出限制字符长度的上限,
</span><span> 7</span> <span>        *  例如:$str为7个汉字:"博客园记录生活",利用上面的语句可得出14,
</span><span> 8</span> <span>        *  同样,14个英文,利用上面的语句同样能得出字符长度为14
</span><span> 9</span>         <span>*/</span>
<span>10</span>         <span>if</span>(countLen(value) > 14<span>){
</span><span>11</span>                         
<span>12</span>             <span>var</span> errorMsg = '用户名长度不能超过14个英文或7个汉字'<span>;
</span><span>13</span> <span>            error(showMsg,errorMsg);        
</span><span>14</span>         }<span>else</span> <span>if</span>(countLen(value) == 0<span>){
</span><span>15</span>         
<span>16</span>             <span>var</span> noticeMsg = '用户名不能为空'<span>;
</span><span>17</span> <span>            notice(showMsg,noticeMsg);
</span><span>18</span>         }<span>else</span><span>{
</span><span>19</span> 
<span>20</span>             <span>var</span> successMsg = '长度符合要求'<span>;
</span><span>21</span> <span>            success(showMsg,successMsg);
</span><span>22</span> <span>        }
</span><span>23</span> 
<span>24</span>         <span>return</span><span> countLen(value);
</span><span>25</span> <span>    }
</span><span>26</span> 
<span>27</span>     <span>//</span><span>用户名</span>
<span>28</span>     unameLen($("#uname"<span>).val());
</span><span>29</span>     
<span>30</span>     $("#uname").focus(<span>function</span><span>(){
</span><span>31</span>     
<span>32</span>                     <span>var</span> noticeMsg = '中英文均可，最长为14个英文或7个汉字'<span>;
</span><span>33</span>                     notice($("#unamechk"<span>),noticeMsg);
</span><span>34</span> <span>                })
</span><span>35</span>                .click(<span>function</span><span>(){
</span><span>36</span>                     
<span>37</span>                     <span>var</span> noticeMsg = '中英文均可，最长为14个英文或7个汉字'<span>;
</span><span>38</span>                     notice($("#unamechk"<span>),noticeMsg);
</span><span>39</span> <span>                })
</span><span>40</span>                .keyup(<span>function</span><span>(){
</span><span>41</span>     
<span>42</span>                     unameLen(<span>this</span><span>.value);
</span><span>43</span>                 }).keydown(<span>function</span><span>(){
</span><span>44</span>                 
<span>45</span>                     <span>//</span><span>把焦点移至邮箱栏目</span>
<span>46</span>                     <span>if</span>(event.keyCode == 13<span>){
</span><span>47</span>                         
<span>48</span>                         $("#uemail"<span>).focus();
</span><span>49</span> <span>                    }
</span><span>50</span> <span>                })
</span><span>51</span>                 .blur(<span>function</span><span>(){
</span><span>52</span>                 
<span>53</span>                     <span>if</span>($("#uname").val()!="" && unameLen(<span>this</span>.value)<=14 && unameLen(<span>this</span>.value)>0<span>){
</span><span>54</span>                         <span>//</span><span>检测中</span>
<span>55</span>                         $("#unamechk").html("检测中...").attr("class","loading"<span>);
</span><span>56</span>                         <span>//</span><span>ajax查询用户名是否被注册</span>
<span>57</span>                         $.post("./../chkname.php"<span>,{
</span><span>58</span>                         
<span>59</span>                             <span>//</span><span>要传递的数据</span>
<span>60</span>                             uname : $("#uname"<span>).val()
</span><span>61</span>                         },<span>function</span><span>(data,textStatus){
</span><span>62</span>                             
<span>63</span>                             <span>if</span>(data == 0<span>){
</span><span>64</span>                             
<span>65</span>                                 <span>var</span> successMsg = '恭喜，该用户名可以注册'<span>;
</span><span>66</span>                                 $("#unamechk").html(successMsg).attr("class","success"<span>);
</span><span>67</span> 
<span>68</span>                                 <span>//</span><span>设置参数</span>
<span>69</span>                                 nameval = <span>true</span><span>;
</span><span>70</span>                             }<span>else</span> <span>if</span>(data == 1<span>){
</span><span>71</span>                             
<span>72</span>                                 <span>var</span> errorMsg = '该用户名已被注册'<span>;
</span><span>73</span>                                 error($("#unamechk"<span>),errorMsg);
</span><span>74</span>                             }<span>else</span><span>{
</span><span>75</span>                             
<span>76</span>                                 <span>var</span> errorMsg = '查询出错,请联系网站管理员'<span>;
</span><span>77</span>                                 error($("#unamechk"<span>),errorMsg);
</span><span>78</span> <span>                            }
</span><span>79</span> <span>                        });
</span><span>80</span>                     }<span>else</span> <span>if</span>(unameLen(<span>this</span>.value)>14<span>){
</span><span>81</span>                     
<span>82</span>                         <span>var</span> errorMsg = '用户名长度不能超过14个英文或7个汉字'<span>;
</span><span>83</span>                         error($("#unamechk"<span>),errorMsg);
</span><span>84</span>                     }<span>else</span><span>{
</span><span>85</span>                     
<span>86</span>                         <span>var</span> errorMsg = '用户名不能为空'<span>;
</span><span>87</span>                         error($("#unamechk"<span>),errorMsg);
</span><span>88</span> <span>                    }
</span><span>89</span> <span>});
</span><span>90</span> 
<span>91</span> <span>//</span><span>加载后即获得焦点</span>
<span>92</span> $("#uname").focus();

checkname.phpCode:

<span> 1</span> <?<span>php
</span><span> 2</span> 
<span> 3</span>     <span>header</span>("charset=utf-8"<span>);
</span><span> 4</span> 
<span> 5</span>     <span>require_once</span>("conn/conn.php"<span>);
</span><span> 6</span> 
<span> 7</span>     <span>if</span>(<span>isset</span>(<span>$_POST</span>['uname']) && <span>$_POST</span>['uname']!=""<span>){
</span><span> 8</span>     
<span> 9</span>         <span>$uname</span> = <span>trim</span>(<span>addslashes</span>(<span>$_POST</span>['uname'<span>]));
</span><span>10</span> <span>    }
</span><span>11</span> 
<span>12</span>     <span>$sql</span> = "select uname from user where uname='".<span>$uname</span>."'"<span>;
</span><span>13</span>     
<span>14</span>     <span>if</span>(<span>$conne</span>->getRowsNum(<span>$sql</span>) == 1<span>){
</span><span>15</span>     
<span>16</span>         <span>$state</span> = 1<span>;
</span><span>17</span>     }<span>else</span> <span>if</span>(<span>$conne</span>->getRowsNum(<span>$sql</span>) == 0<span>){
</span><span>18</span>     
<span>19</span>         <span>$state</span> = 0<span>;
</span><span>20</span>     }<span>else</span><span>{
</span><span>21</span> 
<span>22</span>         <span>echo</span> <span>$conne</span>-><span>msg_error();
</span><span>23</span> <span>    }
</span><span>24</span> 
<span>25</span>     <span>echo</span> <span>$state</span>;

Prompt text (under Chrome)

①When initially gaining focus, gaining focus again or clicking

②Detect the length in real time when inputting

③When deleting to empty space without losing focus, use a blue icon to indicate that it cannot be empty - the user will not look obtrusive when typing

④Lost focus and not empty, detect whether it is registered (very short, fleeting)

⑤Empty when losing focus, can be registered, or has been registered

用户名分析至此完毕。

邮箱栏目：

流程

①当栏目获得焦点或者点击时不论栏目为空、填写正确或者填写错误时都出现说明文字；

②用户输入时出现下拉菜单显示多种邮件后缀供用户选择；

③失去焦点时首先判断邮箱格式是否正确，如果正确则检测邮箱是否被注册；

④在使用回车选择下拉菜单时，将自动填充邮箱栏目；没有出现下拉菜单时，将焦点移至密码栏目

如图：

<span>1</span> <span><!--</span><span> email </span><span>--></span>            
<span>2</span> <span><</span><span>div </span><span>class</span><span>="ipt"</span><span>></span>
<span>3</span>     <span><</span><span>input </span><span>type</span><span>="text"</span><span> name</span><span>="uemail"</span><span> id</span><span>="uemail"</span><span> value</span><span>=""</span><span> placeholder</span><span>="常用邮箱地址"</span> <span>/></span>
<span>4</span>     <span><</span><span>span </span><span>id</span><span>="uemailchk"</span><span>></</span><span>span</span><span>></span>
<span>5</span>     <span><</span><span>ul </span><span>class</span><span>="autoul"</span><span>></</span><span>ul</span><span>></span>
<span>6</span> <span></</span><span>div</span><span>></span>

下拉功能emailup.js同之前的博文《jQuery实现下拉提示且自动填充的邮箱》，略有修改，注意用回车( keydown和keyup事件 )在不同情况下触发的不同动作：

PHP+jQuery registration module development, phpjquery module development_PHP tutorial

1 $(function(){ 2 3 //Initialize email list 4 var mail = new Array("sina.com","126.com","163.com","gmail.com"," qq.com","hotmail.com","sohu.com","139.com","189.cn","sina.cn"); 5 6 //Add the email list to the drop-down 7 for(var i=0;i937f0378bfff34f8ee061d952c127aa90b945bd0f8ae7df2d82da4230246988254bdf357c58b8a65c66d7c19c8e4d11463c3d85c63006e30a6c43d7a6521f464@54bdf357c58b8a65c66d7c19c8e4d1140c77c36bf3990dd98f4a954c62c58f05"+mail[i]+"54bdf357c58b8a65c66d7c19c8e4d114bed06894275b65c1ab86501b08a632eb"); 10 11 $liElement.appendTo("ul.autoul"); 12 } 13 14 //The drop-down menu is initially hidden 15 $(".autoul").hide(); 16 17 //Enter characters in the email input box 18 $("#uemail").keyup(function(){ 19 20 if(event.keyCode!=38 && event.keyCode!=40 && event.keyCode!=13){ 21 22 //Menu display needs to exclude spaces and "@" at the beginning 23 if( $.trim($(this).val())!="" && $.trim(this .value).match(/^@/)==null ) { 24 25 $(".autoul").show(); 26 //Modify 27 $(".autoul li").show(); 28 29 //Also remove the original highlighting and highlight the first tip 30 if($(".autoul li.lihover").hasClass("lihover")) { 31 $(".autoul li.lihover").removeClass("lihover"); 32 } 33 $(".autoul li:visible:eq(0)").addClass("lihover"); 34 }else{//If it is empty or starts with "@" 35 $(".autoul").hide(); 36 $(".autoul li:eq(0)").removeClass("lihover"); 37 } 38 39 // Fill the input characters into the prompt. There are two situations: 1. Before "@" appears, fill in the characters before "@"; 2. .When "@" appears for the first time and there are characters after "@", will not be filled. 40 //appear@before 41 if($.trim(this.value).match(/[^@]@/)==null) {//A character without "@" or starting with "@" was entered 42 if($.trim(this.value).match(/^@/)==null) { 43 44 //Does not start with "@" 45 //This should be modified according to the actual html situation 46 $(this).siblings("ul").children("li").children(".ex").text($(this).val()); 47 } 48 }else{ 49 50 //After entering characters, "@" that is not at the first place appears for the first time 51 //When @ appears for the first time, there are two situations: 1. Continue typing; 2. No typing continues 52 //When typing continues 53 var str = this.value;//All characters entered 54 var strs = new Array(); 55 strs = str.split("@");//All characters entered are separated by "@" 56 $(".ex").text(strs[0]);//"@"Content entered before 57 var len = strs[0].length;//The length of the input content before "@" 58 if(this.value.length>len+1){ 59 60 //Intercept the string after @, the length of the string before @ plus the length of @, intercept from the (len+1)th position 61 var strright = str.substr(len+1); 62 63 //Regular mask matching backslash "" 64 if(strright.match(/[\]/)!=null){ 65 strright.replace(/[\]/,""); 66 return false; 67 } 68 69 //Traverse li 70 $("ul.autoul li").each(function(){ 71 72 //Traverse span 73 //$(this) li 74 $(this).children("span.step").each(function(){ 75 76 //Compare the string after @ with the email suffix 77 //Appears when the entered character matches the email suffix in the drop-down box and appears in the first place 78 //$(this) span.step 79 if($("ul.autoul li").children("span.step").text().match(strright)!=null && $(this).text().indexOf(strright)==0){ 80 81 //class showli is an attribute added to the matching email li after comparing the characters after @ in the input box with the email list 82 $(this).parent().addClass("showli"); 83 //If the entered characters completely match the prompt menu, the highlight and showli will be removed, and the prompt will be hidden 84 85 if(strright.length>=$(this).text().length){ 86 87 $(this).parent().removeClass("showli").removeClass("lihover").hide(); 88 } 89 }else{ 90 $(this).parent().removeClass("showli"); 91 } 92 if($(this).parent().hasClass("showli")){ 93 $(this).parent().show(); 94 $(this).parent("li").parent("ul").children("li.showli:eq(0)").addClass ("lihover"); 95 }else{ 96 $(this).parent().hide(); 97 $(this).parent().removeClass("lihover"); 98 } 99 }); 100 }); 101 102 //Modify 103 if(!$(".autoul").children("li").hasClass("showli")){ 104 105 $(".autoul").hide(); 106 } 107 }else{ 108 //When there is no further input after "@" 109 $(".autoul").children().show(); 110 $("ul.autoul li").removeClass("showli"); 111 $("ul.autoul li.lihover").removeClass("lihover"); 112 $("ul.autoul li:eq(0)").addClass("lihover"); 113 } 114 } 115 }//Valid input key event ends 116 117 if(event.keyCode == 8 || event.keyCode == 46){ 118 119 $(this).next().children().removeClass("lihover"); 120 $(this).next().children("li:visible:eq(0)").addClass("lihover"); 121 }//Delete event ends 122 123 if(event.keyCode == 38){ 124 //Always keep the cursor to the right of the text in the input box 125 $(this).val($(this).val()); 126 }//Direction key ↑End 127 128 if(event.keyCode == 13){ 129 130 // During keyup, only actions related to closing the menu and removing the lihover class are performed, and no focus transfer is involved 131 $(".autoul").hide(); 132 $(".autoul").children().hide(); 133 $(".autoul").children().removeClass("lihover"); 134 } 135 }); 136 137 $("#uemail").keydown(function(){ 138 139 if(event.keyCode == 40){ 140 141 //When ↓ is pressed on the keyboard, if there is already a li in the selected state, the state is removed and the style is assigned to the next (visible) li 142 if ($("ul.autoul li").is(".lihover")) { 143 144 //If there is another (visible) li 145 if ($("ul.autoul li.lihover").nextAll().is("li:visible")) { 146 147 if ($("ul.autoul li.lihover").nextAll().hasClass("showli")) { 148 149 $("ul.autoul li.lihover").removeClass("lihover") 150 .nextAll(".showli:eq(0)").addClass("lihover"); 151 } else { 152 153 $("ul.autoul li.lihover").removeClass("lihover").removeClass("showli") 154 .next("li:visible").addClass("lihover"); 155 $("ul.autoul").children().show(); 156 } 157 } else { 158 159 $("ul.autoul li.lihover").removeClass("lihover"); 160 $("ul.autoul li:visible:eq(0)").addClass("lihover"); 161 } 162 } 163 }164 165 if(event.keyCode == 38){ 166 167 //When ↓ is pressed on the keyboard, if there is already a li in the selected state, the state is removed and the style is assigned to the next (visible) li 168 if($("ul.autoul li").is(".lihover")){ 169 170 //If the previous (visible) li still exists 171 if($("ul.autoul li.lihover").prevAll().is("li:visible")){ 172 173 174 if($("ul.autoul li.lihover").prevAll().hasClass("showli")){ 175 176 $("ul.autoul li.lihover").removeClass("lihover") 177 .prevAll(".showli:eq(0)").addClass("lihover"); 178 }else{ 179 180 $("ul.autoul li.lihover").removeClass("lihover").removeClass("showli") 181 .prev("li:visible").addClass("lihover"); 182 $("ul.autoul").children().show(); 183 } 184 }else{ 185 186 $("ul.autoul li.lihover").removeClass("lihover"); 187 $("ul.autoul li:visible:eq("+($("ul.autoul li:visible").length-1)+")").addClass(" lihover"); 188 } 189 }else{ 190 191 //When ↓ is pressed on the keyboard, if no li has been selected before, the first (visible) li is selected 192 $("ul.autoul li:visible:eq("+($("ul.autoul li:visible").length-1)+")").addClass("lihover"); 193 } 194 } 195 196 if(event.keyCode == 13){ 197 198 //Two actions completed during keydown: ① Filling ② Determine whether the drop-down menu exists. If it does not exist, the focus moves to the password column. Note that the closing action of the drop-down menu is placed in the keyup event.即当从下拉菜单中选择邮箱的时候按回车不会触发焦点转移，而选择完毕菜单收起之后再按回车，才会触发焦点转移事件 199 if($("ul.autoul li").is(".lihover")) { 200 201 $("#uemail").val($("ul.autoul li.lihover").children(".ex").text() + "@" + $("ul.autoul li.lihover").children(".step").text()); 202 } 203 204 //把焦点移至密码栏目 205 if($(".autoul").attr("style") == "display: none;"){ 206 207 $("#upwd").focus(); 208 } 209 } 210 }); 211 212 213 //把click事件修改为mousedown,避免click事件时短暂的失去焦点而触发blur事件 214 $(".autoli").mousedown(function(){ 215 216 $("#uemail").val($(this).children(".ex").text()+$(this).children(".at").text()+$(this).children(".step").text()); 217 $(".autoul").hide(); 218 219 //修改 220 $("#uemail").focus(); 221 }).hover(function(){ 222 223 if($("ul.autoul li").hasClass("lihover")){ 224 225 $("ul.autoul li").removeClass("lihover"); 226 } 227 $(this).addClass("lihover"); 228 }); 229 230 $("body").click(function(){ 231 232 $(".autoul").hide(); 233 }); 234 }); View Code

<span>//</span><span>邮箱下拉js单独引用emailup.js</span>
$("#uemail").focus(<span>function</span><span>(){
    
                    </span><span>var</span> noticeMsg = '用来登陆网站，接收到激活邮件才能完成注册'<span>;
                    notice($(</span>"#uemailchk"<span>),noticeMsg);
                })
                .click(</span><span>function</span><span>(){
    
                    </span><span>var</span> noticeMsg = '用来登陆网站，接收到激活邮件才能完成注册'<span>;
                    notice($(</span>"#uemailchk"<span>),noticeMsg);
                })
                .blur(</span><span>function</span><span>(){
                
                    </span><span>if</span>(<span>this</span>.value!="" && <span>this</span>.value.match(/^[\w-]+(\.[\w-]+)*@[\w-]+(\.[\w-]+)+$/)!=<span>null</span><span>){
                    
                        </span><span>//</span><span>检测是否被注册</span>
                        $("#uemailchk").html("检测中...").attr("class","loading"<span>);
                        </span><span>//</span><span>ajax查询用户名是否被注册</span>
                        $.post("./../chkemail.php"<span>,{
                        
                            </span><span>//</span><span>要传递的数据</span>
                            uemail : $("#uemail"<span>).val()
                        },</span><span>function</span><span>(data,textStatus){
                            
                            </span><span>if</span>(data == 0<span>){
                            
                                </span><span>var</span> successMsg = '恭喜，该邮箱可以注册'<span>;
                                $(</span>"#uemailchk").html(successMsg).attr("class","success"<span>);

                                emailval </span>= <span>true</span><span>;
                            }</span><span>else</span> <span>if</span>(data == 1<span>){
                            
                                </span><span>var</span> errorMsg = '该邮箱已被注册'<span>;
                                error($(</span>"#uemailchk"<span>),errorMsg);
                            }</span><span>else</span><span>{
                            
                                </span><span>var</span> errorMsg = '查询出错,请联系网站管理员'<span>;
                                error($(</span>"#uemailchk"<span>),errorMsg);
                            }
                        });
                    }</span><span>else</span> <span>if</span>(<span>this</span>.value == ""<span>){
                    
                        </span><span>var</span> errorMsg = '邮箱不能为空'<span>;
                        error($(</span>"#uemailchk"<span>),errorMsg);
                    }</span><span>else</span><span>{
                    
                        </span><span>var</span> errorMsg = '请填写正确的邮箱地址'<span>;
                        $(</span>"#uemailchk").html(errorMsg).attr("class","error"<span>);
                    }
});</span>

提示文字( Chrome下 )

①获得焦点时、点击时

②输入时

③失去焦点为空、格式错误、已被注册、可以注册时分别为

邮箱功能至此结束。

密码栏目：

要求

①6-16个个字符，区分大小写（参考豆瓣和网易）

②密码不能为同一字符

③实时提示是否符合要求以及判断并显示密码强度，：

　　1.输入时如果为空(删除时)则用蓝色符号提示不能为空，超过长度时用红色符号

　　2.密码满足长度但是为相同字符的组合时：密码太简单，请尝试数字、字母和下划线的组合

　　3.密码强度判断有多种规则，有直接依据长度和组合规则作出判断，也有给每种长度和组合设置分数，通过验证实际密码的情况计算出最后分数来判断强弱。在这个模块中采用比较简单的一种形式，也是网易注册采用的方法：

　　密码满足长度且全部为不同字母、全部为不同数字或全部为不同符号时为弱：弱：试试字母、数字、符号混搭

　　密码满足长度且为数字、字母和符号任意两种组合时为中

　　密码满足长度且为数字、字母和符号三种组合时为强

④输入时大写提示

如图：

<span>1</span> <span><</span><span>div </span><span>class</span><span>="ipt"</span><span>></span>
<span>2</span>     <span><</span><span>input </span><span>type</span><span>="password"</span><span> name</span><span>="upwd"</span><span> id</span><span>="upwd"</span><span> value</span><span>=""</span><span> placeholder</span><span>="设置密码"</span> <span>/></span>
<span>3</span>     <span><</span><span>div </span><span>class</span><span>="upwdpic"</span><span>></span>
<span>4</span>        <span><</span><span>span </span><span>id</span><span>="upwdchk"</span><span>></</span><span>span</span><span>></span>
<span>5</span>        <span><</span><span>img </span><span>id</span><span>="pictie"</span> <span>/></span>
<span>6</span>     <span></</span><span>div</span><span>></span>
<span>7</span> <span></</span><span>div</span><span>></span>

<span>  1</span> <span>function</span><span> noticeEasy(){
</span><span>  2</span>     
<span>  3</span>         <span>//</span><span>密码全部为相同字符或者为123456,用于keyup时的notice</span>
<span>  4</span>         <span>var</span> noticeMsg = '密码太简单，请尝试数字、字母和下划线的组合'<span>;
</span><span>  5</span>         <span>return</span> notice($("#upwdchk"<span>),noticeMsg);
</span><span>  6</span> <span>    }
</span><span>  7</span> 
<span>  8</span>     <span>function</span><span> errorEasy(){
</span><span>  9</span>     
<span> 10</span>         <span>//</span><span>密码全部为相同字符或者为123456,用于blur时的error</span>
<span> 11</span>         <span>var</span> errorMsg = '密码太简单，请尝试数字、字母和下划线的组合'<span>;
</span><span> 12</span>         <span>return</span> error($("#upwdchk"<span>),errorMsg);
</span><span> 13</span> <span>    }
</span><span> 14</span>     
<span> 15</span>     <span>//</span><span>检测密码长度函数</span>
<span> 16</span>     <span>//</span><span>检测密码长度</span>
<span> 17</span>     <span>function</span><span> upwdLen(value,func){
</span><span> 18</span>     
<span> 19</span>         <span>var</span> showMsg = $("#upwdchk"<span>);
</span><span> 20</span> 
<span> 21</span>         <span>if</span>(countLen(value) > 16<span>){
</span><span> 22</span>                         
<span> 23</span>             <span>var</span> errorMsg = '密码不能超过16个字符'<span>;
</span><span> 24</span> <span>            error(showMsg,errorMsg);
</span><span> 25</span>             
<span> 26</span>             $("#pictie"<span>).hide();
</span><span> 27</span>         }<span>else</span> <span>if</span>(countLen(value) < 6<span>){
</span><span> 28</span>         
<span> 29</span>             <span>//</span><span>使用notice更加友好</span>
<span> 30</span>             <span>var</span> noticeMsg = '密码不能少于6个字符'<span>;
</span><span> 31</span> <span>            notice(showMsg,noticeMsg);
</span><span> 32</span> 
<span> 33</span>             $("#pictie"<span>).hide();
</span><span> 34</span>         }<span>else</span> <span>if</span>(countLen(value) == 0<span>){
</span><span> 35</span>         
<span> 36</span>             <span>//</span><span>使用notice更加友好</span>
<span> 37</span>             <span>var</span> noticeMsg = '密码不能为空'<span>;
</span><span> 38</span> <span>            notice(showMsg,noticeMsg);
</span><span> 39</span> 
<span> 40</span>             $("#pictie"<span>).hide();
</span><span> 41</span>         }<span>else</span><span>{
</span><span> 42</span>         
<span> 43</span>             upwdStrong(value,func);<span>//</span><span>如果长度不成问题,则调用检测密码强弱</span>
<span> 44</span> <span>        }
</span><span> 45</span> 
<span> 46</span>         <span>return</span> countLen(value);<span>//</span><span>返回字符长度</span>
<span> 47</span> <span>    }
</span><span> 48</span> 
<span> 49</span>     <span>//</span><span>检测密码强弱</span>
<span> 50</span>     <span>function</span><span> upwdStrong(value,func){
</span><span> 51</span>     
<span> 52</span>         <span>var</span> showMsg = $("#upwdchk"<span>);
</span><span> 53</span> 
<span> 54</span>         <span>if</span>(value.match(/^(.)\1*$/)!=<span>null</span> || value.match(/^123456$/<span>)){
</span><span> 55</span>         
<span> 56</span>             <span>//</span><span>密码全部为相同字符或者为123456，调用函数noticeEasy或errorEasy</span>
<span> 57</span> <span>            func;
</span><span> 58</span>         }<span>else</span> <span>if</span>(value.match(/^[A-Za-z]+$/)!=<span>null</span> || value.match(/^\d+$/)!=<span>null</span> || value.match(/^[^A-Za-z0-9]+$/)!=<span>null</span><span>){
</span><span> 59</span> 
<span> 60</span>             <span>//</span><span>全部为相同类型的字符为弱</span>
<span> 61</span>             <span>var</span> successMsg = '弱：试试字母、数字、符号混搭'<span>;
</span><span> 62</span> <span>            success(showMsg,successMsg);
</span><span> 63</span> 
<span> 64</span>             <span>//</span><span>插入强弱条</span>
<span> 65</span>             $("#pictie").show().attr("src","images/weak.jpg"<span>);
</span><span> 66</span> 
<span> 67</span>             pwdval = <span>true</span><span>;
</span><span> 68</span> 
<span> 69</span>         }<span>else</span> <span>if</span>(value.match(/^[^A-Za-z]+$/)!=<span>null</span> || value.match(/^[^0-9]+$/)!=<span>null</span> || value.match(/^[a-zA-Z0-9]+$/)!=<span>null</span><span>){
</span><span> 70</span>         
<span> 71</span>             <span>//</span><span>任意两种不同类型字符组合为中强( 数字+符号,字母+符号,数字+字母 )</span>
<span> 72</span>             <span>var</span> successMsg = '中强：试试字母、数字、符号混搭'<span>;
</span><span> 73</span> <span>            success(showMsg,successMsg);
</span><span> 74</span> 
<span> 75</span>             $("#pictie").show().attr("src","images/normal.jpg"<span>);
</span><span> 76</span> 
<span> 77</span>             pwdval = <span>true</span><span>;
</span><span> 78</span>         }<span>else</span><span>{
</span><span> 79</span>         
<span> 80</span>             <span>//</span><span>数字、字母和符号混合</span>
<span> 81</span>             <span>var</span> successMsg = '强：请牢记您的密码'<span>;
</span><span> 82</span> <span>            success(showMsg,successMsg);
</span><span> 83</span> 
<span> 84</span>             $("#pictie").show().attr("src","images/strong.jpg"<span>);
</span><span> 85</span> 
<span> 86</span>             pwdval = <span>true</span><span>;
</span><span> 87</span> <span>        }
</span><span> 88</span> <span>    }
</span><span> 89</span>     
<span> 90</span>     $upper = $("<div id=\"upper\">大写锁定已打开</div>"<span>);
</span><span> 91</span>     
<span> 92</span>     $("#upwd").focus(<span>function</span><span>(){
</span><span> 93</span>     
<span> 94</span>                     <span>var</span> noticeMsg = '6到16个字符，区分大小写'<span>;
</span><span> 95</span>                     notice($("#upwdchk"<span>),noticeMsg);
</span><span> 96</span> 
<span> 97</span>                     $("#pictie"<span>).hide();
</span><span> 98</span> <span>            })
</span><span> 99</span>              .click(<span>function</span><span>(){
</span><span>100</span>             
<span>101</span>                     <span>var</span> noticeMsg = '6到16个字符，区分大小写'<span>;
</span><span>102</span>                     notice($("#upwdchk"<span>),noticeMsg);
</span><span>103</span> 
<span>104</span>                     $("#pictie"<span>).hide();
</span><span>105</span>             }).keydown(<span>function</span><span>(){
</span><span>106</span>             
<span>107</span>                     <span>//</span><span>把焦点移至邮箱栏目</span>
<span>108</span>                     <span>if</span>(event.keyCode == 13<span>){
</span><span>109</span>                         
<span>110</span>                         $("#rupwd"<span>).focus();
</span><span>111</span> <span>                    }
</span><span>112</span> <span>            })
</span><span>113</span>              .keyup(<span>function</span><span>(){
</span><span>114</span>              
<span>115</span>                     <span>//</span><span>判断大写是否开启</span>
<span>116</span>                     <span>//</span><span>输入密码的长度</span>
<span>117</span>                     <span>var</span> len = <span>this</span><span>.value.length;                    
</span><span>118</span>                     <span>if</span>(len!=0<span>){
</span><span>119</span> 
<span>120</span>                         <span>//</span><span>当输入的最新以为含有大写字母时说明开启了大写锁定</span>
<span>121</span>                         <span>if</span>(<span>this</span>.value[len-1].match(/[A-Z]/)!=<span>null</span><span>){
</span><span>122</span>                         
<span>123</span>                             <span>//</span><span>给出提示</span>
<span>124</span>                             $upper.insertAfter($(".upwdpic"<span>));
</span><span>125</span>                         }<span>else</span><span>{
</span><span>126</span>                         
<span>127</span>                             <span>//</span><span>移除提示</span>
<span>128</span> <span>                            $upper.remove();
</span><span>129</span> <span>                        }
</span><span>130</span>                     }<span>else</span><span>{
</span><span>131</span>                     
<span>132</span>                         <span>//</span><span>当密码框为空时移除提示</span>
<span>133</span>                         <span>if</span><span>($upper){
</span><span>134</span>                         
<span>135</span> <span>                            $upper.remove();
</span><span>136</span> <span>                        }
</span><span>137</span>                     }<span>//</span><span>判断大写开启结束</span>
<span>138</span>             
<span>139</span>                     <span>//</span><span>判断长度及强弱</span>
<span>140</span>                     upwdLen(<span>this</span><span>.value,noticeEasy());    
</span><span>141</span> <span>             })
</span><span>142</span>              <span>//</span><span>keyup事件结束</span>
<span>143</span>                .blur(<span>function</span><span>(){
</span><span>144</span>                
<span>145</span>                     upwdLen(<span>this</span><span>.value,errorEasy());
</span><span>146</span>                     <span>//</span><span>upwdLen函数中部分提示使用notice是为了keyup事件中不出现红色提示,而blur事件中则需使用error标红</span>
<span>147</span>                     <span>if</span>(<span>this</span>.value == ""<span>){
</span><span>148</span>                     
<span>149</span>                         <span>var</span> errorMsg = '密码不能为空'<span>;
</span><span>150</span>                         error($("#upwdchk"<span>),errorMsg);
</span><span>151</span> 
<span>152</span>                         $("#pictie"<span>).hide();
</span><span>153</span>                     }<span>else</span> <span>if</span>(countLen(<span>this</span>.value)<6<span>){
</span><span>154</span>                     
<span>155</span>                         <span>var</span> errorMsg = '密码不能少于6个字符'<span>;
</span><span>156</span>                         error($("#upwdchk"<span>),errorMsg);
</span><span>157</span> 
<span>158</span>                         $("#pictie"<span>).hide();
</span><span>159</span> <span>                    }
</span><span>160</span> });

大写锁定的思路是：判断输入的字符的最新一位是否是大写字母，如果是大写字母，则提示大写锁定键打开。这种方法并不十分准确，网上有一些插件能判断大写锁定，在这里只是简单地做了一下判断。

提示文字( Chrome下 )

①获得焦点、点击时

②输入时

失去焦点时与此效果相同

③失去焦点为空时

④出现大写时

密码栏目至此结束。

重复密码：失去焦点时判断是否和密码一致

reister.html代码片段:

<span><</span><span>div </span><span>class</span><span>="ipt"</span><span>></span>
    <span><</span><span>input </span><span>type</span><span>="password"</span><span> name</span><span>="rupwd"</span><span> id</span><span>="rupwd"</span><span> value</span><span>=""</span><span> placeholder</span><span>="确认密码"</span> <span>/></span>
    <span><</span><span>span </span><span>id</span><span>="rupwdchk"</span><span>></</span><span>span</span><span>></span>
<span></</span><span>div</span><span>></span>

<span> 1</span> $("#rupwd").focus(<span>function</span><span>(){
</span><span> 2</span>     
<span> 3</span>                     <span>var</span> noticeMsg = '再次输入你设置的密码'<span>;
</span><span> 4</span>                     notice($("#rupwdchk"<span>),noticeMsg);
</span><span> 5</span> <span>            })
</span><span> 6</span>                .click(<span>function</span><span>(){
</span><span> 7</span>             
<span> 8</span>                     <span>var</span> noticeMsg = '再次输入你设置的密码'<span>;
</span><span> 9</span>                     notice($("#rupwdchk"<span>),noticeMsg);
</span><span>10</span>             }).keydown(<span>function</span><span>(){
</span><span>11</span>             
<span>12</span>                     <span>//</span><span>把焦点移至邮箱栏目</span>
<span>13</span>                     <span>if</span>(event.keyCode == 13<span>){
</span><span>14</span>                         
<span>15</span>                         $("#yzm"<span>).focus();
</span><span>16</span> <span>                    }
</span><span>17</span> <span>            })
</span><span>18</span>                 .blur(<span>function</span><span>(){
</span><span>19</span>             
<span>20</span>                     <span>if</span>(<span>this</span>.value == $("#upwd").val() && <span>this</span>.value!=""<span>){
</span><span>21</span>                     
<span>22</span>                         success($("#rupwdchk"),""<span>);
</span><span>23</span> 
<span>24</span>                         rpwdval = <span>true</span><span>;
</span><span>25</span>                     }<span>else</span> <span>if</span>(<span>this</span>.value == ""<span>){
</span><span>26</span>                     
<span>27</span>                         $("#rupwdchk").html(""<span>);
</span><span>28</span>                     }<span>else</span><span>{
</span><span>29</span>                     
<span>30</span>                         <span>var</span> errorMsg = '两次输入的密码不一致'<span>;
</span><span>31</span>                         error($("#rupwdchk"<span>),errorMsg);
</span><span>32</span> <span>                    }
</span><span>33</span> });

提示文字：

①获得焦点、点击时

②失去焦点时和密码不一致、一致时分别为

至此重复密码结束。

验证码：不区分大小写

验证码采用4位，可以包含的字符为数字1-9，字母a-f

点击验证码和刷新按钮都能刷新验证码

<span>1</span> <span><</span><span>div </span><span>class</span><span>="ipt iptend"</span><span>></span>
<span>2</span>     <span><</span><span>input </span><span>type</span><span>='text' </span><span>id</span><span>='yzm' </span><span>name</span><span>='yzm' </span><span>placeholder</span><span>="验证码"</span><span>></span>
<span>3</span>     <span><</span><span>img </span><span>id</span><span>='yzmpic' </span><span>src</span><span>='' </span><span>style</span><span>="cursor:pointer"</span><span>><span> <!-- 验证码图片 --></span></span>
<span>4</span>     <span><</span><span>a </span><span>style</span><span>="cursor:pointer"</span><span> id</span><span>='changea'</span><span>></span>
<span>5</span>         <span><</span><span>img </span><span>id</span><span>="refpic"</span><span> src</span><span>="images/ref.jpg"</span><span> alt</span><span>="验证码"</span><span>> <span><!-- 验证码刷新按钮图片 --></span></span>
<span>6</span>     <span></</span><span>a</span><span>></span>
<span>7</span>     <span><</span><span>span </span><span>id</span><span>='yzmchk'</span><span>></</span><span>span</span><span>></span>
<span>8</span>     <span><</span><span>input </span><span>type</span><span>='hidden' </span><span>id</span><span>='yzmHiddenNum' </span><span>name</span><span>='yzmHiddenNum' </span><span>value</span><span>=''</span><span>> <span><!-- 隐藏域，内容是验证码输出的数字，用户输入的字符与其进行对比 --></span></span>
<span>9</span> <span></</span><span>div</span><span>></span>

<span> 1</span> <span>//</span><span>Verification code button</span>
<span> 2</span> $("#refpic").hover(<span>function</span><span>(){
</span><span> 3</span>
<span> 4</span> $(<span>this</span>).attr("src","images/refhover.jpg"<span>);
</span><span> 5</span> },<span>function</span><span>(){
</span><span> 6</span>
<span> 7</span> $(<span>this</span>).attr("src","images/ref.jpg"<span>);
</span><span> 8</span> }).mousedown(<span>function</span><span>(){
</span><span> 9</span>
<span> 10</span> $(<span>this</span>).attr("src","images/refclick.jpg"<span>);
</span><span> 11</span> }).mouseup(<span>function</span><span>(){
</span><span> 12</span>
<span> 13</span> $(<span>this</span>).attr("src","images/ref.jpg"<span>);
</span><span> 14</span> <span> });
</span><span> 15</span>
<span> 16</span> <span>//</span><span>Generate verification code function</span>
<span> 17</span> <span>function</span><span> showval() {
</span><span> 18</span>
<span> 19</span> num = ''<span>;
</span><span> 20</span> <span>for</span> (i = 0; i f40678e1f2558013756ea61fcd3e59c8 9<span>) {
</span><span> 24</span> <span>switch</span><span> (tmp) {
</span><span> 25</span> <span>case</span>(10<span>):
</span><span> 26</span> num += 'a'<span>;
</span><span> 27</span> <span>break</span><span>;
</span><span> 28</span> <span>case</span>(11<span>):
</span><span> 29</span> num += 'b'<span>;
</span><span> 30</span> <span>break</span><span>;
</span><span> 31</span> <span>case</span>(12<span>):
</span><span> 32</span> num += 'c'<span>;
</span><span> 33</span> <span>break</span><span>;
</span><span> 34</span> <span>case</span>(13<span>):
</span><span> 35</span> num += 'd'<span>;
</span><span> 36</span> <span>break</span><span>;
</span><span> 37</span> <span>case</span>(14<span>):
</span><span> 38</span> num += 'e'<span>;
</span><span> 39</span> <span>break</span><span>;
</span><span> 40</span> <span>case</span>(15<span>):
</span><span> 41</span> num += 'f'<span>;
</span><span> 42</span> <span>break</span><span>;
</span><span> 43</span> <span> }
</span><span> 44</span> } <span>else</span><span> {
</span><span> 45</span> num +=<span> tmp;
</span><span> 46</span> <span> }
</span><span> 47</span>
<span> 48</span> $('#yzmpic').attr("src","../valcode.php?num="+<span>num);
</span><span> 49</span> <span> }
</span><span> 50</span> $('#yzmHiddenNum'<span>).val(num);
</span><span> 51</span> <span> }
</span><span> 52</span>
<span> 53</span> <span>//</span><span>Generate verification code and refresh verification code</span>
<span> 54</span> <span> showval();
</span><span> 55</span> $('#yzmpic').click(<span>function</span><span>(){
</span><span> 56</span>
<span> 57</span> <span> showval();
</span><span> 58</span> <span> });
</span><span> 59</span> $('#changea').click(<span>function</span><span>(){
</span><span> 60</span>
<span> 61</span> <span> showval();
</span><span> 62</span> <span> });
</span><span> 63</span>
<span> 64</span> <span>//</span><span>Verification code verification</span>
<span> 65</span> <span>function</span><span> yzmchk(){
</span><span> 66</span>
<span> 67</span> <span>if</span>($("#yzm").val() == ""<span>){
</span><span> 68</span>
<span> 69</span> <span>var</span> errorMsg = 'Verification code cannot be empty'<span>;
</span><span> 70</span> error($("#yzmchk"<span>),errorMsg);
</span><span> 71</span> }<span>else</span> <span>if</span>($("#yzm").val().toLowerCase()!=$("#yzmHiddenNum"<span>).val()){
</span><span> 72</span>
<span> 73</span>

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：PHP+FFMPEG realizes automatic transcoding of videos into H264 standard Mp4 filesNext article：PHP+FFMPEG realizes automatic transcoding of videos into H264 standard Mp4 files

See more

PHP+jQuery registration module development, phpjquery module development_PHP tutorial

PHP+jQuery registration module development, phpjquery module development

Related articles