


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.
register.html HTML code snippet of username column:
<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>
register.jsJS code of the public part:
<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> )};
register.jsUser name js code:
<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
用户名分析至此完毕。
邮箱栏目:
流程
①当栏目获得焦点或者点击时不论栏目为空、填写正确或者填写错误时都出现说明文字;
②用户输入时出现下拉菜单显示多种邮件后缀供用户选择;
③失去焦点时首先判断邮箱格式是否正确,如果正确则检测邮箱是否被注册 ;
④在使用回车选择下拉菜单时,将自动填充邮箱栏目;没有出现下拉菜单时,将焦点移至密码栏目
如图:
register.html 邮箱栏目HTML代码片段:
<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事件 )在不同情况下触发的不同动作:


register.js邮箱代码片段:
<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.密码强度判断有多种规则,有直接依据长度和组合规则作出判断,也有给每种长度和组合设置分数,通过验证实际密码的情况计算出最后分数来判断强弱。在这个模块中采用比较简单的一种形式,也是网易注册采用的方法:
密码满足长度且全部为不同字母、全部为不同数字或全部为不同符号时为弱:弱:试试字母、数字、符号混搭
密码满足长度且为数字、字母和符号任意两种组合时为中
密码满足长度且为数字、字母和符号三种组合时为强
④输入时大写提示
如图:
register.html 密码栏目HTML代码片段:
<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>
register.js密码代码片段:
<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>
register.js代码片段:
<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
点击验证码和刷新按钮都能刷新验证码
register.html验证码代码部分:
<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>
register.js验证码部分:
<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 ) { <span> 21</span> <span> 22</span> tmp = Math.ceil(Math.random() * 15);<span>//</span><span>Math.ceil is rounded up; Math.random is between 0-1 Random number</span> <span> 23</span> <span>if</span> (tmp > 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>

php把负数转为正整数的方法:1、使用abs()函数将负数转为正数,使用intval()函数对正数取整,转为正整数,语法“intval(abs($number))”;2、利用“~”位运算符将负数取反加一,语法“~$number + 1”。

实现方法:1、使用“sleep(延迟秒数)”语句,可延迟执行函数若干秒;2、使用“time_nanosleep(延迟秒数,延迟纳秒数)”语句,可延迟执行函数若干秒和纳秒;3、使用“time_sleep_until(time()+7)”语句。

php除以100保留两位小数的方法:1、利用“/”运算符进行除法运算,语法“数值 / 100”;2、使用“number_format(除法结果, 2)”或“sprintf("%.2f",除法结果)”语句进行四舍五入的处理值,并保留两位小数。

判断方法:1、使用“strtotime("年-月-日")”语句将给定的年月日转换为时间戳格式;2、用“date("z",时间戳)+1”语句计算指定时间戳是一年的第几天。date()返回的天数是从0开始计算的,因此真实天数需要在此基础上加1。

方法:1、用“str_replace(" ","其他字符",$str)”语句,可将nbsp符替换为其他字符;2、用“preg_replace("/(\s|\ \;||\xc2\xa0)/","其他字符",$str)”语句。

php判断有没有小数点的方法:1、使用“strpos(数字字符串,'.')”语法,如果返回小数点在字符串中第一次出现的位置,则有小数点;2、使用“strrpos(数字字符串,'.')”语句,如果返回小数点在字符串中最后一次出现的位置,则有。

php字符串有下标。在PHP中,下标不仅可以应用于数组和对象,还可应用于字符串,利用字符串的下标和中括号“[]”可以访问指定索引位置的字符,并对该字符进行读写,语法“字符串名[下标值]”;字符串的下标值(索引值)只能是整数类型,起始值为0。

在PHP中,可以利用implode()函数的第一个参数来设置没有分隔符,该函数的第一个参数用于规定数组元素之间放置的内容,默认是空字符串,也可将第一个参数设置为空,语法为“implode(数组)”或者“implode("",数组)”。


Hot AI Tools

Undresser.AI Undress
AI-powered app for creating realistic nude photos

AI Clothes Remover
Online AI tool for removing clothes from photos.

Undress AI Tool
Undress images for free

Clothoff.io
AI clothes remover

AI Hentai Generator
Generate AI Hentai for free.

Hot Article

Hot Tools

Dreamweaver CS6
Visual web development tools

SecLists
SecLists is the ultimate security tester's companion. It is a collection of various types of lists that are frequently used during security assessments, all in one place. SecLists helps make security testing more efficient and productive by conveniently providing all the lists a security tester might need. List types include usernames, passwords, URLs, fuzzing payloads, sensitive data patterns, web shells, and more. The tester can simply pull this repository onto a new test machine and he will have access to every type of list he needs.

MantisBT
Mantis is an easy-to-deploy web-based defect tracking tool designed to aid in product defect tracking. It requires PHP, MySQL and a web server. Check out our demo and hosting services.

mPDF
mPDF is a PHP library that can generate PDF files from UTF-8 encoded HTML. The original author, Ian Back, wrote mPDF to output PDF files "on the fly" from his website and handle different languages. It is slower than original scripts like HTML2FPDF and produces larger files when using Unicode fonts, but supports CSS styles etc. and has a lot of enhancements. Supports almost all languages, including RTL (Arabic and Hebrew) and CJK (Chinese, Japanese and Korean). Supports nested block-level elements (such as P, DIV),

ZendStudio 13.5.1 Mac
Powerful PHP integrated development environment
