正则表达式
创建正则表达式：
方法一： var reg = /pattern/;
方法二：var reg = new RegExp('pattern');
RegExp 对象的常用方法：
示例：
<!DOCTYPE html><html> <head> < charset="UTF-8"> < ></ > < type="text/ "> var str = 'awddsafasei'; var reg = new RegExp('weiwel'); var reg = /weiwei/; //正则表达式中有两个方法 exec() :返回，符合条件的字符串 test(): alert(reg.exec(str)); alert(reg.test(str)); </ > </head> <body> </body></html>
输出：
2.正则表达式所支持的常用通配符
3.正则表达式量词
4.正则表达式修饰符
案例：
<!DOCTYPE html><html> <head> < charset="UTF-8"> < ></ > < type="text/ "> var str = 'awddsafasei'; var reg = /^a(w){2,}i$/g; //正则表达式中有两个方法 exec() :返回，符合条件的字符串 test(): alert(reg.exec(str)); alert(reg.test(str)); </ > </head> <body> </body></html>
输出：
事件绑定
HTML 事件：
示例：点击按钮，弹出警示框
<!DOCTYPE html><html> <head> < charset="UTF-8"> < ></ > </head> <body> <input type="button" id="button1" value="button1"/> </body> < type="text/ "> document.getElementById("button1"). = fun; function fun(){ alert('hello'); } </ ></html>输出：点击---弹出
事件监听
使用返回值改变 HTML 元素的默认行为（可以通过在绑定事件中加上 return false 来阻止其默认行为）
通用性的事件监听方法：
1.绑定 HTML 元素属性
<input type ="button" value="click" ="check(this)"/ >
2.绑定 DOM 对象属性
document.getElementById("btn1"). =test;
推荐尽量采用与浏览器无关的事件绑定方法，保证有更好的跨浏览器特性
标准DOM中的事件监听方法：
1.[ ].addEventListener("事件类型","处理函数","冒泡事件或捕获事件")
2.[ ].removeEventListener("事件类型","处理函数","冒泡事件或捕获事件")
案例：
<!DOCTYPE html><html> <head> < charset="UTF-8"> < ></ > </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> < type="text/ "> var username = document.getElementById("username"); /*username.addEventListener("focus",function(){ alert('focus'); }) */ // 获取焦点弹出警示框 username. = 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 中就弹出警示框 </ ></html>
输出：点击、获取焦点，失去焦点，鼠标移入红色区域均弹出警示框
综合案例：注册验证
<!DOCTYPE html><html> <head> < charset="UTF-8"> < ></ > </head> <body> <form action="" method="post"> 用户名：<input type="text" id="username" ="checkUn()"/> <span id="unspan" style="color: red;"> </span><br /> 密码：<input type="text" id="password"/><br /> 手机号：<input type="text" id="phone" ="checkPhone()"/> <span id="phonespan" style="color: red;"> </span> <br /> 邮箱：<input type="text" id="email" ="checkEmail()"/> <span id="emailspan" style="color: red;"> </span> <br /> <input type="submit" value="提交"/> </form> </body> < type="text/ "> //校验用户名 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 = ''; } } </ ></html>输出：
继续阅读与本文标签相同的文章
上一篇 :
JavaScript 基础--- (经典案例)
下一篇 :
初识 JSP---(转发和重定向)
-
E11000 duplicate key error index
2026-05-26栏目： 教程
-
local class incompatible: stream classdesc serialVersionUID = 4125096758372084309, local class serialVersionUID = 7725746634795906143
2026-05-26栏目： 教程
-
bulk更新mongodb的脚本
2026-05-26栏目： 教程
-
html提示框插件
2026-05-26栏目： 教程
-
ListView在ScrollView中不显示全部的问题
2026-05-26栏目： 教程