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>
输出:
低调大师中文资讯倾力打造互联网数据资讯、行业资源、电子商务、移动互联网、网络营销平台。
持续更新报道IT业界、互联网、市场资讯、驱动更新,是最及时权威的产业资讯及硬件资讯报道平台。
转载内容版权归作者及来源网站所有,本站原创内容转载请注明来源。
- 上一篇
java脚本引擎的设计原理浅析
本人在阿里巴巴长期担任和负责规则引擎、流程引擎相关的技术开发,另外还负责开发和维护开源项目:https://github.com/alibaba/QLExpress QLExpress是一个脚本引擎工具,类似Groovy,JRuby等,是为了解决当时电商规则动态编译、表达式高精度计算、复杂布尔运算、自定义函数和操作符号、语法树生成等需求而设计的。QLExpress项目开源自2012年,截至目前已经迭代了60多个版本,(在阿里的专有开源社区 index - Taocode )后在社区和集团内部却意外获得非常好的反响。 然而,我要很不客气的讲,在众多优秀的脚本引擎工具list中,QLExpress还很不完美。本篇结合自己的工作和技术研究,列举其中一些比较有意思的。 一、分类标准 1、编译型 vs 解析性 如果能够产生一个独立的class文件则属
- 下一篇
【Python】从0开始写爬虫——扒一下狗东
1. 上一篇我们已经稍微体验了一下用 urllib 和 BeautifulSoup 爬数据的基本操作。现在开始正式准备扒一个网站了。 1)首先确定扒谁? 由于我对狗东恨之入骨(狗贼刘强东老太可恶了,用我的钱,养我的奶茶妹,这种人,人人得而诛之!!!), 所以我们打算扒强东。 2)狗东有什么数据? 商品 和 店铺. 3)商品有什么值得扒的东西? 名字 + 价格 + 评价数量(好评+差评)+ 交易量 4)店铺有什么值得扒的东西? 店铺名 + 店铺销售类目 + 店铺评价? 2. 有了目标,我们就可以开始干了! 1)先找一个商品。比如。。。emmm作为一个男人,为了保持愉快的爬虫开发体验,我们研究一个裙子 :梵钰美 2018新款秋冬季韩版性感包臀夜店女装针织连衣裙长袖毛衣女套头打底中长裙春20 黑色 均码 2)先看这个链接 https://item.jd.com/10671563387.htm, 很显然,这一串数字很有可能就是和商品一 一对应的 ID , 记下来这个知识点, 后期我们大量爬数据的时候可以作为去重的凭证。 3)我们进到这个页面,我把暂定要扒的数据标记了一下 4)以我...
相关文章
文章评论
共有0条评论来说两句吧...
文章二维码
点击排行
-
Docker使用Oracle官方镜像安装(12C,18C,19C)
- Springboot2将连接池hikari替换为druid,体验最强大的数据库连接池
- CentOS8编译安装MySQL8.0.19
- Docker快速安装Oracle11G,搭建oracle11g学习环境
- SpringBoot2配置默认Tomcat设置,开启更多高级功能
- MySQL8.0.19开启GTID主从同步CentOS8
- CentOS7,8上快速安装Gitea,搭建Git服务器
- Jdk安装(Linux,MacOS,Windows),包含三大操作系统的最全安装
- SpringBoot2编写第一个Controller,响应你的http请求并返回结果
推荐阅读
最新文章
- SpringBoot2整合Thymeleaf,官方推荐html解决方案
- 设置Eclipse缩进为4个空格,增强代码规范
- CentOS7,8上快速安装Gitea,搭建Git服务器
- Windows10,CentOS7,CentOS8安装MongoDB4.0.16
- CentOS7安装Docker,走上虚拟化容器引擎之路
- CentOS6,7,8上安装Nginx,支持https2.0的开启
- SpringBoot2全家桶,快速入门学习开发网站教程
- CentOS8编译安装MySQL8.0.19
- CentOS7编译安装Cmake3.16.3,解决mysql等软件编译问题
- Docker安装Oracle12C,快速搭建Oracle学习环境