JavaScript事件与正则表达式

最新推荐文章于 2022-07-14 15:56:31 发布

peace or love

最新推荐文章于 2022-07-14 15:56:31 发布

阅读量618

点赞数

文章标签： javascript 正则表达式 html

本文链接：https://blog.csdn.net/m0_59315964/article/details/122136044

版权

一事件的概述

事件指用户在html中触发元素控件所做的操作。

例：用户点击（button）按钮，就会触发点击事件，当编写完页面源代码时，一旦经过浏览器的加载，就会触发页面加载事件。

二常见的事件

关注点：明白事件对应得操作前景

事件名

onfocus事件：当控件元素获得焦点是被触发

onkeydown事件：当下键盘上任意按键被触发

onkeypress事件：按下键盘任意按键，且必须产生一个字符才会触发

onkeyup：按键上按键被抬起才会被触发

onload事件：页面被浏览器加载出来会触发

onclick事件：点击事件（单机鼠标左键会被触发）

ondblclick是事件：双击事件（双击鼠标左键会被触发）

onmousedown事件：单机鼠标任意一个按键会触发

onreset事件：点击重置按钮会触发（form表单中）

onsubmit事件：点击提交按钮会触发（form表单中）

三：事件处理的方式：函数

指为了响应某个事件儿执行处理的程序------->可以是任意js代码，最终的处理方式，最终以函数来实现。

方式一：在html中捆绑事件：指的是把事件当做属性，添加在控制元素的开始标签中，属性值设置函数的调用。

例：<开始标签事件=“函数名()" ></结束标签>

    <script language="JavaScript">
            function nana(){
                alert("我是琪琪");
            }
            
        </script>
    </head>
    <body>
        <input type="button" name="名字" value="保存" οnclick="nana()" />
    </body>

事件的处理方式：元素定位

事件的处理方式是放在js中进行捆绑，先给对应的标签添加一个属性id，通过id元素定位的方式

控件元素定位的方法：document.getElementById("id属性值")

把定位到元素控件交给一个变量来保存，

拿上保存控制变量：变量名.事件=匿名函数；

如果利用空间元素，进行定位捆绑事件，那么一点是控件元素先有才能编写js脚本进行编写；

    <form><input type="button" name="mm" id="mm" value="保存"/></form>
         
        <script language="JavaScript">
         value="保存 " οnclick="nana()" />
         var bt_mm=document.getElementById("mm");
         bt_mm.οnclick=function(){
            alert("保存按钮被单机");
         }

正则表达式的构成

正则表达式是一个描述字符对象模式的对象，通过该字符模式可以进行数据的匹配验证操作，主要是验证客户端输入数据的合法性或者正确性

正则表达式的构成：

是由普通字符，以及特殊字符（元字符）组成的模式字符串，正则表达式作为一个字符模板，可以和模板相关的数据进行匹配操作

正则表达式的能够提供字符模板的写法

字符类

[字符] 匹配中括号内的任意一个字符

[^字符] 匹配中括号内的字符

\d 匹配一个数字

\D 匹配非数字字符

\w 匹配字母，数字，下划线

量词

？代表匹配前一项最多一次

+代表匹配前一项最少一次

*代表匹配前一项任意一次

{n} 匹配前一项恰好n次

{n，}匹配前一项至少n次

{n，m}匹配前一项至少n次，但是不超过m次

指定字符位置的出现

^字符指定以该字符开头

字符$ 指定以该字符结尾

使用选择匹配符，

| 代表俩边的内容二选一，内容1|内容2

分组

（）把多个单独字符当做一个整体，对该整体进行设置 / j（ava）？script/匹配到的可以是JavaScript。jscript

正则表达式的判定方法

正则表达式的创建

var 变量名=/正则表达式模板/;

正则表达式的判定方式

使用test（）方法：变量名.test("输入数据");

结果；匹配成功，返回ture 失败返回fales

判定方式二：

变量名.exec("输入数据");

结果匹配失败，返回null、

结果匹配成功，会产生一个数组(等同于数学上的集合)该分组中第一个数据匹配成功的字符串，其他数据是按照分组（）来产生划分依据，一个分组就是一个数据；

需求：从输入框中，读取到用户输入的身份证号码，最终要求，提取出生年月日


<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>js</title>
    </head>
    <body>
        
        <form name="form01">
            
            请输入身份证号码：<input  type="text" size="35px" maxlength="18" name="wenben"/>
            <input type="button" value="提取年月日"  οnclick="tq()"/>
        </form>
        
        
        
        <script  language="JavaScript">
             
             //声明一个函数tq，实现年月日的提取功能
             function  tq(){
                
                //1.先获取到用户在输入框中输入的身份证号码
                //如何在JS脚本中获取到输入框的值--->name
                //表单name.输入框name.value
                //声明一个变量，接收从输入框拿到的值
                var  zhi=form01.wenben.value;   //zhi=411321199001240012;
                
                //2.根据获取到的值，来和正则表达式做判定，看是否合理
                //2.1身份证号码正则表达式
                var sfz=/(\d{6})(\d{8})(\d{4})/;
                
                //2.2判定  test()    exec()  成功：数组[输入数据,(\d{6}),(\d{8}),(\d{4})]  只需要获取数组中第三个元素
                var pd=sfz.exec(zhi);  //身份证号码和正则表达式做匹配  成功：pd=[411321199001240012,411321,19900124,0012]
                //匹配失败，pd=null；
                //匹配成功，pd接收了一个数组  pd=[输入数据,(\d{6}),(\d{8}),(\d{4})]
                //只需要获取pd数组中第三个位置的数据--->年月日
                //3.如何来获取数组中第三个位置上的值：格式：变量名[位置下标]   下标=位置-1
                var  jieguo=pd[2];  //第三个值  19900124   jieguo=199900124
                
                //4.弹出结果变量
                alert("出生年月日是："+jieguo);  //19900124
                
             }
            
        </script>   
    </body>
</html>