JS事件处理及正则表达式

最新推荐文章于 2022-08-08 18:18:43 发布

VvUPUP

最新推荐文章于 2022-08-08 18:18:43 发布

阅读量382

点赞数 1

分类专栏：前端基础文章标签： JavaScript 事件处理正则表达式表单验证字符串匹配

本文链接：https://blog.csdn.net/vv0606/article/details/109244717

版权

前端基础专栏收录该内容

5 篇文章 0 订阅

订阅专栏

一、事件处理

1、单击事件

案例：简单计算器

案例：点击放大缩小

2、获取事件源

改成这样就可以获取事件源了

3、Timing定时事件

setTimeout(function,指定时间)：等待指定时间后执行函数，可以使用clearTimeout来停止执行

setInterval(function,指定时间)：间隔指定时间重复执行函数，可以使用clearInterval来停止执行

4、鼠标移入移出事件

onmouseover:鼠标移入触发事件

onmouseout:鼠标移出触发事件

案例：鼠标移到哪个，放大显示哪个

5、load事件

解决方法：使用window.onload，表示先加载完页面后，再执行

6、表单事件

二、正则表达式

1、简介

正则表达式描述了一种字符串匹配的模式，可以用来检查一个串是否含有某种子串、将匹配的子串替换或者从某个串中取出符合某个条件的子串等。

格式： /正则表达式内容/

RegExp对象方法

compile：编译正则表达式

exec：检索字符串中的指定位置，返回找到的值，并确定其位置。

test：检索字符串中的指定位置，返回true或false

支持正则表达式的String对象的方法

search：检索与正则表达式相匹配的值，返回的是匹配信息起始的位置

match：找到一个或多个正则表达式的匹配，返回一个包含匹配内容的信息

replace：替换与正则表达式匹配的子串

split：把字符串分割为字符数组

2、JS正则表达式匹配与搜索

匹配：

搜索：

3、正则表达式的语法格式

4、表单验证：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .error{
            color:red;
            vertical-align: middle;
        }
    </style>
</head>
<body>
    <form>
        <!-- &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp 为了让列表对齐-->
        <h1>注册</h1>
        <!-- <span id="s_username" class="error"></span>  这个是拿来在输入框后面加错误提示信息的-->
        登录账号：<input type="text" id="uname" width="20px" onblur="checkUname()"><span id="s_username" class="error"></span><br><br>
        登录密码：<input type="password" id="upassword" width="20px" onblur="checkPassword()"><span id="s_upassword" class="error"></span><br><br>
        确认密码：<input type="password" id="reupassword" width="20px" onblur="checkReupassword()"><span id="s_reupassword" class="error"></span><br><br>
        性&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp别：<input type="radio" name="sex" checked>男<input type="radio" name="sex">女<br><br>                                      
        年&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp龄：<input type="text" id="age" width="20px" onblur="checkAge()"><span id="s_age" class="error"></span><br><br>
        手机号码：<input type="text" id="phone" width="20px" onblur="checkPhone()"><span id="s_phone" class="error"></span><br><br>
        邮&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp箱：<input type="text" id="email" width="20px" onblur="checkEmail()"><span id="s_email" class="error"></span><br><br>
        学&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp历：
        <select name="" id="study" onblur="checkStudy()">
            <option value="0">-请选择-</option>
            <option value="1">大专</option>
            <option value="2">本科</option>
            <option value="3">硕士</option>
        </select><span id="s_study" class="error"></span><br><br>
        <input type="button" value="提交"><br><br>
    </form>
</body>
    <script>
        function checkUname(){
            document.getElementById("s_username").innerHTML="";//这里是为了当发现不正确后，修改正确后能够不显示错误提示信息
            var uname = document.getElementById("uname").value;
            if(uname.match(/^[_0-9a-zA-Z]{6,18}$/) == null){
                document.getElementById("s_username").innerHTML="密码必须是6-18有效字符(字母、数字或下划线)"
            }
        }
        function checkPassword(){
            document.getElementById("s_upassword").innerHTML="";
            var password = document.getElementById("upassword").value;
            if(password.match(/^[0-9a-zA-Z]{6,18}$/) == null){
                document.getElementById("s_upassword").innerHTML="密码长度必须是6-18"
            }
        }
        function checkReupassword(){
            document.getElementById("s_reupassword").innerHTML="";
            var password = document.getElementById("upassword").value;
            var repassword = document.getElementById("reupassword").value;
            if(password != repassword){
                document.getElementById("s_reupassword").innerHTML="两次输入的密码不一致"
            }
        }
        function checkAge(){
            document.getElementById("s_age").innerHTML="";
            var age = document.getElementById("age").value;
            if(age.match(/^[0-9]{1,2}$/) == null){
                document.getElementById("s_age").innerHTML="请输入正确的年龄"
            }
        }
        function checkPhone(){
            document.getElementById("s_phone").innerHTML="";
            var phone = document.getElementById("phone").value;
            if(phone.match(/^[1]+\d{10}$/) == null){
                document.getElementById("s_phone").innerHTML="请输入正确的电话号码"
            }
        }
        function checkEmail(){
            document.getElementById("s_email").innerHTML="";
            var email = document.getElementById("email").value;
            if(email.match(/^\w+@\w+\.\w+$/) == null){
                document.getElementById("s_email").innerHTML="请输入正确的邮箱"
            }
        }
        function checkStudy(){
            document.getElementById("s_study").innerHTML="";
            var study = document.getElementById("study").value;
            if(study==0){
                document.getElementById("s_study").innerHTML="请选择一个"
            }
        }
    </script>
</html>