您现在的位置是:首页 > 文章详情

JavaScript 基础--- (正则表达式 / 事件监听与绑定)

日期:2018-07-31点击:353

正则表达式

创建正则表达式:

方法一: 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> 

输出:

 

 

原文链接:https://yq.aliyun.com/articles/623931
关注公众号

低调大师中文资讯倾力打造互联网数据资讯、行业资源、电子商务、移动互联网、网络营销平台。

持续更新报道IT业界、互联网、市场资讯、驱动更新,是最及时权威的产业资讯及硬件资讯报道平台。

转载内容版权归作者及来源网站所有,本站原创内容转载请注明来源。

文章评论

共有0条评论来说两句吧...

文章二维码

扫描即可查看该文章

点击排行

推荐阅读

最新文章