北京总部

知道这10个正则表达式 能让你少写100

知道这10个正则表达式 能让你少写100

2016-11-02

       正则表达式,一个十分古老而又强大的文本处理工具,仅仅用一段非常简短的表达式语句,便能够快速实现一个非常复杂的业务逻辑。熟练地掌握正则表达式的话,能够使你的开发效率得到极大的提升。下面整理的是,在前端开发中经常使用到的10个正则表达式。        正则表达式经常被用于字段或任意字符串的校验,如下面这段校验基本日期格式的 JavaScript代码: var reg = /^(d{1,4})(-|/)(d{1,2})2(d{1,2})$/; var r = fieldValue.match(reg); if(r==null){ alert('Date format error!') } 1.校验密码强度 密码的强度必须是包含大小写字母和数字的组合,不能使用特殊字符,长度在8-10之间。        ^(?=.d)(?=.[a-z])(?=.*[A-Z]).{8,10}$   2.校验中文字符串仅能是中文       ^[u4e00-u9fa5]{0,}$   3.由数字、26个英文字母或下划线组成的字符串 ^w+$   4.校验E-Mail 地址 同密码一样,下面是E-mail地址合规性的正则检查语句。     [w!#$%&'+/=?^_`{|}~-]+(?:.[w!#$%&'+/=?^_`{|}~-]+)@(?:[w](?:[w-][w])?.)+w?   5. 校验身份证号码 15位:^[1-9]d{7}((0d)|(1[0-2]))(([0|1|2]d)|3[0-1])d{3}$ 18位:^[1-9]d{5}[1-9]d{3}((0d)|(1[0-2]))(([0|1|2]d)|3[0-1])d{3}([0-9]|X)$   6.校验日期“yyyy-mm-dd“ 格式的日期校验,已考虑平闰年。   ^(?:(?!0000)[0-9]{4}-(?:(?:0[1-9]|1[0-2])-(?:0[1-9]|1[0-9]|2[0-8])|(?:0[13-9]|1[0-2])-(?:29|30)|(?:0[13578]|1[02])-31)|(?:[0-9]{2}(?:0[48]|[2468][048]|[13579][26])| (?:0[48]|[2468][048]|[13579][26])00)-02-29)$ 7.校验金额,金额校验,精确到2位小数。       ^[0-9]+(.[0-9]{2})?$   8.校验手机号 下面是国内 13、15、18开头的手机号正则表达式。(可根据目前国内收集号扩展前两位开头号码)        ^(13[0-9]|14[5|7]|15[0|1|2|3|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])d{8}$ 9.判断IE的版本        IE目前还没被完全取代,很多页面还是需要做版本兼容,下面是IE版本检查的表达式。    ^.MSIE 5-8?(?!.Trident/[5-9].0).*$ 10.校验IP地址 IP4 正则语句:         (?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?).){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?) IP6 正则语句: (([0-9a-fA-F]{1,4}:){7,7}[0-9a-fA-F]{1,4}|([0-9a-fA-F]{1,4}:){1,7}:|([0-9a-fA-F]{1,4}:){1,6}:[0-9a-fA-F]{1,4}|([0-9a-fA-F]{1,4}:){1,5}(:[0-9a-fA-F]{1,4}){1,2}|([0-9a-fA-F]{1,4}:){1,4}(:[0-9a-fA-F]{1,4}){1,3}|([0-9a-fA-F]{1,4}:){1,3}(:[0-9a-fA-F]{1,4}){1,4}|([0-9a-fA-F]{1,4}:){1,2}(:[0-9a-fA-F]{1,4}){1,5}|[0-9a-fA-F]{1,4}:((:[0-9a-fA-F]{1,4}){1,6})|:((:[0-9a-fA-F]{1,4}){1,7}|:)|fe80:(:[0-9a-fA-F]{0,4}){0,4}%[0-9a-zA-Z]{1,}|::(ffff(:0{1,4}){0,1}:){0,1}((25[0-5]|(2[0-4]|1{0,1}[0-9]){0,1}[0-9]).){3,3}(25[0-5]|(2[0-4]|1{0,1}[0-9]){0,1}[0-9])|([0-9a-fA-F]{1,4}:){1,4}:((25[0-5]|(2[0-4]|1{0,1}[0-9]){0,1}[0-9]).){3,3}(25[0-5]|(2[0-4]|1{0,1}[0-9]){0,1}[0-9]))

更多>
配置你的虚拟服务器

配置你的虚拟服务器

2016-10-27

前言 1. 本篇旨在理清,路由器端口映射的过程,简单来讲就是让外网也能访问你的本地资源。 2. 所以涉及到本地服务的搭建自行解决 原理:        通常情况下,路由器都有防火墙功能,互联网用户只能访问到你的路由器WAN口(接ADSL的电话线口或路由宽带外网口),而访问不到内部服务器。要想让互联网用户访问到你建的服务器,就要在路由器上做一个转发设置,也就是端口映射设置,让互联网用户发送的请求到达路由器后,再转发到你建立的服务器或WEB站点。这就是端口映射。由于各个路由器厂商所取功能名称不一样,有的叫虚拟服务器,有的叫NAT设置(BitComet中常见问题)端口映射。

更多>
移动端开发的一些技巧

移动端开发的一些技巧

2016-10-27

一、样式按组件或板块分文件写再合成 ①设置各种变量       采用scss或者less来写css代码有很多好处。这里就不详细说。       我们拿到设计图的第一步,就是要分析各个页面之间有哪些模块、哪些样式、哪些颜色是一样的。一般情况下,为了各个页面的风格统一,各个页面上的主颜色应该都是一致的,而且好些页面都会用到一些相同的组件,例如slider。所以,我们首先可以定义一个常量文件,里面就专门存放颜色、高度、宽度等变量。定义一个公共样式文件,例如写一些各个页面都有可能用到的清楚浮动等样式。       scss比less更好用一点,用scss定义的话,其中有一个方法是%定义法,就是定义了并不会被编译,而是实际上用到的时候才会被编译。例子图: ②按模块细分       按模块等细分之后,代码的可读性能够明显地提高,方便维护,而且引入页面的文件个数也减少了,还可以提高性能呢。不过,这里要注意,子模块的文件名要以“_”开始哦,这样就不会被编译,而是需要引用的时候再编译哦。例子如图: 二、页面适应性布局 适配移动端比较好的布局方式是百分比+rem布局。 百分比的优势在于,同一个百分比的真实尺寸会跟随屏幕大小变化。举个例子,像这种:       红色框那里,假设现在的要求是一行4个板块,适应任何屏幕。那么,用ul,li写html,然后布局的话,如果写定ul的宽度是100%,然后li的宽度是25%,再设置box-sizing:border-box的话。各种屏幕下,这四块都是平分并且不会出现横向滚动条的。不过要注意,这个时候的间距就不要用margin-left和margin-right来撑开,而是用padding来撑开。就是像这样比例明显,板块区分度高的情况适合用百分比来布局。 代码如下: ul{     width:100%;     margin-bottom:10px;} ul li{     width:25%;     box-sizing:border-box;}         rem的话,rem的取值是只。相对于根元素htm的font-size,即只需要设置根元素的font-size,其它元素使用rem单位设置成相应的百分比即可。你再用@media写一下不同尺寸下跟元素html的font-size的值即可。然后神奇的事情就发生了。当你改变尺寸时,字体。图片等,就会自动跟着适应了。用起来真的很爽! 一些常用的适应尺寸如下: @charset "utf-8"; @media only screen and (max-width: 315px){   html {     font-size: 50% !important;   }}@media only screen and (min-width: 316px){   html {     font-size: 62.5% !important;   }}@media only screen and (min-width: 640px){   html {     font-size: 125% !important;   }}@media only screen and (min-width: 750px){   html {     font-size: 150% !important;   }}@media only screen and (min-width: 1242px){   html {     font-size: 187.5% !important;   }}   三、常见的一些效果的做法 ①页面板块可横向滑动 一种就是我们经常见的,一些特卖活动、抢购活动的时候,需要出现横向滚动情况。效果图: 不要以为这种效果会涉及到什么touch事件,要写多复杂的js。其实只用css就可以很简单地实现了。原理就是利用overflow属性。设置其水平方向滚动,垂直方向hidden即可。 当然,还要配合一些其他的代码。 具体css代码如下: ul.pinxiang-list{         padding:10px;         padding-top:0;         padding-bottom:20px;         width:100%;         box-sizing:border-box;         overflow-x:scroll;         overflow-y:hidden;         white-space: nowrap;         float:left;} ul.pinxiang-list li{         position:relative;         display:inline-block;         margin-right:5px;  }   这里最主要的就是要设置ul的宽度是100%,并且向左浮动。li要设置为display:inline-block. 还有一个就是,如果你用谷歌调试的时候,会发现,效果是这样的:        对,就是会出现一个明显的滚动条。但是如果你用真机,也就是用移动设备看的时候,你会发现其实滚动条是不会出现的。所以有时候做移动的东西,还是需要真机测试一下比较靠谱啊。       另外要注意一个问题,由于li被display:inline-block.那么就有了inline的属性,默认。此元素会被显示为内联元素,元素前后没有换行符。并且,该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。什么意思呢,简单来说就是这些li的对齐基线的默认方式是以最后一行的文字对齐的。看图:        由图中可以明显看出,最后一个li由于没有图片撑起来,而它们的默认方式又是以最后一行文字为基准的,所以最后一个li就“掉”了下来。这个时候,我们就需要设置一下vertical-align这个属性的值了。设置为:vertical-align:middle。具体用法,可以看这里。这样设置了的话,就没有问题了。

更多>

推荐阅读

更多

友情链接:

中软卓越java培训地址:北京市海淀区科学院南路2号融科资讯中心C座北楼12层 联系电话:400-666-3775 邮箱账号:etc-marketing@chinasofti.com

©2008-2016 北京中软国际教育科技股份有限公司 京ICP备14058756号-2