JavaScript 基础--- (正则表达式 / 事件监听与绑定)
正则表达式
创建正则表达式：
方法一： var reg = /pattern/;
方法二：var reg = new RegExp('pattern');
RegExp 对象的常用方法：
示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
var str = 'awddsafasei';
var reg = new RegExp('weiwel');
var reg = /weiwei/;
//正则表达式中有两个方法 exec() :返回，符合条件的字符串 test():
alert(reg.exec(str));
alert(reg.test(str));
</script>
</head>
<body>
</body>
</html>
输出：
2.正则表达式所支持的常用通配符
3.正则表达式量词
4.正则表达式修饰符
案例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
var str = 'awddsafasei';
var reg = /^a(\w){2,}i$/g;
//正则表达式中有两个方法 exec() :返回，符合条件的字符串 test():
alert(reg.exec(str));
alert(reg.test(str));
</script>
</head>
<body>
</body>
</html>
输出：
事件绑定
HTML 事件：
示例：点击按钮，弹出警示框
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<input type="button" id="button1" value="button1"/>
</body>
<script type="text/javascript">
document.getElementById("button1").onclick = fun;
function fun(){
alert('hello');
}
</script>
</html>
输出：点击---弹出
事件监听
使用返回值改变 HTML 元素的默认行为（可以通过在绑定事件中加上 return false 来阻止其默认行为）
通用性的事件监听方法：
1.绑定 HTML 元素属性
<input type ="button" value="click" onclick="check(this)"/ >
2.绑定 DOM 对象属性
document.getElementById("btn1").onclick=test;
推荐尽量采用与浏览器无关的事件绑定方法，保证有更好的跨浏览器特性
标准DOM中的事件监听方法：
1.[object].addEventListener("事件类型","处理函数","冒泡事件或捕获事件")
2.[object].removeEventListener("事件类型","处理函数","冒泡事件或捕获事件")
案例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<input type="text" id="username" value="" />
<div id="div1" style="width:100px;height: 50px;background: red;">
<input type="button" id="button1" value="button1"/>
</div>
</body>
<script type="text/javascript">
var username = document.getElementById("username");
/*username.addEventListener("focus",function(){
alert('focus');
})
*/
// 获取焦点弹出警示框
username.onblur = function(){
alert('blur');
}
//焦点消失弹出警示框
var btn = document.getElementById("button1");
var div1 = document.getElementById("div1");
btn.addEventListener("click",btnclick);
function btnclick(){
alert('button');
}
div1.addEventListener("click",function(){
alert('div1');
},false);
div1.addEventListener("mouseout",function(){
alert('mousedo');
})
//鼠标移入 div1 中就弹出警示框
</script>
</html>
输出：点击、获取焦点，失去焦点，鼠标移入红色区域均弹出警示框
综合案例：注册验证
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<form action="" method="post">
用户名：<input type="text" id="username" onchange="checkUn()"/>
<span id="unspan" style="color: red;">
</span><br />
密码：<input type="text" id="password"/><br />
手机号：<input type="text" id="phone" onchange="checkPhone()"/>
<span id="phonespan" style="color: red;">
</span>
<br />
邮箱：<input type="text" id="email" onchange="checkEmail()"/>
<span id="emailspan" style="color: red;">
</span>
<br />
<input type="submit" value="提交"/>
</form>
</body>
<script type="text/javascript">
//校验用户名
function checkUn(){
var reg = /(\w){4,}/
var username = document.getElementById("username").value;
if(!reg.test(username)){
document.getElementById('unspan').innerHTML = '用户名最少四个字符';
}else{
document.getElementById('unspan').innerHTML = '';
}
}
function checkPhone(){
//15944556789
var reg = /^1[3578](\d){9}/;
var phone = document.getElementById("phone").value;
if(!reg.test(phone)){
document.getElementById('phonespan').innerHTML = '手机号格式不正确';
}else{
document.getElementById('phonespan').innerHTML = '';
}
}
function checkEmail(){
//weiwei234@163.com.cn
var reg = /^[a-zA-Z_](\w){2,12}@[a-zA-Z0-9]{2,7}((\.)([a-zA-Z]){2,3}){1,2}$/;
var email = document.getElementById("email").value;
if(!reg.test(email)){
document.getElementById('emailspan').innerHTML = '邮箱格式不正确';
}else{
document.getElementById('emailspan').innerHTML = '';
}
}
</script>
</html>
输出：
