常见HTML中的事件,onload，onclick，onchange，--Javaweb

最新推荐文章于 2022-12-18 00:05:27 发布

MC6058

最新推荐文章于 2022-12-18 00:05:27 发布

阅读量282

点赞数

分类专栏： Javaweb

本文链接：https://blog.csdn.net/chenzitian6058/article/details/116243565

版权

Javaweb 专栏收录该内容

31 篇文章 0 订阅

订阅专栏

在这里插入图片描述

onload事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        // var patt1 = new RegExp("e");  // 字符串中是否包含字符e
        // var patt1 = /e/; // 也是正则表达式
        // if (patt1.test("abc")) {
        //     alert("yes contains");
        // } else {
        //     alert("no contains!")
        // } // false
        // var str = "abcde";
        // alert(patt1.test(str));  //true
        // var patt = /[abc]/;   // 字符串是否包含a,b,c中的任意一个字符
        // alert(patt.test('12345'));  //false
        // var patt = /[a-z]/;  // 是否包含a-z中的任意一个字符
        // var patt = /^\w{5,12}$/;
        // var patt = /[0-9]/;   // 包含任意数字
        // var patt = /\w/;   // 包含数字，字母，下划线
        // var patt = /a+/;  // 至少包含一个a


    </script>
</head>
<body>

</body>
</html>

onblur事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        function par1() {
            let byId1 = document.getElementById("id1");
            var patt = /^\w{5,12}$/;
            let value1 = byId1.value;
            let byid01 = document.getElementById("id01");
            if (!value1) {
                byid01.innerHTML = "用户名不能为空";
            } else {
                if (patt.test(value1)) {
                    byid01.innerHTML = "输入正确";
                } else {
                    byid01.innerHTML = "输入错误!";
                }
            }

        }
    </script>
    <script type="text/javascript">
        function par2() {
            let byId1 = document.getElementById("id2");
            var patt = /^\w{6,12}$/;
            let value1 = byId1.value;
            let byid01 = document.getElementById("id02");
            if (!value1) {
                byid01.innerHTML = "密码不能为空";
            } else {
                if (patt.test(value1)) {
                    byid01.innerHTML = "输入正确";
                } else {
                    byid01.innerHTML = "输入错误!";
                }
            }

        }
    </script>
    <script type="text/javascript">
        function par3() {
            let byId1 = document.getElementById("id3");
            let byId2 = document.getElementById("id2");
            let byid01 = document.getElementById("id03");
            if ((byId1.value == byId2.value) && byId1.value) {
                byid01.innerHTML = "输入正确";
            } else {
                byid01.innerHTML = "两次密码不一样!";
            }

            if (!byId1.value) {
                byid01.innerHTML = "密码不能为空";
            } else {
                if (byId1.value == byId2.value) {
                    byid01.innerHTML = "输入正确";
                } else {
                    byid01.innerHTML = "两次密码不一样!";
                }
            }
        }
    </script>

</head>
<body>
user_name: <input type="text" id="id1" onblur="par1()"><span id="id01"
                                                             style="color: red; background-color: blue"></span>
<br/>
user_pass:<input type="password" id="id2" onblur="par2()"><span id="id02"
                                                                style="color: red; background-color: blue"></span>
<br/>
once_pass:<input type="password" id="id3" onblur="par3()"><span id="id03"
                                                                style="color: red; background-color: blue"></span>
<br/>
</body>
</html>

onchange事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        function onchangeFun() {
            alert('静态选择改变');
        }
    </script>
    <script type="text/javascript">
        window.onload = function () {
            let elementById = document.getElementById("01");
            elementById.onchange = function () {
                alert('动态选择改变');
            }
        }
    </script>

</head>
<body>
<select onchange="onchangeFun()">
    <option>--please choose your--</option>
    <option>邓紫棋</option>
    <option>鞠婧祎</option>
    <option>刘亦菲</option>
</select>

<select id="01">
    <option>--please choose your--</option>
    <option>子天</option>
    <option>刘德华</option>
    <option>周星驰</option>
</select>
</body>
</html>

onsubmit事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        function onsubmitFun() {
            alert('静态注册发现错误');
            return false;
        }
        window.onload = function() {
            let byId = document.getElementById('01');
            byId.onsubmit = function() {
                alert('动态注册发现错误');
                return false;
            }
        }
    </script>
</head>
<body>
<form action="http://www.baiduc.om" method="post" onsubmit="return onsubmitFun()">
    <input type="submit" value="静态注册">
</form>
<form action="http://www.baiduc.om" method="post" id="01">
    <input type="submit" value="动态注册" >
</form>

</body>
</html>

MC6058

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
常见HTML中的事件,onload，onclick，onchange，--Javaweb

onload事件<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script type="text/javascript"> // var patt1 = new RegExp("e"); // 字符串中是否包含字符e // var patt1.
复制链接

扫一扫