正则各种API以及表单验证

一：正则表达式

描述：正则表达式其实就是用来描述字符规则的对象

组成：普通字符，特殊字符，[属性]构成

定义：

方式一：字面量

var reg=/普通字符，特殊字符/[属性]

方式二：构造方法

var reg=new RegExp(“普通字符+特殊字符”,[属性]);

二·正则的特殊字符

2·1：单个字符

• ^—>正则开始

• $ —> 正则结束

• . —>元字符, 表示任意一个字符

• /—>表示转义字符，对于没有超能力的字符，赋予能力

  ​ 对于有超能力的字符，取消能力

• +—> 表示其前面紧挨着的字符至少出现1次 等价{1,}

• \* —>表示其前面出现的字符至少出现过0次 等价{0,}
  

• ?—>表示其前面出现的字符至少出现过0次，至多1次 等价{0,1}

2·2：组合字符

• \d —>0-9之间的任意一个数字 \d只占一个位置
• \D —>除了\d
• \w —>数字，字母 ，下划线 0-9 a-z A-Z _
• \W —> 除了\w
• \s —> 空格或者空白等
• \S —> 除了\s

2·3：各种括号

• {m,n}—>括号前面紧挨着的字符至少出现m个，至多出现n个
• {m}—> 括号前面紧挨着的字符只能出现m个
• {m,}—> 括号前面紧挨着的字符至少出现m个
• [] —> 括号内的任意一个字符
• [a-z]—> 任意一个小写字母
• [ ^ ]—> 非括号内的任意一个字符
• [\u4e00-\u9fa5] —>任意一个中文字符
• ()—> 一般与或连用 表示优先级

2·4：属性

• g：表示全局
• i：表示忽略大小写

三：密码强弱的判断

<input type="text" name="" id="" value="" />
<button type="button">测试</button>
//字母 a-zA-Z 数字 0-9 其他字符 [!@#$%]

	//包含
	var regNum = /\d+/;
	var regLetter = /[a-zA-Z]+/;
	var regChar = /[!@#$%]+/;

	//纯
	var _regNum = /^\d+$/;
	var _regLetter = /^[a-zA-Z]+$/;
	var _regChar = /^[!@#$%]+$/;

	var oBtn = document.querySelector("button");
	var oText = document.querySelector("input");

	oBtn.onclick = function() {
		if (_regNum.test(oText.value) || _regLetter.test(oText.value) ||
			_regChar.test(oText.value)) {
			console.log("弱爆了");
		}else if(regNum.test(oText.value) && regLetter.test(oText.value) &&
			regChar.test(oText.value)){
			console.log("强");
		}else{
			console.log("中");
		}
	}

四：表单验证

4·1：onsubmit

作为submit按钮的事件，返回值为布尔，决定是否提交数据

<form action="ok.html" method="get">
			ID:<input type="text"/><br>
			PWD:<input type="text"/><br>
			<input type="submit" value="提交"/>
</form>
	var oF = document.querySelector("form");
	var oText = document.querySelectorAll("input");
	oF.onsubmit = function(){
		var regId = /^\D\w{5,17}$/;
		var	regPwd = /^.{6,}$/;	
		if(!regId.test(oText[0].value)){
			return false;
		}
		if(!regPwd.test(oText[1].value)){
			return false;
		}
		return true;
	}

4·2：表单验证的强化写法：焦点验证

onblur作为失去焦点的判断

	var oTexts = document.querySelectorAll("input");
	var regId = /^\D\w{5,17}$/;
	var	regPwd = /^.{6,}$/;
	var oF = document.querySelector("form");
	var flagId = false;
	var flagPwd = false;
	
	oTexts[0].onblur = function(){
		if(regId.test(this.value)){
			this.nextElementSibling.innerHTML = "ID格式正确";
			flagId = true;
		}else{
			this.nextElementSibling.innerHTML = "错误";
			flagId = false;
		}
	}
	
	oTexts[1].onblur = function(){
		if(regPwd.test(this.value)){
			this.nextElementSibling.innerHTML = "PWD格式正确";
			flagPwd = true;
		}else{
			this.nextElementSibling.innerHTML = "错误";
			flagPwd = false;
		}
	}
	
	oF.onsubmit = function(){
		if(flagId && flagPwd){
			return true;
		}else{
			return false;
		}
	}

五·各种API

5·1：整个相关的方法

• test（）检验一个字符串是否符合某一个正则规范，如果符合返回true,否则返回false【reg.test(str)】

• exec（）根据正则表达式查找，结果满足,会返回一个长度为1的数组（数组只有一个值）【reg.exec(str)】

  	 var reg=/\d/g;
  	 var arr=reg.exec("1d3g4b");
  	 console.log(arr[0])//打印1
  	 //第二次从接下来处进行判断
  	 arr = reg.exec("1a2b3c");
  	 console.log(arr[0]);//打印2
  

5·2：正则和相关字符串的写法

• search（） 返回与正则表达式查找内容匹配的第一个子字符串的位置，找到则返回子字符至开始处的偏移位，否则返回-1。【str.search(reg)】

  	var str = "wo shi ge bi de lao wang";
  	var reg1 = /shi/;
  	console.log(str.search(reg1));
  	var reg2 = /GE/i;//i忽略大小写
  	console.log(str.search(reg2));
  

• match （）使用正则表达式模式对字符串执行查找，并将包含查找的结果作为数组返回。【str.match(reg)】

  	var reg = /\d+/g;
  	var str = "123a4356a987";
  	console.log(str.match(reg)[0]);
  	console.log(str.match(reg)[1]);
  	console.log(str.match(reg)[2]);
  

• replace （）返回根据正则表达式进行文字替换后的字符串的复制。【stringObj.replace(reg, replaceText)】

  var str = "lao wang de ge bi zhu zhe lao wang";
  	str = str.replace(/lao wang/g,"di jia");
  	console.log(str);
  

• replace （）返回根据正则表达式进行文字替换后的字符串的复制。【stringObj.replace(reg, replaceText)】

  var str = "lao wang de ge bi zhu zhe lao wang";
  	str = str.replace(/lao wang/g,"di jia");
  	console.log(str);