千锋教育JavaScript全套视频教程(10天学会Js,前端javascrip

正则的概念:数据格式验证:前端完成
// 正则:字符串正确的规则,
// 在表单提交的过程中,前端往往有大量的数据需要效验,
// 通过正则对象可以完成数据格式的判断,从而大大降低服务器的压力
// 数值验证:后端验证
一、正则对象的构造方法
a.构造方法
var reg = new RegExp("格式字符串","修饰符");
var reg = new RegExp("a");至少包含一个"a"
test
功能:判断目标字符串是否满足正则对象
参数:test(目标字符串)
返回值:布尔值
var str = "bbbbc";
console.log(reg.test(str));
b.字面量
var reg = /格式字符串/修饰符;
var reg = /a/;
var str = "bbabbc";
console.log(reg.test(str));
---------------------------------
什么时候必须用第一种?
var arr = ["heihei","123","haha"];
var reg = /arr[0]/; 错误
var reg = new RegExp(arr[0]);
二、正则格式的字符串
格式字符串:普通字符+特殊字符
普通字符:普通的字符
特殊字符:a.单个字符
b.各种括号
c.组合字符
1.至少包含"a"
var reg = /a/;
2.至少包含连续的aaa
reg = /aaa/;
3.只能包含一个a
reg = /^a$/;
注意事项:
^:正则开始的字符串
&:正则结束的字符串
必须同时出现或者同时消失
4.只能包含aaa
reg = /^aaa$/;
5.以b开头 至少3个a 至多5个a
reg = /^ba{3,5}$/;
6.6个5
reg = /^5{6}$/;
7.邮编 6位数字
reg = /^\d{6}$/;
8.定义一个由字母或数字或下划线组成的用户名 范围在6,18之间
reg = /^\w{6,18}$/;
9.定义一个由字母或数字或下划线组成的用户名 但是首字母不为数字 范围在6,18之间
reg = /^\D\w{5,17}$/;
10.定义一个密码 至少6位
reg = /^.{6,}$/;
11.www.baidu.com
reg = /^www\.baidu\.com$/;
reg = /^\\$/;
12.3+5
reg = /^3\+5$/;
reg = /^\d+$/;
13.以 13 或 15 开头的手机号
(值1|值2|值3...)
reg = /^1(3|5)\d{9}$/;或者reg = /^(13|15)\d{9}$/;
[值1值2值3...]
reg = /^1[35]\d{9}$/;
14.指定一个区间
reg = /^[a-f0-5]$/;
15.除了
[^值1值2值3...]
reg = /^[^abc]$/;
16.空格
reg = /^\s$/;
17.中文 [\u4e00-\u9fa5] 任意一个中文字符
两个中文
reg = /^[\u4e00-\u9fa5]{2}$/;
总结:
1.单个字符:
^:正则开始
$ :正则结束
.:元字符,表示任意一个字符
\: 表示转义字符.表示
+:表示其前面紧挨着的字符至少出现1次 等价{1}
*:表示其前面出现的字符至少出现过0次 等价{0}
?:表示其前面出现的字符至少出现过0次,至多1次等价{0,1}
| :表示或者 (1|3|7)
2.组合字符:
\d : 0-9之间的任意一个数字d只占一个位器
\D :除了\d
\w :数字,字母,下划线 0-9 a-z A-Z
\W :除了\w
\s:空格
\S:除了\s
3.括号:
{m,n}:表示括号前面紧挨着的字符至少出现m个,至多出现n个
{m}:表示括号前面紧挨着的字符只能出现m个
{m,}:表示括号前面紧挨着的字符至少出现m个
[]:表示括号内的任意一个字符 [wd3h7]
[a-z]:表示任意一个小写字母 [a-zA-Z0-9]
[^ ]:表示非括号里的任意一个字符
():一般与或连用,表示优先级
[ u4e00-\u9fa5]:任意一个中文字符
三、判断密码的强弱
至少包含
var regNum = /\d+/;
var regLetter = /[a-zA-Z]+/;
var regChar = /[!@#$]+/;
只能包含
var _regNum = /^\d+$/;
var _regLetter = /^[a-zA-Z]+$/;
var _regChar = /^[!@#$]+$/;
var oInput = document.querySelector("input");
var oBtn = document.querySelector("button");
oBtn.onclick = function(){
if(regNum.test(oInput.value) && regLetter.test(oInput.value) &&
regChar.test(oInput.value)){
console.log("强");
}else if(_regNum.test(oInput.value) || _regLetter.test(oInput.value) ||
_regChar.test(oInput.value)){
console.log("弱");
}else{
console.log("中");
}
}
四、表单验证:
action:提交的服务器地址
method:数据提交的方式
get:安全性低,效率高,默认不写是get
post:安全姓高,效率低
onsubmit事件对应的就是 type="submit"这个按钮