PHP多人模块开发原理解析（php多人模块开发原理解析）

25-02-26 16

本文将介绍PHP多人模块开发原理解析的详细情况，特别是关于php多人模块开发原理解析的相关信息。我们将通过案例分析、数据研究等多种方式，帮助您更全面地了解这个主题，同时也将涉及一些关于PHP+jQue

本文将介绍PHP多人模块开发原理解析的详细情况，特别是关于php多人模块开发原理解析的相关信息。我们将通过案例分析、数据研究等多种方式，帮助您更全面地了解这个主题，同时也将涉及一些关于PHP+jQuery 注册模块开发，phpjquery模块开发、PHP+jQuery 注册模块开发，phpjquery模块开发_PHP教程、PHP7底层开发原理全面解析：学习PHP内核的架构和演化历程、PHP7底层开发原理剖析：深入理解OPcache的工作原理的知识。

本文目录一览：

PHP多人模块开发原理解析（php多人模块开发原理解析）
PHP+jQuery 注册模块开发，phpjquery模块开发
PHP+jQuery 注册模块开发，phpjquery模块开发_PHP教程
PHP7底层开发原理全面解析：学习PHP内核的架构和演化历程
PHP7底层开发原理剖析：深入理解OPcache的工作原理

PHP多人模块开发原理解析（php多人模块开发原理解析）

作为世界上最“好”的语言，在web里占据着大概80%的份额，中小公司基本都说 lnmp 架构。当一个仓库开发人员大于1，20人的时候，每个人可能开发不同的模块和功能，用代码版本控制工具比如 git 开不同的分支，流程大概是先在本地搭一套完整的环境，开发好部署在测试环境，自测或者测试人员测试好之后部署在预发布环境，预发布基本和线上环境一样，然后给产品验收，验收完成后再发布上线。

由于是并行开发，肯定存在好几个功能同时验收或者测试的情况，这个时候预发环境到底部署谁的代码呢？切换到A的分支，B就不能验收了。所以希望存在一个多人开发环境，每个人的开发流程互不影响。

PHP运行原理

首先我们来分析下 PHP 的运行原理，看看 PHP 的语言特点。当我们从浏览器发起一个请求，我们的web服务器（Nginx、Apache等）监听了80或者443端口，我们来看一个最简单的 Nginx 的 vhost 配置：

server {
 listen    80;
 server_name test.com;
 
 root /data/gateway/html;
 index  index.php;

 location ~ \.php$ {
  fastcgi_pass  127.0.0.1:9001; #unix:/Users/run/php-fcgi.sock;
  fastcgi_index index.php;
  fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
  include    fastcgi_params;
 }
}

Nginx 监听80端口，当匹配到用户访问的域名是test.com后使用对应的 vhost 配置。在服务器里PHP-FPM起一个服务，监听一个端口（比如9001）或者一个unix socket，Nginx通过fastcgi_pass配置，将请求传递给 PHP-FPM 来解析PHP代码，PHP解析器每次从index.php开始解析，一路处理下去、做一系列的逻辑处理、查询数据库或者缓存等操作，返回一个 HTML 或者其他结果给 Nginx，Nginx 再返回给浏览器。流程如下图：

CGI：是 Nginx 与 PHP_FPM 之间数据交换的一种协议。

FastCGI：同 CGI，是一种通信协议，但比 CGI 在效率上做了一些优化。

PHP-CGI：是 PHP 对 Nginx 提供的 CGI 协议的接口程序。

PHP-FPM：是 PHP 对 Nginx 提供的 FastCGI 协议的接口程序，额外还提供了相对智能一些任务管理。

多人开发环境

从 PHP 原理我们可以看到，PHP其实只是一个解释型的脚本语言，每次请求都要从index.php解析一次，那我们是不是可以在服务器根据不同开发者的名字，命名很多个文件夹，在各自文件夹里，clone 好代码仓库，切换到自己的分支。再让 Nginx 处理每个人目录下的index就可以了。比如直接访问http://wulv.test.com/，在 Nginx 获取到 wulv，把 root 设置到 wulv 这个目录，这样就访问到 wulv 这个目录下的代码了。可以让 Nginx 这样设置：

set $who www;
if ($http_who != "") {
  set $who $http_who;
}
root /data/gateway/$who/html;

我们可以让 URL 里携带用户的目录，在 Nginx 截取下来，可以在一下几个地方携带：

host: http://wulv.test.com

path: http://www.test.com/wulv

query: http://www.test.com?http_who=wulv

这样大体上可以实现需求了，但还是有点问题，比如页面里有些链接是写死的，没有使用相对路径，你一点击就又跑 www.test.com 去了，或者有些第三方应用比如 OAuth 等需要校验域名，你和线上域名不一致根本无法登陆。所以需要其他方式来实现，比如：

http request header

我们可以使用Modify Headers这个浏览器插件，修改http request 头信息，设置一个参数 http_who 为 wulv，然后在 Nginx 获取。

拓展

如果有条件的话，其实还可以做一个网关服务器，做一个配置页面，在配置页面里配置一下需要访问的目录，下次访问，网关就直接帮你设置http header，代理到对应服务器。这样连浏览器插件都不需要装了，对运营和产品设计更加友好。

PHP+jQuery 注册模块开发，phpjquery模块开发

<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>

登录后复制

写了一个简单的php+jquery注册模块，需要填写的栏目包括用户名、邮箱、密码、重复密码和验证码，其中每个栏目需要具备的功能和要求如下图：

在做这个模块的时候，很大程度上借鉴了网易注册( http://reg.163.com/reg/reg.jsp?product=urs )的功能和样式。但网易对于每个栏目的判断的做法是：在输入文字时，并不给出任何实时的检测结果，而在这个栏目失去焦点时，才把检测的结果展示出来，这种做法我认为会使用户在输入时视觉上比较统一，看到的是关于该栏目要求的提示，不会出现其他信息的打扰，但同时也不会得到正在输入的字符的检测提示。所以在做这个功能的时候，我把我自认为需要实时提示的一些信息做了相应的加强，比如用户名长度超过限制和密码的长度以及强弱，并且给邮箱的大写锁定做了简单的判断。

注：表单的提交按钮type为button而不是submit，因此所有栏目的回车( keydown )都统一设置为将焦点移至下一个栏目，除了最后一个栏目验证码，在验证码栏目使用回车( keydown )会触发提交事件。

立即学习“PHP免费学习笔记（深入）”；

功能分析

用户名栏目：

流程

①页面加载完即获得焦点，获得焦点时出现初始说明文字；

②鼠标点击用户名输入框，出现初始说明文字；

③输入字符，即时提示是否符合长度要求；

④失去焦点时首先判断是否为空，为空时提示不能为空；非空且长度满足要求时，开始检测用户名是否被注册；

⑤用户名已被注册，给出提示，如果没有注册，则提示可以注册；

⑥再次获得焦点时，不论输入框中是否有输入，或是否输入符合规定，都出现初始说明文字

⑦回车时将焦点移至邮箱栏目

如图：

细节

可以使用任意字符，并且字数限制为：中文长度不超过7个汉字，英文、数字或符号长度不超过14个字母、数字或符号（类似豆瓣注册https://www.douban.com/accounts/register），即不超过14个字符

关于占位符（字符长度），一个汉字的占位符是2，一个英文（数字）的占位符是1，可以用php语句来计算字符的长度

<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;

登录后复制

输出：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，

这点要注意。

同时用户名两端不能含有空格，在检测以及注册时，程序会自动过滤用户名两端的空格。

立即学习“PHP免费学习笔记（深入）”；

<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.php代码：

<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>;

登录后复制

提示文字( Chrome下 )

①初始获得焦点、再次获得焦点或点击时

立即学习“PHP免费学习笔记（深入）”；

②输入时实时检测长度

立即学习“PHP免费学习笔记（深入）”；

③删除至空且未失去焦点时，使用蓝色图标提示不能为空——用户在输入时看起来不突兀

立即学习“PHP免费学习笔记（深入）”；

④失去焦点且不为空，检测是否被注册( 非常短暂，一闪而过 )

⑤失去焦点时为空、可以注册、已被注册时

用户名分析至此完毕。

立即学习“PHP免费学习笔记（深入）”；

邮箱栏目：

流程

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

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

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

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

如图：

<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事件 )在不同情况下触发的不同动作：

1 $(function(){ 2 3 //初始化邮箱列表 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 //把邮箱列表加入下拉 7 for(var i=0;i){ 8 9 var $liElement = $("

@"+mail[i]+"

"); 10 11 $liElement.appendTo("ul.autoul"); 12 } 13 14 //下拉菜单初始隐藏 15 $(".autoul").hide(); 16 17 //在邮箱输入框输入字符 18 $("#uemail").keyup(function(){ 19 20 if(event.keyCode!=38 && event.keyCode!=40 && event.keyCode!=13){ 21 22 //菜单展现，需要排除空格开头和"@"开头 23 if( $.trim($(this).val())!="" && $.trim(this.value).match(/^@/)==null ) { 24 25 $(".autoul").show(); 26 //修改 27 $(".autoul li").show(); 28 29 //同时去掉原先的高亮，把第一条提示高亮 30 if($(".autoul li.lihover").hasClass("lihover")) { 31 $(".autoul li.lihover").removeClass("lihover"); 32 } 33 $(".autoul li:visible:eq(0)").addClass("lihover"); 34 }else{//如果为空或者"@"开头 35 $(".autoul").hide(); 36 $(".autoul li:eq(0)").removeClass("lihover"); 37 } 38 39 //把输入的字符填充进提示，有两种情况：1.出现"@"之前，把"@"之前的字符进行填充；2.出现第一次"@"时以及"@"之后还有字符时，不填充 40 //出现@之前 41 if($.trim(this.value).match(/[^@]@/)==null){//输入了不含"@"的字符或者"@"开头 42 if($.trim(this.value).match(/^@/)==null){ 43 44 //不以"@"开头 45 //这里要根据实际html情况进行修改 46 $(this).siblings("ul").children("li").children(".ex").text($(this).val()); 47 } 48 }else{ 49 50 //输入字符后，第一次出现了不在首位的"@" 51 //当首次出现@之后，有2种情况：1.继续输入；2.没有继续输入 52 //当继续输入时 53 var str = this.value;//输入的所有字符 54 var strs = new Array(); 55 strs = str.split("@");//输入的所有字符以"@"分隔 56 $(".ex").text(strs[0]);//"@"之前输入的内容 57 var len = strs[0].length;//"@"之前输入内容的长度 58 if(this.value.length>len+1){ 59 60 //截取出@之后的字符串,@之前字符串的长度加@的长度,从第(len+1)位开始截取 61 var strright = str.substr(len+1); 62 63 //正则屏蔽匹配反斜杠"\" 64 if(strright.match(/[\\]/)!=null){ 65 strright.replace(/[\\]/,""); 66 return false; 67 } 68 69 //遍历li 70 $("ul.autoul li").each(function(){ 71 72 //遍历span 73 //$(this) li 74 $(this).children("span.step").each(function(){ 75 76 //@之后的字符串与邮件后缀进行比较 77 //当输入的字符和下拉中邮件后缀匹配并且出现在第一位出现 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是输入框@后的字符和邮件列表对比匹配后给匹配的邮件li加上的属性 82 $(this).parent().addClass("showli"); 83 //如果输入的字符和提示菜单完全匹配，则去掉高亮和showli，同时提示隐藏 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 //修改 103 if(!$(".autoul").children("li").hasClass("showli")){ 104 105 $(".autoul").hide(); 106 } 107 }else{ 108 //"@"后没有继续输入时 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 }//有效输入按键事件结束 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 }//删除事件结束 122 123 if(event.keyCode == 38){ 124 //使光标始终在输入框文字右边 125 $(this).val($(this).val()); 126 }//方向键↑结束 127 128 if(event.keyCode == 13){ 129 130 //keyup时只做菜单收起相关的动作和去掉lihover类的动作，不涉及焦点转移 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 //当键盘按下↓时,如果已经有li处于被选中的状态,则去掉状态,并把样式赋给下一条(可见的)li 142 if ($("ul.autoul li").is(".lihover")) { 143 144 //如果还存在下一条(可见的)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 //当键盘按下↓时,如果已经有li处于被选中的状态,则去掉状态,并把样式赋给下一条(可见的)li 168 if($("ul.autoul li").is(".lihover")){ 169 170 //如果还存在上一条(可见的)li的话 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 //当键盘按下↓时,如果之前没有一条li被选中的话,则第一条(可见的)li被选中 192 $("ul.autoul li:visible:eq("+($("ul.autoul li:visible").length-1)+")").addClass("lihover"); 193 } 194 } 195 196 if(event.keyCode == 13){ 197 198 //keydown时完成的两个动作 ①填充 ②判断下拉菜单是否存在，如果不存在则焦点移至密码栏目。注意下拉菜单的收起动作放在keyup事件中。即当从下拉菜单中选择邮箱的时候按回车不会触发焦点转移，而选择完毕菜单收起之后再按回车，才会触发焦点转移事件 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下 )

①获得焦点时、点击时

②输入时

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

邮箱功能至此结束。

立即学习“PHP免费学习笔记（深入）”；

密码栏目：

要求

①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下 )

①获得焦点、点击时

②输入时

失去焦点时与此效果相同

③失去焦点为空时

④出现大写时

密码栏目至此结束。

立即学习“PHP免费学习笔记（深入）”；

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

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> });

登录后复制

提示文字：

①获得焦点、点击时

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

至此重复密码结束。

立即学习“PHP免费学习笔记（深入）”；

验证码：不区分大小写

验证码采用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>验证码按钮</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>生成验证码函数</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 < 4; i++<span>) {
</span><span> 21</span> 
<span> 22</span>                 tmp = Math.ceil(Math.random() * 15);<span>//</span><span>Math.ceil上取整；Math.random取0-1之间的随机数</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>生成验证码以及刷新验证码</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>验证码检验</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 = ''验证码不能为空''<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>                 <span>//</span><span>不区分大小写</span>
<span> 74</span>                 <span>var</span> errorMsg = ''请输入正确的验证码''<span>;
</span><span> 75</span>                 error($("#yzmchk"<span>),errorMsg);
</span><span> 76</span>             }<span>else</span><span>{
</span><span> 77</span>             
<span> 78</span>                 success($("#yzmchk"),""<span>);
</span><span> 79</span> 
<span> 80</span>                 yzmval = <span>true</span><span>;
</span><span> 81</span> <span>            }
</span><span> 82</span> <span>        }
</span><span> 83</span> 
<span> 84</span>         <span>//</span><span>验证码的blur事件</span>
<span> 85</span>         $("#yzm").focus(<span>function</span><span>(){
</span><span> 86</span>         
<span> 87</span>             <span>var</span> noticeMsg = ''不区分大小写''<span>;
</span><span> 88</span>             notice($("#yzmchk"<span>),noticeMsg);
</span><span> 89</span>         }).click(<span>function</span><span>(){
</span><span> 90</span>         
<span> 91</span>             <span>var</span> noticeMsg = ''不区分大小写''<span>;
</span><span> 92</span>             notice($("yzmdchk"<span>),noticeMsg);
</span><span> 93</span>         }).keydown(<span>function</span><span>(){
</span><span> 94</span>             
<span> 95</span>             <span>//</span><span>提交</span>
<span> 96</span>             <span>if</span>(event.keyCode == 13<span>){                
</span><span> 97</span>                 
<span> 98</span>                 <span>//</span><span>先检验后提交</span>
<span> 99</span> <span>                yzmchk();
</span><span>100</span> <span>                formsub();
</span><span>101</span> <span>            }
</span><span>102</span>         }).blur(<span>function</span><span>(){
</span><span>103</span>         
<span>104</span> <span>            yzmchk();
</span><span>105</span> });

登录后复制

valcode.php验证码生成php代码：

<span> 1</span> <span>php 
</span><span> 2</span> 
<span> 3</span>     <span>header</span>("content-type:image/png"<span>);
</span><span> 4</span>     <span>$num</span> = <span>$_GET</span>[''num''<span>];
</span><span> 5</span>     <span>$imagewidth</span> = 150<span>;
</span><span> 6</span>     <span>$imageheight</span> = 54<span>;
</span><span> 7</span>     
<span> 8</span>     <span>//</span><span>创建图像</span>
<span> 9</span>     <span>$numimage</span> = imagecreate(<span>$imagewidth</span>, <span>$imageheight</span><span>);
</span><span>10</span>     
<span>11</span>     <span>//</span><span>为图像分配颜色</span>
<span>12</span>     imagecolorallocate(<span>$num</span>

登录后复制

PHP+jQuery 注册模块开发，phpjquery模块开发_PHP教程

PHP+jQuery 注册模块开发，phpjquery模块开发

<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>

登录后复制

写了一个简单的php+jquery注册模块，需要填写的栏目包括用户名、邮箱、密码、重复密码和验证码，其中每个栏目需要具备的功能和要求如下图：

立即学习“PHP免费学习笔记（深入）”；

功能分析

用户名栏目：

流程

①页面加载完即获得焦点，获得焦点时出现初始说明文字；

②鼠标点击用户名输入框，出现初始说明文字；

③输入字符，即时提示是否符合长度要求；

④失去焦点时首先判断是否为空，为空时提示不能为空；非空且长度满足要求时，开始检测用户名是否被注册；

⑤用户名已被注册，给出提示，如果没有注册，则提示可以注册；

⑥再次获得焦点时，不论输入框中是否有输入，或是否输入符合规定，都出现初始说明文字

⑦回车时将焦点移至邮箱栏目

如图：

细节

关于占位符（字符长度），一个汉字的占位符是2，一个英文（数字）的占位符是1，可以用php语句来计算字符的长度

<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;

登录后复制

输出：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，

这点要注意。

同时用户名两端不能含有空格，在检测以及注册时，程序会自动过滤用户名两端的空格。

立即学习“PHP免费学习笔记（深入）”；

<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.php代码：

<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>;

登录后复制

提示文字( Chrome下 )

①初始获得焦点、再次获得焦点或点击时

立即学习“PHP免费学习笔记（深入）”；

②输入时实时检测长度

立即学习“PHP免费学习笔记（深入）”；

③删除至空且未失去焦点时，使用蓝色图标提示不能为空——用户在输入时看起来不突兀

立即学习“PHP免费学习笔记（深入）”；

④失去焦点且不为空，检测是否被注册( 非常短暂，一闪而过 )

⑤失去焦点时为空、可以注册、已被注册时

用户名分析至此完毕。

立即学习“PHP免费学习笔记（深入）”；

邮箱栏目：

流程

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

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

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

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

如图：

<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事件 )在不同情况下触发的不同动作：

@"+mail[i]+"

<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下 )

①获得焦点时、点击时

②输入时

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

邮箱功能至此结束。

立即学习“PHP免费学习笔记（深入）”；

密码栏目：

要求

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

②密码不能为同一字符

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

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

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

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

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

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

④输入时大写提示

如图：

<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下 )

①获得焦点、点击时

②输入时

失去焦点时与此效果相同

③失去焦点为空时

④出现大写时

密码栏目至此结束。

立即学习“PHP免费学习笔记（深入）”；

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

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> });

登录后复制

提示文字：

①获得焦点、点击时

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

至此重复密码结束。

立即学习“PHP免费学习笔记（深入）”；

验证码：不区分大小写

验证码采用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>验证码按钮</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>生成验证码函数</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上取整；Math.random取0-1之间的随机数</span>
<span> 23</span>                 <span>if</span> (tmp &gt; 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>生成验证码以及刷新验证码</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>验证码检验</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 = ''验证码不能为空''<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>

登录后复制

PHP7底层开发原理全面解析：学习PHP内核的架构和演化历程

php7底层开发原理全面解析：学习php内核的架构和演化历程

PHP7底层开发原理全面解析：学习PHP内核的架构和演化历程

PHP是一门广泛应用于Web开发领域的脚本语言，其便捷灵活的特性使其成为开发者们的常用选择。而PHP7作为PHP语言的最新版本，在性能和用户体验方面有了大幅提升。要了解PHP7的底层开发原理，我们需要从它的架构和演化历程开始。

首先，要理解PHP7的底层开发原理，就要了解PHP内核的架构。PHP内核主要由三个组件组成：Zend引擎、扩展和语言核心。Zend引擎是PHP的核心组件，负责解释和执行PHP代码。它将PHP代码转换成字节码，然后通过解释器执行。扩展是为了增强PHP功能而编写的插件，可以实现例如数据库连接、图像处理等功能。PHP语言核心包括PHP编译器和标准库，用于处理语言级别的功能。

PHP7的底层开发原理与之前的版本有所不同。PHP7采用了新的Zend引擎--Zend Engine 3.0。Zend Engine 3.0相较于之前的版本在性能上有了显著提升，主要是通过优化内存布局和改进字节码执行引擎实现的。此外，它还引入了Just-in-Time（JIT）编译器，可以将字节码即时编译为本地机器码，提高执行速度。

立即学习“PHP免费学习笔记（深入）”；

PHP7的底层开发原理的另一个关键部分是内存管理。PHP通过引用计数器来管理内存，当一个变量的引用计数减少至零时，即没有其他变量引用它时，内存将被释放。然而，引用计数器带来了一些性能问题，因为每次修改变量引用时，都需要更新引用计数器。为了解决这个问题，PHP7引入了新的垃圾收集器--引用计数器+标记清除器。该垃圾收集器可以自动回收未被引用的变量，提高了内存管理的效率。

PHP内核的演化历程也是理解PHP7底层开发原理的重要内容。PHP最初是由Rasmus Lerdorf开发的，用于处理个人网站的日志。随着时间的推移，PHP逐渐成长为一门脚本语言，并在开源社区中获得了广泛的支持。在演化过程中，PHP经历了许多版本更新，不断改进其性能和稳定性。PHP7作为其中的一个重要里程碑，在提升性能和引入新特性方面有了巨大的进步。

总结起来，PHP7底层开发原理的全面解析包括了对PHP内核架构的理解和对其演化历程的回顾。通过研究PHP内核的工作原理和改进，我们可以更好地理解PHP7的性能提升和新特性。深入了解底层开发原理，有助于我们优化PHP应用程序的性能，并能更好地利用PHP的强大功能。希望本文对读者们理解PHP7的底层开发原理有所帮助。

以上就是PHP7底层开发原理全面解析：学习PHP内核的架构和演化历程的详细内容，更多请关注php中文网其它相关文章！

PHP7底层开发原理剖析：深入理解OPcache的工作原理

php7底层开发原理剖析：深入理解opcache的工作原理

PHP7底层开发原理剖析：深入理解OPcache的工作原理

近年来，随着互联网的发展，网页访问量不断增加，对于网站的性能要求也愈发提高。作为一种常用的服务器端编程语言，PHP在应对高负载情况下的性能问题上备受关注。PHP7版本的发布，将性能提升到了一个新的高度，主要得益于其中一个新特性：OPcache。

OPcache是PHP7中引入的一种中间缓存，用于加快PHP脚本的执行速度。它的核心原理是将PHP编译后的字节码缓存到内存中，避免每次请求都需要重新解析和编译PHP脚本，从而大大提高了PHP的执行效率。

一、OPcache的安装和配置
首先，我们需要在PHP7中安装OPcache扩展。通常情况下，OPcache会随着PHP7一起安装，只需要在php.ini中启用即可。在php.ini中找到以下配置项，取消注释并设置为"On"：

立即学习“PHP免费学习笔记（深入）”；

[opcache]
zend_extension=opcache.so
opcache.enable=1

通过以上配置，我们就成功启用了OPcache扩展。但是在正式环境中，我们通常需要根据实际情况来调整OPcache的配置，以达到最佳性能。

二、OPcache的工作原理
当一个PHP脚本第一次被请求时，PHP解析器会将其解析成字节码，并将字节码存储到OPcache的缓存中。如果下次再有相同的请求，PHP解析器就无需再次解析和编译脚本，直接使用缓存中的字节码进行执行，提高了效率。

OPcache的缓存是以文件为单位保存的，每个文件在缓存中都有一个唯一的缓存ID。当一个脚本被修改后，其缓存ID会发生变化，OPcache会自动将其标记为"invalid"，表示需要重新编译。这样，当下一次请求到来时，会先判断缓存ID是否有效，如果无效则重新编译。

三、OPcache的代码示例
下面我们通过一段简单的PHP代码来演示OPcache的工作原理。首先，新建一个名为"opcache_example.php"的文件，内容如下：

<?php
echo "Hello, OPcache!";
?>

登录后复制

接下来，我们编写一个简单的PHP脚本，用于看到OPcache的效果：

<?php
$count = 10000;

$start_time = microtime(true);
for ($i = 0; $i < $count; $i++) {
    include ''opcache_example.php'';
}
$end_time = microtime(true);

$total_time = $end_time - $start_time;
echo "Total time: " . $total_time . "s";
?>

登录后复制

在上面的代码中，我们使用了一个简单的for循环，多次包含"opcache_example.php"文件。我们可以通过统计循环执行的时间来判断OPcache的效果。

在命令行中执行该脚本，可以看到如下的输出结果：

Total time: 0.0023858547210693s

登录后复制

接下来，我们对"opcache_example.php"文件进行修改，将内容改为：

<?php
echo "Hello, OPcache! This is a modified version.";
?>

登录后复制

再次执行上述脚本，可以看到如下的输出结果：

Total time: 0.75803589820862s

登录后复制

通过比较执行时间，我们可以明显看到OPcache的优势。在第一次执行脚本时，PHP解析器将"opcache_example.php"文件的字节码存储到OPcache缓存中。在后续的循环中，直接使用缓存中的字节码进行执行，所以执行时间非常短。而当修改脚本后，缓存ID失效，PHP解析器需要重新编译脚本，所以执行时间明显增加。

通过以上的示例，我们可以更加深入地理解OPcache的工作原理，以及其在提高PHP性能方面的重要作用。

四、总结
本文深入探讨了PHP7中的OPcache扩展的工作原理以及如何安装和配置OPcache。通过一个简单的代码示例，解释了OPcache是如何将PHP脚本的字节码缓存到内存中，并在后续请求中直接使用缓存进行执行。通过合理的配置和使用OPcache，能够大幅提高PHP脚本的执行效率，为高负载的网站提供更好的性能。

然而，作为开发者，我们也需要注意一些潜在的问题，例如在开发过程中对脚本的频繁修改会导致缓存失效，从而影响性能。因此，在开发和生产环境中需要合理地配置和管理OPcache，以获得最佳的性能表现。

综上所述，深入理解OPcache的工作原理，能够帮助开发者更好地使用OPcache来提高PHP代码的性能，为用户提供更好的体验。

以上就是PHP7底层开发原理剖析：深入理解OPcache的工作原理的详细内容，更多请关注php中文网其它相关文章！

关于PHP多人模块开发原理解析和php多人模块开发原理解析的介绍现已完结，谢谢您的耐心阅读，如果想了解更多关于PHP+jQuery 注册模块开发，phpjquery模块开发、PHP+jQuery 注册模块开发，phpjquery模块开发_PHP教程、PHP7底层开发原理全面解析：学习PHP内核的架构和演化历程、PHP7底层开发原理剖析：深入理解OPcache的工作原理的相关知识，请在本站寻找。

本文标签：