JavaScript的学习（二）——事件和正则表达式

一、事件

JavaScript中的事件有以下：

①onload：进入页面事件，一般应用在body标签中

②onunload：离开页面事件

③onchange：元素改变事件，常结合对输入字段的验证来使用

④onmouseover：鼠标移动到此位置的事件

⑤onmouseout：鼠标移开此位置的事件

⑥onclick：点击事件，当点击完成的时候，触发事件

⑦onmousedown：点击事件，当点击鼠标时，触发的事件

⑧onmouseup：点击事件，当释放鼠标按钮时，触发的事件

⑨onblur：失去焦点事件，一般就是input输入框失去焦点的事件

⑩onfocus：聚焦事件，一般就是输入字段获得焦点时的事件

以下贴出一些事件的使用

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="../../js/事件/incident.js" ></script>
	</head>
	<body onload="loadTest()">
		元素改变事件<input type="text" onchange="changeTset()" /><br />
		点击事件<input type="button" value="点击事件" onclick="clickTest()" /><br />
		鼠标移上事件<input id="over" type="text" style="background-color: red;" onmouseover="mouseoverTest()" /><br />
		鼠标移开事件<input id="out" type="text" style="background-color: green;" onmouseout="mouseoutTest()"/><br />
		按键盘事件<input type="text" onkeydown="keydownTest()" /><br />
		input输入框失去焦点<input id="blur" style="background-color: greed;" type="text" onblur="blurTest()" />
	</body>
</html>

function changeTset(){
	alert("元素事件改变了");
}
function clickTest(){
	alert("元素点击事件");
}
function mouseoverTest(){
	over.style.backgroundColor="green";
}
function mouseoutTest(){
	out.style.backgroundColor="red";
}
function keydownTest(){
	alert("不要按动键盘！");
}
function loadTest(){
	alert("加载完了");
}
function blurTest(){
	alert("失去焦点")
}

二、正则表达式

正则表达式是描述字符模式的对象。正则表达式用于对字符串模式匹配及检索替换，是对字符串执行模式匹配的强大工具。

其实就是用来做验证的东西。

需要创建RegExp对象，语法：var patt = new RegExp(pattern,modifiers);或者简写：var patt=/pattern/modifiers;

方括号：

方括号用于查找某个范围内的字符：

元字符：

元字符（Metacharacter）是拥有特殊含义的字符

量词：

RegExp对象方法：

支持正则表达式的String对象的方法：

全局匹配：

正则表达式以g结尾：全局匹配

全局匹配的限制：不能把正则表达式当成字符串处理

说简单一点，正则表达式匹配的时候，比如有aabbccddeeaa这个字符串，将里面的a全部换掉，如果不使用g全局匹配，塔是实现不了全部换掉的。

var str='abc345efgabcab';
document.write(str.replace(/([a-c])/g,''))

下面来用一个实例来学习：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="../../js/正则表达式/jsTest.js" ></script>
	</head>
	<body>
		<!--请输入邮箱<input type="text" id="emailTest" />
		<input type="button" onclick="email()" value="测试邮箱"/><br />
		请输入电话号码<input type="text" id="phonenumberTest"/>
		<input type="button" onclick="phone()" value="电话号码测试" /><br />
		请输入身份证号码<input type="text" id="idcard" />
		<input type="button" onclick="idcardTest()" value="身份证测试" />-->
		<form>
			请输入邮箱<input type="text" id="emailTest" /><br />
			请输入用户名<input type="text" id="username" /><br />
			请输入密码<input type="test" id="password" /><br />
			请输入电话号码<input type="text" id="phonenumberTest"/><br />
			请输入身份证号码<input type="text" id="idcard" /><br />
			<input type="button" value="提交" onclick="tset()" />
		</form>
	</body>
</html>

function email(){
	var s = document.getElementById("emailTest").value;
	var a = new RegExp("^(\\w|\\d){3,}@[a-z0-9]{1,}.(com|cn|edu){1}$");
	var r = a.test(s);
	if(r == true){
		alert("邮箱格式正确");
	}else{
		alert("邮箱格式错误");
	}
}
function phone(){
	var p = document.getElementById("phonenumberTest").value;
	var pattPhone = new RegExp("^((13[0-9]{1})|(15[0-9]{1})|(17[0-9]{1})|(18[0-9]{1}))+(\\d{8})$");
	var r = pattPhone.test(p);
	if(r == true){
		alert("电话号码格式正确");
	}else{
		alert("电话号码格式错误");
	}
}
function idcardTest(){
	var i = document.getElementById("idcard").value;
	var pattID = new RegExp("^(11|12|13|14|15|21|22|23|31|32|33|34|35|36|37|41|42|43|44|45|46|51|52|53|54|61|62|63|64|65|71|81|82|886|852|853)+(\\d{15})+([0-9]|x|X){1}$");
	
	var r = pattID.test(i);
	if(r == true){
		alert("身份证格式正确");
	}else{
		alert("身份证格式错误");
	}
}
function tset(){
	
	//邮箱
	var email = document.getElementById("emailTest").value;
	var pattE = new RegExp("^(\\w|\\d){3,}@[a-z0-9]{1,}.(com|cn|edu){1}$");
	var emailR = pattE.test(email);
	//用户名
	var username = document.getElementById("username").value;
	var pattName = new RegExp("(^[A-z]{1})+(\\w|\\d|.){4,7}$");
	var nameR = pattName.test(username);
	//密码s
	var password = document.getElementById("password").value;
//	var a = /[a-z][0-9]_/;
	var pattPwd = new RegExp("(^(\\w|\\d|_){1,})+((\\w){1,})+((\\d){1,})+((_){1,})+(\\w|\\d|_){1,6}$");
	var pwdR = pattPwd.test(password);
	//电话号码
	var phone = document.getElementById("phonenumberTest").value;
	var pattPhone = new RegExp("^((13[0-9]{1})|(15[0-9]{1})|(17[0-9]{1})|(18[0-9]{1}))+(\\d{8})$");
	var phoneR = pattPhone.test(phone);
	//身份证
	var id = document.getElementById("idcard").value;
	var pattID = new RegExp("^(11|12|13|14|15|21|22|23|31|32|33|34|35|36|37|41|42|43|44|45|46|51|52|53|54|61|62|63|64|65|71|81|82|886|852|853)+(\\d{15})+([0-9]|x|X){1}$");
	var IDR = pattID.test(id);
	
	
	if(emailR == false){
		alert("邮箱格式错误");
	}else if(nameR == false){
		alert("用户名格式错误");
	}else if(pwdR == false){
		alert("密码格式错误");
	}else if(phoneR == false){
		alert("电话格式错误");
	}else if(IDR == false){
		alert("身份证格式错误");
	}else{
		alert("注册成功！")
	}
}

正则表达式中需要注意的是使用//和""是有差别的，如果使用""，表示是字符串，字符串的话，需要使用\做转义字符，使用//就不需要使用转义字符了。

还有就是关于量词的匹配，其中的n{x，y}，表示匹配到的是至少x个，最多y个，但是这里需要理解的是去匹配，而不是做一个限制。比如匹配{5,9}，表示至少有个能匹配，至多匹配到9个，如果少于5个，匹配返回false，如果多于9个，匹配的结果便是true了。这里需要正确理解匹配的含义。

JavaScript的学习（二）——事件和正则表达式

猜你喜欢