关于阻止表单提交

详细讲解了在不同的注册事件方法下,如何去阻止表单的提交,甚至扩散开来说是阻止浏览器的默认行为/动作

起因

今天在公司忙活着一个项目,涉及到表单提交,要求在表单提交之前判断几个input的值是否为空,如果是,则阻止表单提交。

我的做法是给form添加了一个submit事件绑定,然后判断,如果有input的值为空则return false 阻止提交。判断input值是否为空,这一块走的正常,可是在判断有空值的时候,表单还是提交了,很是奇怪。

上网看了看大家的一些做法,也都是return false.为啥到我这边就不管用了?后来仔细看了下别人代码和自己的区别,这才找到了原因。

表单提交前判断的常用做法

一般来说,js要实现提交前的判断,有以下三种常见做法:

  1. 监听form标签的submit事件
  2. 监听input[type=submit]按钮的click事件
  3. 监听input[type=button]或者任何指定作为提交按钮的标签的任意事件,在条件符合之后调用form标签的submit()方法

一下是一个简单的例子:

<!DOCTYPE HTML>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>demo-form</title>
</head>
<body>
<form action="answer.php" id="form1" method="post">
    <input type="text" value="" id="txt">
    <input type="submit" value="提交" id="sbtn">
    <input type="button" value="按钮" id="btn">
</form>
<script type="text/javascript">
    var d = document,
        form1 = d.getElementById('form1'),
        txt = d.getElementById('txt'),
        sbtn = d.getElementById('sbtn'),
        btn = d.getElementById('btn');

        // 检测文本框内容是否为空
        function checkIsNull(){
            if(txt.value === ""){
                return false;
            }else{
                return true;
            }
        }
</script>
</body>
</html>

 

对于第三种方法,实现阻止表单提交最简单,只要条件不符合就不调用form标签的submit()方法即可

        btn.addEventListener('click',function(e){
            if(checkIsNull()){
                form1.submit();
            }else{
                alert('文本框内容不能为空');
            }
        });

 

对于第二种方法和第一种方法,就有比较多的可能性了

直接绑定到标签属性上

如果是使用直接绑定到标签属性上的方法,则第一和第二种方法都可以简单的使用return false;的方法去阻止表单提交。

        form1.onsubmit = function(e){
            if(checkIsNull()){
                return true;
            }else{
                alert('文本框内容不能为空');
                return false;
            }
        };

 

        sbtn.onclick = function(e){
            if(checkIsNull()){
                return true;
            }else{
                alert('文本框内容不能为空');
                return false;
            }
        };

 

这种直接注册到标签属性上的方法,方法内部的return false;就会直接作用到整个事件上,这一点我是在下面这个文章里面看到的,有兴趣的同学可以看看,传送门:由表单中onsubmit=”return false;”想到的

可是这种事件注册有个缺点就是没有办法给同一个标签的同一个事件注册多个回调函数函数,这个在某些情况下还是不行的。然后就是通过addEventListener(IE下面是attachEvent)

通过addEventListener/attachEvent注册事件

通过addEventListener方法注册的事件的回调函数,假设是:

form.addeventListener('submit',function doSubmit(e){
    return false;
},false);

 

其实就类似于:

form.onsubmit = function(e){
    doSubmit();
}

 

所以doSubmit()内部的return false;是没办法影响到整个事件的浏览器默认动作

这个时候,在非IE浏览器下,回调函数函数可以通过传入的event,调用该event对象的preventDefault()方法阻止浏览器的默认动作;如果是在IE浏览器下,则是通过window.event.returnValue = false;方法来阻止浏览器的默认动作。(这段内容参考的网站,传送门:js阻止浏览器的默认行为以及停止事件冒泡(用JQuery实现回车提交,兼容IE、FF浏览器)

所以可行的代码如下:

        function doSubmit(e){
            if(checkIsNull()){
                return true;
            }else{
                alert('文本框内容不能为空');
                //如果提供了事件对象,则这是一个非IE浏览器 
                if(e && e.preventDefault){
                    //阻止默认浏览器动作(W3C)
                    e.preventDefault();
                }else{
                    //IE中阻止函数器默认动作的方式 
                    window.event.returnValue = false;
                }
            }
        }

        // 判断是否支持IE的注册事件方法,如果支持则是IE浏览器,使用attachEvent进行事件注册
        if(sbtn.attachEvent){
            // attachEvent不支持捕捉,所以只有两个参数
            sbtn.attachEvent('click',doSubmit)
        }else{
            sbtn.addEventListener('click',duSubmit,false);
        }

 

form标签的submit事件也是类似的,就不重复写了

总结

return false;是能够阻止表单提交的,不过只能针对直接注册事件到标签属性上面的情况。对于addEventListener/attachEvent注册的事件,则需要通过event.preventDefaule()或window.event.returnValue=false的方式阻止表单的提交。针对其他浏览器默认行为,也大体上类似

要明白自己在干什么

别以为埋头干活就是好的,你得时时刻刻清清楚楚的知道自己在干什么,为什么这样干,这样干是为了什么,怎样才能干的更好

今天给公司的编辑们讲解CSS相关的知识,分两节课,上上周讲过一次,简单的介绍了css的引用,选择器,优先级能相关的概念。而今天这节课就专注于css里面比较核心的盒模型和定位同时介绍一下伪类。

很入神的讲到一半的时候,偶然抬头,没几个人在听,有睡眼朦胧的,有互相打趣说悄悄话的,有45度仰望天空出神的。我看了一眼,让后继续盯着屏幕自说自话。

分界线

为什么我要这样骗人骗己的继续讲下去?

我为了这节课准备了前前后后有5、6个小时,真的就只是为了完成公司交代的任务——讲课?

为什么大家会不愿意听?

讲完课之后,听众们收获了什么,我收获了什么?

没有答案

只是警醒自己,别以为埋头干活就是好的,你得时时刻刻清清楚楚的知道自己在干什么,为什么这样干,这样干是为了什么,怎样才能干的更好

纯CSS的流程条

详细讲解制作纯CSS流程条,进度条的整个过程,分析其实现原理

需求

最近在忙公司的一个移动端充值的前端部分,今天主要是做页面。需要一个指示用户充值流程的流程条(进度条),大致的效果如下:
progress-bar

思路

如果是平时在pc端的开发,那么可能就会将箭头的区域切出五个状态:

  1. 箭头部分灰色,背景灰色
    arrow-2
  2. 箭头部分蓝色,背景灰色
    arrow-1
  3. 箭头部分灰色,背景蓝色
    arrow-4
  4. 箭头部分蓝色,背景透明
    arrow-5
  5. 箭头部分灰色,背景透明
    arrow-3
  •  

    具体的写法就是:

    默认状态 li下面的.arrow-right显式为第一种:箭头灰色,背景灰色

    选中状态(.on) li下面的.arrow-right显示为第二种状态 箭头蓝色,背景灰色,同时用js实现它的previousSibling的.arrow-right显示为第三种状态:箭头灰色,背景蓝色

    最后一个箭头 因为背景色的不同,独立出来 默认状态是第四种 选中状态是第五种

    需要修改的地方

    三角箭头的css方案

    因为是做移动端开发,所以为这么个功能制作五张图片,哪怕是可以通过css sprite合并,可也是很不划算的。然后我就想起以前看到的一个用css实现三角浮动层尖角的文章,找出来翻了翻,箭头的css化问题就解决了。具体的制作方法我就重复写了,大家可以参看下面的链接:

    CSS常用浮动层的写法

    三种纯CSS实现三角形的方法

    使用css相邻兄弟选择器替换js

    之前的思路是通过js来实现基于选中状态下li,修改相邻li的样式,可以实现,但是感觉上很啰嗦,不够优雅。

    这个项目是在移动端使用的,都是高级浏览器。所以很多平时在pc端网页开发时,因为顾及到IE6、7、8的兼容性而不能使用的css选择器,比如子选择器、相邻兄弟选择器都能够放心的使用了。

    在这个项目中使用到的就是相邻兄弟选择器,在选中状态下影响下一个兄弟节点的样式 .on + li{}

    最终的方案

    先上代码

    HTML:

    • 1.选择充值方式
    • 2.第一步
    • 3.第二步
    • 4.第三步

     

    CSS:

    .progress {
      list-style-type: none;
      margin: 0;
      padding: 0;
      overflow: hidden;
    }
    .progress li {
      float: left;
      margin: 0;
      overflow: hidden;
    }
    .progress span {
      display: block;
      float: left;
    }
    .progress .step {
      height: 2.2rem;
      width: 10rem;
      font: bold 1.4rem/2.2rem simsun, arial;
      color: #999;
      text-align: center;
      background: #e3e3e3;
    }
    /* 箭头区域-非箭头部分 背景色 默认灰色 */
    .progress .triangle {
      position: relative;
      height: 2.2rem;
      background: #e3e3e3;
      width: 1.3rem;
      overflow: hidden;
    }
    .progress em,
    .progress i {
      display: block;
      position: absolute;
      top: -2px;
      overflow: hidden;
      width: 0;
      height: 0;
      border-width: 15px;
      border-style: dashed solid dashed dashed;
    }
    /* em 箭头区域-箭头部分 头部边框 白色 */
    .progress em {
      left: 0px;
      border-color: transparent transparent transparent #FFF;
    }
    /* i 箭头区域-箭头部分 背景颜色 默认灰色*/
    .progress i {
      left: -2px;
      border-color: transparent transparent transparent #e3e3e3;
    }
    .progress .first {
      width: 11rem;
      border-radius: 5px 0 0 5px;
    }
    /* 最后一个的背景色透明 */
    .progress .last {
      background: transparent;
    }
    /* 选中状态下 当前节点 左边箭头区域-非箭头部分 颜色蓝色(形成箭尾) */
    .progress .on .triangle-left {
      background: #5fb3dc;
    }
    /* 选中状态下 当前节点 右边箭头区域-箭头部分 颜色蓝色 */
    .progress .on .triangle-right i {
      border-color: transparent transparent transparent #5fb3dc;
    }
    .progress .on .step {
      background: #5fb3dc;
      color: #FFF;
    }
    /* 选中状态下 下一个兄弟节点 左边箭头区域-箭头部分 颜色蓝色 */
    .progress .on + li .triangle-left i {
      border-color: transparent transparent transparent #5fb3dc;
    }

     

    描述

    总共三种li:

    • 左数第一个li 没有箭头区域
    • 右数第一个li 有左边箭头区域和右边箭头区域
    • 上述两个li中间的li 有左边箭头区域

    左数第一个li

    默认状态 文本区域背景色灰色

    如果下一个兄弟节点也是默认状态,则其左边箭头区域-箭头灰色-非箭头灰色first-normal

    如果下一个兄弟节点选中状态,则其左边箭头区域-箭头灰色-非箭头蓝色first-normal-2

    两种状态下,都能保证左数第一个li和其下一个兄弟节点的左边箭头区域的箭头在视觉上成为一体

    选中状态 文本区域蓝色

    下一个兄弟节点只能是默认状态(在流程条中只有一个会是处在选中状态)first-on

    中间li

    默认状态 内容区域灰色 左边箭头区域-非箭头灰色

    middle-normal-3

    middle-normal-4

    middle-normal-2

    注意:这种风格的流程条不存在同时两个选中状态的,但是样式上可以做到
    middle-normal-1

    选中状态 左边箭头区域 非箭头部分蓝色 内容区域蓝色 下一个兄弟节点的左边箭头区域-箭头部分蓝色

    middle-on

    右数第一个li

    默认状态 左边箭头区域-非箭头部分灰色 内容区域灰色 右边箭头区域-箭头部分灰色

    last-normal-2

    last-normal-1

    选中状态 左边箭头区域-非箭头部分蓝色 内容区域蓝色 右边箭头区域-箭头部分蓝色

    last-on

    总结

    总的来说,对于任何一个li,它们的目的是为了形成一个箭的形状,所以必须保证箭尾、箭身和箭头这三者颜色保持一致。在我这个HTML结构里箭尾就是li自身内部的左侧箭头区域-非箭头部分,箭身就是内容区域,箭头就是下一个兄弟节点的左侧箭头区域的箭头部分或者自身右侧箭头区域的箭头部分,只要能保证三者颜色颜色保持一致,那么一个标准的流程条就出来了。:)

    换了空间

    关于从一个空间服务商转到另一个空间服务商之间要做的事,要注意的内容和一个遇到的问题及解决方式

    为什么要换空间

    之前使用的空间是刚刚打算建立博客,对相关的事务都不熟悉,谨慎起见,就找了个免费空间,打算试试看看,就算不行也没的损失。可事实证明,很多时候,免费其实比收费还要亏的。

    免费的空间使用期限是一个月,要到处给空间服务商打广告才可能延期,这我是没有时间的,所以打算在一个月快要到期的时候升级到收费空间。傻傻的充了30块钱,可是到处都找不到升级空间的入口,发邮件给空间服务商提供的邮箱,也是石沉大海——没的半点回音。

    无奈之下,为了防止到期之后空间删除会连着自己的网站也没了,只好另找一家。

    空间的选择

    托对网站建设比较了解的同事推荐一下,自己也顺便找找看。

    同事推荐了一个,挺便宜的,空间大小,数据库大小也比自己找的好。可是一看是Windows的,服务器是IIS,就有点不情愿了。因为之前那个免费的空间也是用的IIS,弄的我没法自定义个性化的文章链接,每个链接都是要包含个index.php,看着不舒服,对seo也不好。

    找到最后又找回当初申请域名的西部数码,申请了个港台虚拟主机,最便宜的那种198元/年,100M空间和50M MySQL数据库,想想自己的博客才刚刚开通,这样的配置到也过的去,而且这次学聪明了,专门向客服打听了能不能升级。客服的回应是只要补足当月的差价就行,所以心里也是更加放心了。

    选用的是Linux系统和Apache2.2的,这种虚拟主机可以自定义的配置很少,系统的选择上关系不是很大,不过对于Linux总是有种亲切感。支持.htaccess,可以自定义URL。

    空间的迁移

    文件内容的迁移

    西部这边提供了一个“网站搬家”的功能,就是提供ftp的ip,用户名和密码,他就主动的去把对应目录里面的内容下载到空间里。这样比自己手动下载然后上传要方便不少。

    数据库的迁移

    在迁移之前已经把wordpress相关的数据导出成sql文件了,再次导入也很简单,可以使用西部这边提供的工具,也可以进入phpmyadmin手动的导入。导入之后,因为数据库名,用户名和密码和原先的网站有所不同,这个时候只要打开根目录下面的wp-config.php修改相应的配置就可以了。

    域名的迁移

    因为是自己第一次迁移,也不知道自己的方法对不对。我的做法是先在域名管理商这边把原先域名指向的IP删除,然后连上西部给定的二级域名(西部这边不是提供的ip地址而是一个二级域名,不过都能正常访问,只是不知道这样的处理对网站的seo优化有没有影响,如果有的话,到时候就需要花上100去弄个独立ip了。

    迁移完成后

    迁移完成之后,访问网站,可是却总是提示的首页循环重定向,不明白出这样的原因是什么,最后在http://www.xiangguoqi.com/read/247.html这个网站找到了几种解决方案,试了下第一个方法:
    修改wp-include/template-loader.php

        /**
         * Loads the correct template based on the visitor’s url
         * @package WordPress
         */
        if(defined(‘WP_USE_THEMES’)&& WP_USE_THEMES )
        do_action(‘template_redirect’);
    

    我们只要将后面的一段代码去掉或者注释掉就可以了

        /* 解决首页重定向问题,可能影响到日后升级
        if(defined(‘WP_USE_THEMES’)&& WP_USE_THEMES )
         do_action(‘template_redirect’);
        */
    

    保存之后再次访问网站,正常。

    至此,整个网站迁移完毕。而且相比于之前的美国主机,港台主机在网站访问速度上面有着较明显的提升

    服务器没有在要求的超时时间内向 DCOM 注册

    服务器没有在要求的超时时间内向 DCOM 注册,可能的问题时network service没有足够的启动和激活权限

    今天查看系统日志发现有如下两个问题:

    1. 服务器 {F9717507-6651-4EDB-BFF7-AE615179BCCF} 没有在要求的超时时间内向 DCOM 注册。
    2.  Provider 
    3.  
    4.    [ Name]  Microsoft-Windows-DistributedCOM 
    5.    [ Guid]  {1B562E86-B7AA-4131-BADC-B6F3A001407E} 
    6.    [ EventSourceName]  DCOM 
    7.  
    8.   - EventID 10010 
    9.  
    10.    [ Qualifiers]  0 
    11.  
    12.    Version 0 
    13.  
    14.    Level 2 
    服务器 {EA022610-0748-4C24-B229-6C507EBDFDBB} 没有在要求的超时时间内向 DCOM 注册。
    Provider 
    
       [ Name]  Microsoft-Windows-DistributedCOM 
       [ Guid]  {1B562E86-B7AA-4131-BADC-B6F3A001407E} 
       [ EventSourceName]  DCOM 
     
      - EventID 10010 
    
       [ Qualifiers]  0 
     
       Version 0 
     
       Level 2 
    

    在网上找到有个人跟我系统差不多同时也是遇到同样问题的,链接如下:
    http://answers.microsoft.com/en-us/windows/forum/windows_7-performance/error-microsoft-windows-distributedcom-id10010/481acdc3-3402-40ac-af9a-330908fd5754

    具体的方式是通过给 Network Service 角色添加相应的权限,步骤如下:
    A. 在“运行”里面输入命令dcomcnfg
    B. 双击“组件服务”->双击“计算机”
    C. 右键点击“我的电脑”,选择“属性”
    D. 点击“COM安全”菜单项
    E. 在“启动和激活权限”的区域内,点击“编辑默认值”
    F. 点击“添加” ,在“输入对象名称来选择”下方区域内输入“Network Service” ,可点击右侧的“检查名称”来规范正确的输入,之后点击“确定”
    G. 确保选中了“NETWORK SERVICE”,点击下方的复选框,保证如下权限的“允许”是选中的:
    H. 本地启动
    I. 远程启动
    J. 本地激活
    K. 远程激活
    L. “确定”->“确定”

    下面的链接是微软官方对Event ID 10010的说明
    http://technet.microsoft.com/en-us/library/cc774175(WS.10).aspx

    机器就按上述的设置了,具体的效果等随后一段时间看看是否还会有上述问题发生,来确定设置是否有效

    第一次申请Google AdSense失败

    简单介绍了一下从打算在网站投放广告到选择广告联盟以及最后没能通过Google AdSense终审的经过

    ## 了解和筛选

    早就听说过广告联盟,最近又建立了博客,就想着能在自己的网站上面也引入广告,在意淫了一下以后广告点击量飙升之后,开始了解了下广告联盟的相关信息。百度百科里面的“广告联盟”词条,解释的很清楚,我也就不献丑了。

    仔细看了下,我的主机是国外的,没有备案,国内的很多广告联盟如`搜狗联盟`、`discuz联盟`、`网易联盟`就没法进;`阿里妈妈`的那种淘宝味感觉跟我网站的风格不太搭配;`百度联盟`对于没备案的很难通过;剩下的`骆驼网站联盟`、`凡客联盟`、`脉动联盟`和`888广告联盟`实在没接触过,不太想冒险。所以最后`谷歌联盟`算是最好的选择了,虽然很难申请到,可一旦申请到,那绝对是很有好处的

    ## 了解Google AdSense的相关信息

    同样还是很给力的百度百科的词条“Google AdSense”,里面很详细的介绍了Google AdSense的情况,申请的条件,优化广告块的意见,Google提供的各项服务,要遵守的规则。

    其中让我比就担心的就是申请条件里面的域名注册满6个月,可是我这域名注册才一个星期没到….有点成功希望渺茫的感觉,不过还是试试看,没准人品就爆发了一会。

    ## 开始申请

    申请的网址是https://www.google.com/adsense/home, 如果你已经登录了Google账号,别简单的以为输入密码就能登录的,得需要同意Google的一个协议才行。正规的进入这个同意协议的页面的路径我不知道了,但是可以通过点密码框下面的“why I can’t acccess”链接,进入后右上角有个Create a Adsense Account的按钮,点击之。进入后可以选择使用Google账号或者新建一个账号用来进入Google AdSense

    后面的一些填写资料的过程就不详述了,但是是熬夜干这些的,具体的流程也记不清楚了。

    填写资料完毕之后,Google会提示你网站正在审核,大概一个星期之内用邮件通知你审核的结果。我的运气很好,第二天早上就收到了审核通过的邮件.而且我还发现我的博客第一篇文章被一个叫做“1”(不包括引号)的人评论过了,也许Google是通过这个方式来判断网站是否具有交互性的吧。
    Google AdSense 初审通过 邮件
    ## 初审通过之后

    初审通过之后,后面就是开始在网站放置测试的广告代码了。很高兴的是初审通过的邮件是用中文写的,所以可以很清楚的跟着上面提示的步骤流程走。

    因为只是放置一个测试用的广告代码,所以广告样式的设定,要应用的广告渠道的设定,这些都可以不用关注。拿到代码之后,这个时候就是放置了。

    打算放置广告的位置是博客的右边栏。我的博客是用的wordpress,这个里面的模版设定也还算简单,在外观->编辑 里面试过几次之后就很明确的知道对应右边栏的模版–sidebar.php。Google的广告代码是两块JavaScript代码,会在执行之后在这两块JavaScript代码之后插入广告块。

    打开一篇博客的文章,用chrome的控制台初略的看看右边栏的页面结构,所有侧边栏的模块都是在div#secondary里面

            
                    
            
    

    而其他的模块都是通过一个函数调用的,是一个整体

            
    

    所以广告块只能是在其他所有模块的上面或者下面,当然这只是刚接触wordpress还没能深入的进行个性化的修改的时候。对我这样一个wordpress菜鸟来说,能做到这样的地步已经很得瑟了

    ## 最终审核失败了

    放置完广告代码之后,一切就只能听天由命了。然后很不幸的,一天之后我就收到邮件说我的最终审核没能通过:

    ********************** 以下是邮件内容 **********************

    您好!

    正如我们在欢迎邮件中介绍的那样,我们的审核分为初步审核和最终审核。随着您的网站开始投放广告,我们也会开始进行最终审核。您的帐户由于以下原因没有通过我们的最终审核。

    问题:

    – 内容不足

    更多详情:

    内容不足:要获得加入 AdSense 计划的批准并在您的网站上展示相关的广告,您的页面上必须要有足够多的文字,以便我们的专家进行审核,也让我们的抓取工具能够确定网页的主题。

    要解决此问题,请按以下提示操作:

    – 确保您的网页上有足够多的文字,以图片、视频或 Flash 动画为主的网站是无法获得批准的。
    – 您的内容应包含完整的句子和段落,而不仅仅只是标题。
    – 在您申请加入 AdSense 计划之前,确保您的网站已经完成构建和发布,请勿在网站尚处于测试阶段、建设阶段或者仅包含一个网站模板时申请。
    – 将广告代码放到网站上的有效页面中。这个页面不需要是首页,但也不能是除了 AdSense 广告代码之外空空如也的测试页面,否则将无法获得批准。
    – 请为访问者提供清晰的导航系统,以便他们轻松找到您网站上的所有版块和页面。
    – 如果想要通过 YouTube 视频创收,请申请加入 YouTube 获利计划 (http://support.google.com/youtube/bin/answer.py?&answer=2490020)。请注意,只有视频内容的博客和网站是无法获得批准的。

    在您完成必要的修改后,我们将非常乐意重新审核您的申请。

    ********************** 以上是邮件内容 **********************

    起初担心会因为域名注册时间的问题而没法通过,最后却原来是因为内容不足的原因。不过如果只是这个原因,那解决起来到也方便,多写些文章,相信很快内容就能丰富起来

    ## 后话

    乱七八糟扯了很多,这次申请虽然失败了,可如果没有这次申请,那也不会知道自己的网站需要什么、有什么不足。所以,凡是虽然看着麻烦,可行性低,可总要试试看的。希望下次申请能够通过,哈哈

    搬家了

    搬家了,正式在www.shuizhongyueming.com落地生根了,哈哈哈

    新博客开通

    昨天跟一同事帮人copy了一个国外网站,一人分得75元大洋,然后就把内心那股子搞网站的热情激发了。在西部数码上面注册了现在这个域名www.shuizhongyueming.com, 也还便宜55块钱一年,反正这钱花的不心疼。

    然后就是找空间了,本来打算买个香港主机(虚拟机),然后听人说亚马逊有个E2C能免费一年。可是折腾了一整天,被那个信用卡,虚拟信用卡,VISA,MasterCard,PayPal之流弄的头晕脑胀,准备放弃,老老实实的花钱买个空间。这个时候,偶然翻了邮箱里面的垃圾邮件,有人推荐个什么免费空间,索性死马当活马医,注册申请了个,到最后就成了现在这个域名所在的空间了。

    这个所谓的免费也只是免费一个月,之后可以邀请好友注册,成功一个就延期一个月,可是看了看空间的价格,一年也才30,顿时没了注册账号到论坛贴的心思了。不过在这里也贴上吧,想建个网站玩玩的朋友可以试试

    超级云-国内首家无限容量空间,即时开通
    
    申请地址:http://www.mk8888.com/free.html
    
    (shuizhongyueming26132838)超级云,免费无限容量空间,全国首家
    

    老博客搬家

    以前有段时间在cnblog上面写了几篇文章,乘着今天也一起搬了过来,可是发现移过来之后的样式很有问题,没法子,就自己改了wordpress里面的主题样式style.css,弄成了个“宽屏版”,这样文章里面贴了代码之后就不会产生一个横向的滚动条了。

    感觉这wordpress还有很多东西够折腾的,比如右边侧边栏的自定义什么的,看了下模版,wordpress提供了相关函数的说明,不过很奇怪的是有几个函数竟然没有官方说明,是主题本身也能够提供一些函数的吗?

    JavaScript中文字符进行大小的比较

    JavaScript究竟是通过什么方式比较中文或者说非英文以及数字的字符的大小的,是通过转义成Unicode编码然后比较它们的吗?

    最近在看《JavaScript权威指南(第六版)》,里面有个例子,是说的

    "a" < "b"     // => true

    然后我就想了,那中文字符可以进行这样的比较吗,然后就在Chrome的控制台里面测试了一下

    "大" < "小"     // => true
    "小" < "大"     // => false

    那它们是如何比较的?

    书里面有这样一句话:

    Unicode允许使用多种方法对同一个字符进行编码。比如,字符“é”可以使用Unicode字符u00E9表示,也可以使用普通的ASCII字符e跟随一个语调符u0301。在文本编辑器中,这两种编码的显示结果一模一样,但它们的二进制编码表示是不一样的,在计算机里也不相等。Unicode标准为所有字符定义了一个首选的编码格式,并给出了一个标准化的处理方式将文本转换为一种适合比较的标准格式,JavaScript会认为它正在解析的程序代码已经是这种标准格式,不会再对其标识符、字符串或正则表达式作标准化处理。

    对这句话不是很理解,看的很晕。是说的在JavaScript解析之前,已经有程序把它的所有代码转变成了另一种格式的编码吗,而且还不是二进制的

    后来偶然看到有encodeURICompent()这样个函数,一般是用来处理URI里面的数据,把一些特殊字符和中文等等进行十六进制编码,以便在不同平台上面数据都能很好使用

    然后我就试了下

    encodeURIComponent("大");        // =>%E5%A4%A7
    encodeURIComponent("小");        // =>%E5%B0%8F

    很明显,转化成十六进制之后,”小”的值是大于”大”的

    我想,是不是在JavaScript解析之前,浏览器就根据Unicode标准用类似的方式把代码进行了编码,所以等到JavaScript解析的时候,比较”大”>”小”,实际上是类似于在比较”%E5%A4%A7″>”%E5%B0%8F”

    不知道有人能跟我讲解一下这方面的知识不,感激不尽

    正则表达式对中文的判断

    如何用正则表达式去判断是否中文字符,以及大致的原理

    今天工作上面需要对一个表单进行验证,需要判断中文。在网上看到了很多的方式

    1. GBK (GB2312/GB18030)
    x00-xff  GBK双字节编码范围
    x20-x7f  ASCII
    xa1-xff  中文
    x80-xff  中文

    2. UTF-8 (Unicode)
    u4e00-u9fa5 (中文)
    x3130-x318F (韩文
    xAC00-xD7A3 (韩文)
    u0800-u4e00 (日文)
    ps: 韩文是大于[u9fa5]的字符

     

    x是十六进制,u是Unicode编码,这种理解对吗

    两者之间有什么区别和联系呢

     

    2012年8月15日补充

    JavaScript的字符串是使用Unicode编码的,每个字符占用两个字节。编码的方式是Unicode 16,具体是Little-Endian还是Big-Endian则要看操作系统了。所以在针对JavaScript的字符串使用正则时,针对中文使用u4e00-u9fa5

    参考文章:http://demon.tw/programming/javascript-unicode-utf-8.html

    关于Unicode 16的Little-Endian和Big-Endian,可以参看维基百科:https://zh.wikipedia.org/wiki/%E5%AD%97%E8%8A%82%E5%BA%8F