整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

JS学习之正则

JS学习之正则

.【正则】

就是用来操作(匹配和捕获)的一系列规则;

匹配:校验字符串是否符合我们的规则;返回值——布尔值

匹配这里用的是正则的方法:test(),reg.text( );

捕获:把符合规则的内容拎出来:返回值——符合规则的字符串

2.【正则的2种创建方式】

  • 字面量:不能进行变量拼接,特殊含义的字符不需要转译;

  • 实例:可以进行变量的拼接,特殊含义的字符需要转译;

3.【元字符和修饰符】

  • 元字符:就是放在两个斜杠之间的,不认识的代码;

  • 包含:①代表特殊含义的元字符;②代表次数的量词元字符;③修饰符

1)代表特殊含义的元字符

\ 转义

| 或

() 分组

. 代表除了\n以外的其他字符;

\n 换行

\b 开头结尾和空格

^ 开头

$ 结尾

\s 空格 \d数字 \w 数字字母下划线

\S 非空格 \D非数字 \W 非数字字母下划线

[a-z] 字母 [^a-z]非字母

[abc]abc三个字母中的任何一个 [^abc]除了这三个字母中的任何一个字符

2)代表次数的量词元字符;

* 0到多

+ 1到多

? 0次或1次 可有可无的意思

{n} 正好n次;

{n,} n到多次

{n,m} n次到m次

3)修饰符 g 全局 i 忽略大小写 m换行;

5.中括号总结:

1)中括号中的字符没有特殊含义;(但是像\w还是有特殊含义的)

2)中括号中,不会出现两位数;

6.关于小括号:

1)提高优先级:凡是有|出现的时候,外面一定要加上()来提高优先级; /^(18|19)$/

2)分组

3)只匹配不捕获 (?:)

7.正则的捕获:

1)exec:exec拿到的是个数组,一般情况下这个数组有三项:

1.符合大正则的内容

2.找到内容的索引

3.原始字符串;

2)match:

3)replace:

8.正则捕获量大特性:

1)懒惰性:

解决措施:全局g;

2)贪婪性:

解决措施:在两次元字符后面加上?号;

9.正则的属性:lastIndex:代表开始查找位置的索引;

lastIndex主要受两方面的影响:1)exec 2)test;

10.问号的用法:

1)? 量词元字符,代表可有可无

2)+? 解决正则的贪婪性;

3)(?:) 只匹配不捕获;

11.exec和match区别:

1)在全局g的情况下,每次只能拿到一个数组,但是,exec可以把符合正则内容字符串进行小分组的摘取;

2)在全局g的情况下,match能拿到符合正则内容的字符串的数组;但他没有小分组

12.exec 可以封装match; 也是replace的实现原理;(replace中的arguments跟exec拿到的值是一模一样的)

1)手机号正则 /^1\d{10}$/

2)有效数字正则 /^[+-]?(\d|([1-9]\d+))(\.\d+)?$/

3)验证年龄 18-65 /^((18|19)|([2-5]\d)|(6[0-5]))$/;

4)验证邮箱的正则 /^([\w.-]+)@([0-9a-zA-Z]+)(\.[a-zA-Z]{2,4}){1,2}$/

5)中文名字 /^[\u4e00-\u9fa5]{2,4}$/

6)身份证号

var reg=/^\d{17}(\d|X)$/;

var reg=/^(\d{2})(\d{4})(\d{4})(\d{2})(\d{2})(\d{2})(\d)(\d|X)$/;

7)非空验证 !/^\s*$/

8)去除首尾空格 /(^ +)|( +$)/g

9)偷小说 /<[^<>]>/g; 注意:textarea 千万不要通过innerHTML取值,因为你拿不到,只能通过value才能内容;

。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。

10)模板引擎实现原理

var str='my name is {0},my age is {1} , i come form {2}';

11)日期格式化及封装

var strCode='2016-6-23 6:41:30';

2016年6月23 06点41分30秒

12)var str='20160514';

var ary=['零','壹','贰','叁','肆','伍','陆','柒','捌','玖'];

13)var str='全日制第七期学费:14800';

var ary=['零','壹','贰','叁','肆','伍','陆','柒','捌','玖'];

14)敏感词过滤

15)统计出现次数最多的单词(可能是多个),及出现多少次

16)queryURLParameter 获取地址栏中的参数

var str='http://image.baidu.com/search/index?tn=baiduimage&ipn=r&ct=201326592&cl=2&lm=-1&st=-1&fm=result&fr=&sf=1&fmq=1462967508128_R&pv=&ic=0&nc=1&z=&se=1&showtab=0&fb=0&width=&height=&face=0&istype=2&ie=utf-8&word=%E5%88%98%E8%AF%97%E8%AF%97'

var reg=/(([^?&=]+)=([^?&=]+))/g;

今天笔者要来给大家介绍一下接口,废话不多说我们直接进入正文哈。

一、首先,什么是接口呢?

接口一般来说有两种,一种是程序内部的接口,一种是系统对外的接口。
系统对外的接口:比如你要从别的网站或服务器上获取资源或信息,别人肯定不会把数据库共享给你,他只能给你提供一个他们写好的方法来获取数据,你引用他提供的接口就能使用他写好的方法,从而达到数据共享的目的,比如说咱们用的app、网址这些它在进行数据处理的时候都是通过接口来进行调用的。
程序内部的接口:方法与方法之间,模块与模块之间的交互,程序内部抛出的接口,比如bbs系统,有登录模块、发帖模块等等,那你要发帖就必须先登录,要发帖就得登录,那么这两个模块就得有交互,它就会抛出一个接口,供内部系统进行调用。

二、常见接口

1、webService接口:是走soap协议通过http传输,请求报文和返回报文都是xml格式的,我们在测试的时候都用通过工具才能进行调用,测试。可以使用的工具有SoapUI、jmeter、loadrunner等;

2、http api接口:是走http协议,通过路径来区分调用的方法,请求报文都是key-value形式的,返回报文一般都是json串,有get和post等方法,这也是最常用的两种请求方式。可以使用的工具有postman、RESTClient、jmeter、loadrunner等;

三、前端和后端

在说接口测试之前,我们先来搞清楚这两个概念,前端和后端。

前端是什么呢,对于web端来说,咱们使用的网页,打开的网站,这都是前端,这些都是html、css写的;对于app端来说呢,它就是咱们用的app,android或者object-C(开发ios上的app)开发的,它的作用就是显示页面,让我们看到漂亮的页面,以及做一些简单的校验,比如说非空校验,咱们在页面上操作的时候,这些业务逻辑、功能,比如说你购物,发微博这些功能是由后端来实现的,后端去控制你购物的时候扣你的余额,发微博发到哪个账号下面,那前端和后端是怎么交互的呢,就是通过接口。
前面说的你可能不好理解,你只需记住:前端负责貌美如花,后端负责挣钱养家。

四、什么是接口测试

接口测试是测试系统组件间接口的一种测试。接口测试主要用于检测外部系统与系统之间以及内部各个子系统之间的交互点。测试的重点是要检查数据的交换,传递和控制管理过程,以及系统间的相互逻辑依赖关系等。

OK,上面是百度百科上说的,下面才是我说的

其实我觉得接口测试很简单,比一般的功能测试还简单,现在找工作好多公司都要求有接口测试经验,也有好多人问我(也就两三个人)什么是接口测试,本着不懂也要装懂的态度,我会说:所谓接口测试就是通过测试不同情况下的入参与之相应的出参信息来判断接口是否符合或满足相应的功能性、安全性要求。

我为啥说接口测试比功能测试简单呢,因为功能测试是从页面输入值,然后通过点击按钮或链接等传值给后端,而且功能测试还要测UI、前端交互等功能,但接口测试没有页面,它是通过接口规范文档上的调用地址、请求参数,拼接报文,然后发送请求,检查返回结果,所以它只需测入参和出参就行了,相对来说简单了不少。

五、接口都由哪些部分组成呢?

首先,接口文档应该包含以下内容:

1、接口说明
2、调用url
3、请求方法(get\post)
4、请求参数、参数类型、请求参数说明
5、返回参数说明

由接口文档可知,接口至少应有请求地址、请求方法、请求参数(入参和出参)组成,部分接口有请求头header。

标头 (header):是服务器以HTTP协议传HTML资料到浏览器前所送出的字串,在标头与 HTML 文件之间尚需空一行分隔,一般存放cookie、token等信息

有同学问我header和入参有什么关系?它们不都是发送到服务器的参数吗?

OK,首先,它们确实都是发送到服务器里的参数,但它们是有区别的,header里存放的参数一般存放的是一些校验信息,比如cookie,它是为了校验这个请求是否有权限请求服务器,如果有,它才能请求服务器,然后把请求地址连同入参一起发送到服务器,然后服务器会根据地址和入参来返回出参。也就是说,服务器是先接受header信息进行判断该请求是否有权限请求,判断有权限后,才会接受请求地址和入参的。

六、为什么要做接口测试

大家都知道,接口其实就是前端页面或APP等调用与后端做交互用的,所以好多人都会问,我功能测试都测好了,为什么还要测接口呢?OK,在回答这个问题之前,先举个栗子:

比如测试用户注册功能,规定用户名为6~18个字符,包含字母(区分大小写)、数字、下划线。首先功能测试时肯定会对用户名规则进行测试时,比如输入20个字符、输入特殊字符等,但这些可能只是在前端做了校验,后端可能没做校验,如果有人通过抓包绕过前端校验直接发送到后端怎么办呢?试想一下,如果用户名和密码未在后端做校验,而有人又绕过前端校验的话,那用户名和密码不就可以随便输了吗?如果是登录可能会通过SQL注入等手段来随意登录,甚至可以获取管理员权限,那这样不是很恐怖?

所以,接口测试的必要性就体现出来了:

①、可以发现很多在页面上操作发现不了的bug

②、检查系统的异常处理能力

③、检查系统的安全性、稳定性

④、前端随便变,接口测好了,后端不用变

七、接口测试怎么测

在进行接口测试前,还需要了解:

1)GET和POST请求:
如果是get请求的话,直接在浏览器里输入就行了,只要在浏览器里面直接能请求到的,都是get请求,如果是post的请求的话,就不行了,就得借助工具来发送。
GET请求和POST请求的区别:

1、GET使用URL或Cookie传参。而POST将数据放在BODY中。
2、GET的URL会有长度上的限制,则POST的数据则可以非常大。
3、POST比GET安全,因为数据在地址栏上不可见。
4、一般get请求用来获取数据,post请求用来发送数据。


其实上面这几点,只有最后一点说的是比较靠谱的,第一点post请求也可以把数据放到url里面,get请求其实也没长度限制,post请求看起来参数是隐式的,稍微安全那么一些些,但是那只是对于小白用户来说的,就算post请求,你通过抓包也是可以抓到参数的。所以上面这些面试的时候你说出来就行了。

2)http状态码

每发出一个http请求之后,都会有一个响应,http本身会有一个状态码,来标示这个请求是否成功,常见的状态码有以下几种:

1、200 2开头的都表示这个请求发送成功,最常见的就是200,就代表这个请求是ok的,服务器也返回了。
2、300 3开头的代表重定向,最常见的是302,把这个请求重定向到别的地方了,
3、400 400代表客户端发送的请求有语法错误,401代表访问的页面没有授权,403表示没有权限访问这个页面,404代表没有这个页面
4、500 5开头的代表服务器有异常,500代表服务器内部异常,504代表服务器端超时,没返回结果

接下来再说接口测试怎么测:

1)、通用接口用例设计

①、通过性验证:首先肯定要保证这个接口功能是好使的,也就是正常的通过性测试,按照接口文档上的参数,正常传入,是否可以返回正确的结果。
②、参数组合:现在有一个操作商品的接口,有个字段type,传1的时候代表修改商品,商品id、商品名称、价格有一个是必传的,type传2的时候是删除商品,商品id  是必传的,这样的,就要测参数组合了,type传1的时候,只传商品名称能不能修改成功,id、名称、价格都传的时候能不能修改成功。

③、接口安全:

1、绕过验证,比如说购买了一个商品,它的价格是300元,那我在提交订单时候,我把这个商品的价格改成3元,后端有没有做验证,更狠点,我把钱改成-3,是不是我的余额还要增加?
2、绕过身份授权,比如说修改商品信息接口,那必须得是卖家才能修改,那我传一个普通用户,能不能修改成功,我传一个其他的卖家能不能修改成功
3、参数是否加密,比如说我登陆的接口,用户名和密码是不是加密,如果不加密的话,别人拦截到你的请求,就能获取到你的信息了,加密规则是否容易破解。
4、密码安全规则,密码的复杂程度校验

④、异常验证:

所谓异常验证,也就是我不按照你接口文档上的要求输入参数,来验证接口对异常情况的校验。比如说必填的参数不填,输入整数类型的,传入字符串类型,长度是10的,传11,总之就是你说怎么来,我就不怎么来,其实也就这三种,必传非必传、参数类型、入参长度。

2)、根据业务逻辑来设计用例

根据业务逻辑来设计的话,就是根据自己系统的业务来设计用例,这个每个公司的业务不一样,就得具体的看自己公司的业务了,其实这也和功能测试设计用例是一样的。
举个例子,拿bbs来说,bbs的需求是这样的:

1、登录失败5次,就需要等待15分钟之后再登录
2、新注册的用户需要过了实习期才能发帖
3、删除帖子扣除积分
4、......
  像这样的你就要把这些测试点列出来,然后再去造数据测试对应的测试点。

八、用什么工具测

接口测试的工具很多,比如 postman、RESTClient、jmeter、loadrunner、SoapUI等,首推的测试工具是postman和jmeter(测试框架的话,可以选择Robot Framework Pytest等),接下来就简单介绍下如何使用这两款工具进行接口测试,其他工具本次暂不介绍。

1)Postman是谷歌的一款接口测试插件,它使用简单,支持用例管理,支持get、post、文件上传、响应验证、变量管理、环境参数管理等功能,可以批量运行,并支持用例导出、导入。

2)jmeter是一款100%纯Java编写的免费开源的工具,它主要用来做性能测试,相比loadrunner来说,它内存占用小,免费开源,轻巧方便、无需安装,越来越被大众所喜爱。

总结

今天的分享就到这里了,喜欢的可以点赞收藏,加关注哟,关注我不迷路。

ootstrapValidato两种方式使用说明

下载地址:()

第一步:引入文件

<link rel="stylesheet" href="/path/to/bootstrap/css/bootstrap.css"/>

<link rel="stylesheet" href="/path/to/dist/css/bootstrapValidator.min.css"/>

<script type="text/javascript" src="/path/to/jquery/jquery.min.js"></script>

<script type="text/javascript" src="/path/to/bootstrap/js/bootstrap.min.js"></script>

<script type="text/javascript" src="/path/to/dist/js/bootstrapValidator-all.js"></script>

第二步:增加验证规则,

默认要验证的字段页面格式必须是:

<input class="form-control" />标签有name属性,且在<div class="form-group"></div>包裹。

添加验证规则有两种方式,一种是通过html标签添加(推荐);另一种是通过js代码添加。

1)通过html标签添加

Form 标签增加属性

data-bv-message="This value is not valid"

data-bv-feedbackicons-valid="glyphicon glyphicon-ok"

data-bv-feedbackicons-invalid="glyphicon glyphicon-remove"

data-bv-feedbackicons-validating="glyphicon glyphicon-refresh">

验证字段上增加data-bv-**开头的属性 以及规则不符合的信息data-bv-**-message

例如验证两次密码输入是否一致

data-bv-identical

data-bv-identical-field="比对的字段name"

data-bv-identical-message="两次密码输入不一致"

然后页面初始化后 ,增加$('#editForm').bootstrapValidator()验证即可

另外,关于有哪些规则

通过js添加规则(网上比较多)

$(function(){/* 文档加载,执行一个函数*/

$('#defaultForm')

.bootstrapValidator({

message: 'This value is not valid',

feedbackIcons: {/*input状态样式图片*/

valid: 'glyphicon glyphicon-ok',

invalid: 'glyphicon glyphicon-remove',

validating: 'glyphicon glyphicon-refresh'

},

fields: {/*验证:规则*/

username: {//验证input项:验证规则

message: 'The username is not valid',

validators: {

notEmpty: {//非空验证:提示消息

message: '用户名不能为空'

},

stringLength: {

min: 6,

max: 30,

message: '用户名长度必须在6到30之间'

},

threshold : 6 , //有6字符以上才发送ajax请求,(input中输入一个字符,插件会向服务器发送一次,设置限制,6字符以上才开始)

remote: {//ajax验证。server result:{"valid",true or false} 向服务发送当前input name值,获得一个json数据。例表示正确:{"valid",true}

url: 'exist2.do',//验证地址

message: '用户已存在',//提示消息

delay : 2000,//每输入一个字符,就发ajax请求,服务器压力还是太大,设置2秒发送一次ajax(默认输入一个字符,提交一次,服务器压力太大)

type: 'POST'//请求方式

/**自定义提交数据,默认值提交当前input value

* data: function(validator) {

return {

password: $('[name="passwordNameAttributeInYourForm"]').val(),

whatever: $('[name="whateverNameAttributeInYourForm"]').val()

};

}

*/

},

regexp: {

regexp: /^[a-zA-Z0-9_\.]+$/,

message: '用户名由数字字母下划线和.组成'

}

}

},

password: {

message:'密码无效',

validators: {

notEmpty: {

message: '密码不能为空'

},

stringLength: {

min: 6,

max: 30,

message: '用户名长度必须在6到30之间'

},

identical: {//相同

field: 'password', //需要进行比较的input name值

message: '两次密码不一致'

},

different: {//不能和用户名相同

field: 'username',//需要进行比较的input name值

message: '不能和用户名相同'

},

regexp: {

regexp: /^[a-zA-Z0-9_\.]+$/,

message: 'The username can only consist of alphabetical, number, dot and underscore'

}

}

},

repassword: {

message: '密码无效',

validators: {

notEmpty: {

message: '用户名不能为空'

},

stringLength: {

min: 6,

max: 30,

message: '用户名长度必须在6到30之间'

},

identical: {//相同

field: 'password',

message: '两次密码不一致'

},

different: {//不能和用户名相同

field: 'username',

message: '不能和用户名相同'

},

regexp: {//匹配规则

regexp: /^[a-zA-Z0-9_\.]+$/,

message: 'The username can only consist of alphabetical, number, dot and underscore'

}

}

},

email: {

validators: {

notEmpty: {

message: '邮件不能为空'

},

emailAddress: {

message: '请输入正确的邮件地址如:123@qq.com'

}

}

},

phone: {

message: 'The phone is not valid',

validators: {

notEmpty: {

message: '手机号码不能为空'

},

stringLength: {

min: 11,

max: 11,

message: '请输入11位手机号码'

},

regexp: {

regexp: /^1[3|5|8]{1}[0-9]{9}$/,

message: '请输入正确的手机号码'

}

}

},

invite: {

message: '邀请码',

validators: {

notEmpty: {

message: '邀请码不能为空'

},

stringLength: {

min: 8,

max: 8,

message: '请输入正确长度的邀请码'

},

regexp: {

regexp: /^[\w]{8}$/,

message: '请输入正确的邀请码(包含数字字母)'

}

}

},

}

})

.on('success.form.bv', function(e) {//点击提交之后

// Prevent form submission e.preventDefault();

// Get the form instance

var $form=$(e.target);

// Get the BootstrapValidator instance

var bv=$form.data('bootstrapValidator');

// Use Ajax to submit form data 提交至form标签中的action,result自定义

$.post($form.attr('action'), $form.serialize(), function(result) {//do something...});

});

});

其他补充:

默认验证的都是一行一个字段的情况,如果一行有多个字段,请增加form属性 data-bv-group=".field-group" ,一行内每个字段只有用filed-group class属性包裹即可。