JavaScript表单验证与图片轮播-优快云博客

本文介绍JavaScript在HTML表单中实现用户名密码验证的方法，包括如何检查字段是否为空及密码长度。此外，还详细讲解了利用JavaScript实现图片轮播效果的技巧，涉及事件绑定、定时器和DOM操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

JavaScript一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。它的解释器被称为JavaScript引擎，为浏览器的一部分，广泛用于客户端的脚本语言，最早是在HTML（标准通用标记语言下的一个应用）网页上使用，用来给HTML网页增加动态功能。

注册表单校验用户名密码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--<style></style>-->
    <!--<link>-->
    <script>


//  *****************************1. 校验用户名是否为空? ***************************
//        需求:
//          1. 判断用户名是否为空?
//          2. 校验密码是否大于6位， 如果不满足则不合法?
        // 定义一个函数
        function checkForm() {
//        1). 获取输入用户名标签提交的内容；
            var user = document.getElementById('username').value;

//        2). if判断用户名是否为空?
//        3). 如果数据合法， 继续执行， 提交表单；
//        4). 如果数据不合法， 不让表单提交? (显示弹出框报错) --- alert
            if (user === '') {
                alert("用户名不能为空!");
                return false;
            }


// ******************************2. 校验密码长度是否小于6 **************************
// 难点: 获取密码长度(http://www.w3school.com.cn/js/js_obj_string.asp)
//            var passwdlen = document.getElementById('passwd').value.length;
            var passwdlen = document.getElementsByName('passwd')[0].value.length;
            if (passwdlen < 6){
                alert("密码不合法: 长度小于6！");
                return false;
            }
        }
    </script>


</head>
<body>

<!--
实现步骤:
    1. 确定事件类型onsubmit(常见事件类型的网址: http://www.w3school.com.cn/js/js_htmldom_events.asp);
    2. 对这个事件绑定一个函数(执行的操作写在函数里面);
    3. 函数的核心功能: 校验用户名是否为空?
        1). 获取输入用户名标签提交的内容；
        2). if判断用户名是否为空?
        3). 如果数据合法， 继续执行， 提交表单；
        4). 如果数据不合法， 不让表单提交? (显示弹出框报错) --- alert


-->
<form action="#" method="get" onsubmit="return checkForm()">
    <!--get: 填写的信息会在url里面显示， 对于重要的数据来说是不安全的；
        post: 填写的信息不会在url里面显示
        -->
    用户名: <input type="text" name="username" placeholder="用户名" id="username"><br/>
    密码: <input type="password" name="passwd" placeholder="密码" id="passwd"><br/>
    <input type="submit" value="注册">


</form>

</body>
</html>

在这里插入图片描述

JS比较两个等号和三个等号

两个等号做比较时，会将字符串转换为整形进行比较

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <script>
        window.onload = function () {
            /*
            var x = 5;
            var y = '5';
            var z = 5;
            alert(x == y);     // 两个等号做比较时， 会将字符串转换为整形进行比较;
            alert(x === y);
            */

            var a =(5 === '5')?'ok': 'not ok';
            alert(a);
        }



    </script>
</head>
<body>





</body>
</html>

在这里插入图片描述

实现图片的切换

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--
    块级元素居中:margin: 0 auto;
    行内元素居中:  text-align: center;
     -->
    <style>
        #sowing_map{
            width: 590px;
            height:500px;
            margin: 0 auto;
            text-align: center;

        }

    </style>


    <script>
        // 1. 定义一个变量， 控制图片的循环顺序;
        var i = 1;
        function  changeImg() {

            // 2. 当点击下一页时， i+1, 这个时候， 图片变成img2;
            i += 1;
            // 3.  修改img标签里面的src属性内容;
            document.getElementById('img').src = 'img/img' + i + '.jpg';

            // 4. 如果图片轮播结束， 从头开始轮播；
            if (i === 6){
                i = 0;
            }
        }

    </script>
</head>
<body>

<!--思路:
    1. 确定事件类型为onclick事件；
    2. 并跟对应的函数changeImg绑定在一起；
    3. 实现函数功能；
        1). 当点击下一页按钮之后， 修改img标签里面的src属性内容;

-->
<div id="sowing_map">
    <img src="img/img1.jpg" id="img">
    <input type="button" value="下一页" onclick="changeImg()">
</div>
</body>
</html>

在这里插入图片描述

轮播图

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--
    块级元素居中:margin: 0 auto;
    行内元素居中:  text-align: center;
     -->
    <style>
        #sowing_map{
            width: 590px;
            height:500px;
            margin: 0 auto;
            text-align: center;

        }
    </style>


    <script>
        window.onload = function () {
            // 每隔1s自动执行某一个函数
            setInterval('changeImg()', 1000);
        };

        // 1. 定义一个变量， 控制图片的循环顺序;
        var i = 1;
        function  changeImg() {

            // 2. 当点击下一页时， i+1, 这个时候， 图片变成img2;
            i += 1;
            // 3.  修改img标签里面的src属性内容;
            document.getElementById('img').src = 'img/img' + i + '.jpg';

            // 4. 如果图片轮播结束， 从头开始轮播；
            if (i === 6){
                i = 0;
            }
        }

    </script>
</head>
<body>

<!--思路:
    1. 确定事件类型为onclick事件；
    2. 并跟对应的函数changeImg绑定在一起；
    3. 实现函数功能；
        1). 当点击下一页按钮之后， 修改img标签里面的src属性内容;

-->
<div id="sowing_map">
    <img src="img/img1.jpg" id="img">
    <!--<input type="button" value="下一页" onclick="changeImg()">-->
</div>
</body>
</html>

轮播图外部引入JS代码和CSS样式

css/main.css:

#sowing_map{
    width: 590px;
    height:500px;
    margin: 0 auto;
    text-align: center;

}

js/main.js:

window.onload = function () {
    // 每隔1s自动执行某一个函数
    setInterval('changeImg()', 1000);

    //每隔1s执行显示广告的函数;
    // 由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。
    //(http://www.w3school.com.cn/jsref/met_win_setinterval.asp)
    // 在js的函数里面。 变量名没有var时， 是一个全局变量;
    adtime = setInterval('showAd()', 1000);

};

// 1. 定义一个变量， 控制图片的循环顺序;
var i = 1;

function changeImg() {

    // 2. 当点击下一页时， i+1, 这个时候， 图片变成img2;
    i += 1;
    // 3.  修改img标签里面的src属性内容;
    document.getElementById('img').src = 'img/img' + i + '.jpg';

    // 4. 如果图片轮播结束， 从头开始轮播；
    if (i === 6) {
        i = 0;
    }
}


// 编写显示隐藏图片的函数
function showAd() {
    // 获取到广告图片对应的标签对象
    var adEle = document.getElementById('ad_img');
    //修改广告图片元素里面的style属性里面的display
    adEle.style.display = 'block';

    // 清除显示图片的定时操作；
    clearInterval(adtime);

    // 设置隐藏广告图片的定时任务；
    hiddentime = setInterval('hiddenAd()', 1000);

}

function hiddenAd() {
    // 获取到广告图片对应的标签对象
    var adEle = document.getElementById('ad_img');
    //修改广告图片元素里面的style属性里面的display
    adEle.style.display = 'none';
    //清除隐藏图片的定时任务;
    clearInterval(hiddentime);
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--
    块级元素居中:margin: 0 auto;
    行内元素居中:  text-align: center;
   Js的引入方式:
        - 内部引入: 直接在head标签里面的<script>写的内容;
        - 外部引入:<script src="js/main.js" ></script
     -->
    <link href="css/main.css" rel="stylesheet">
    <script src="js/main.js" ></script>
</head>
<body>
<!--思路:
    1. 确定事件类型为onclick事件；
    2. 并跟对应的函数changeImg绑定在一起；
    3. 实现函数功能；
        1). 当点击下一页按钮之后， 修改img标签里面的src属性内容;

-->
<div id="sowing_map">
    <img src="img/img1.jpg" id="img">
    <!--<input type="button" value="下一页" onclick="changeImg()">-->
</div>
</body>
</html>

定时弹出广告图片

css/main.css

#sowing_map{
    width: 590px;
    height:500px;
    margin: 0 auto;
    text-align: center;

}


#ad{
    width: 1190px;
    height: 80px;
    margin: 0 auto;
    text-align: center;
}

js/main.js

window.onload = function () {
    // 每隔1s自动执行某一个函数
    setInterval('changeImg()', 3000);

    //每隔1s执行显示广告的函数;
    // 由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。
    //(http://www.w3school.com.cn/jsref/met_win_setinterval.asp)
    // 在js的函数里面。 变量名没有var时， 是一个全局变量;
    adtime = setInterval('showAd()', 1000);

};

// 1. 定义一个变量， 控制图片的循环顺序;
var i = 1;

function changeImg() {

    // 2. 当点击下一页时， i+1, 这个时候， 图片变成img2;
    i += 1;
    // 3.  修改img标签里面的src属性内容;
    document.getElementById('img').src = 'img/img' + i + '.jpg';

    // 4. 如果图片轮播结束， 从头开始轮播；
    if (i === 6) {
        i = 0;
    }
}


// 编写显示隐藏图片的函数
function showAd() {
    // 获取到广告图片对应的标签对象
    var adEle = document.getElementById('ad_img');
    //修改广告图片元素里面的style属性里面的display
    adEle.style.display = 'block';

    // 清除显示图片的定时操作；
    clearInterval(adtime);

    // 设置隐藏广告图片的定时任务；
    hiddentime = setInterval('hiddenAd()', 1000);

}

function hiddenAd() {
    // 获取到广告图片对应的标签对象
    var adEle = document.getElementById('ad_img');
    //修改广告图片元素里面的style属性里面的display
    adEle.style.display = 'none';
    //清除隐藏图片的定时任务;
    clearInterval(hiddentime);
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--
    块级元素居中:margin: 0 auto;
    行内元素居中:  text-align: center;
   Js的引入方式:
        - 内部引入: 直接在head标签里面的<script>写的内容;
        - 外部引入:<script src="js/main.js" ></script
     -->
    <link href="css/main.css" rel="stylesheet">
    <style>
        #sowing_map{
    width: 590px;
    height:500px;
    margin: 0 auto;
    text-align: center;

}


#ad{
    width: 1190px;
    height: 80px;
    margin: 0 auto;
    text-align: center;
}
    </style>
    <script src="js/main.js" ></script>
</head>
<body>

<!--

目标:
    实现网页定时弹出广告， 并定时取消弹出的广告;

步骤:
    1. 在页面设置一个隐藏的图片; style="display: none"
    2. 确定事件类型为onload， 为其绑定一个函数;
    3. 设置定时执行显示图片的函数showAd();
    4. 编写定时任务里面的函数showAd()----
            - 获取标签的样式display=‘block’;
            - 清除显示广告的定时任务;
            - 编写隐藏广告图片的定时任务;

    5. 实现定时任务里面的函数hiddenAd();
        - 获取标签的样式display=‘none’;
        - 清除隐藏广告的定时任务;





-->
<div id="sowing_map">
    <img src="img/img1.jpg" id="img">
    <!--<input type="button" value="下一页" onclick="changeImg()">-->
</div>

<div id="ad">
    <img src="img/img7_ad.jpg" id="ad_img" style="display: none">

</div>
</body>
</html>

在这里插入图片描述

表格全选和全不选

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <script>
        function  checkAll() {

            //1. 获取全选框对象
            var checkAllEle = document.getElementById('checkAll');

//            alert(checkAllEle);
//            //判断该单选框是否被选中，
//            alert(checkAllEle.checked);

            // 2. 对编号前面的复选框的状态进行判断;
            //      - 如果状态为选中， 则设置所有的单选框为选中状态;
            //      - 如果状态为没有选中， 则设置所有的单选框为没有选中状态;
            if (checkAllEle.checked){
                    //- 如果状态为选中， 则设置所有的单选框为选中状态;
                    var checkOnes = document.getElementsByName('checkOne');
                    // 依次遍历所有的单选框， 设置状态为选中;li = [1,2,3,4]
                    for(var i =0; i<checkOnes.length; i++){
                        // li[0] li[1] li[2] li[3]
                        checkOnes[i].checked = true;

                    }
            }else{
                    //- 如果状态为未选中， 则设置所有的单选框为未选中状态;
                    var checkOnes = document.getElementsByName('checkOne');
                    // 依次遍历所有的单选框， 设置状态为选中;li = [1,2,3,4]
                    for(var i =0; i<checkOnes.length; i++){
                        // li[0] li[1] li[2] li[3]
                        checkOnes[i].checked = false;

                    }

            }

        }


    </script>
</head>
<body>


<!--

需求:
    实现批量选中和批量不选中

步骤分析:
    1). 确定事件类型:鼠标单击单选按钮时(onclick事件)， 绑定一个函数；
    2). 编写函数checkAll()
-->

<table style="width: 600px;margin: 0 auto;margin-top: 50px;text-align: center;" border="1px">
    <th style="text-align: center;" colspan="5">
        <input type="button" value="添加">
        <input type="button" value="删除">
    </th>
    <tr>

        <th><input type="checkbox" id="checkAll" onclick="checkAll()"></th>
        <th>编号</th>
        <th>姓名</th>
        <th>性别</th>
        <th>年龄</th>
    </tr>
    <tr>
        <td><input type="checkbox" name="checkOne"></td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
    </tr>
    <tr>
        <td><input type="checkbox" name="checkOne" ></td>
        <td>2</td>
        <td>1</td>
        <td>2</td>
        <td>2</td>
    </tr>
    <tr>
        <td><input type="checkbox" name="checkOne"></td>
        <td>3</td>
        <td>3</td>
        <td>3</td>
        <td>1</td>
    </tr>
    <tr>
        <td><input type="checkbox" name="checkOne"></td>
        <td>4</td>
        <td>4</td>
        <td>1</td>
        <td>4</td>
    </tr>
    <tr>
        <td><input type="checkbox" name="checkOne"></td>
        <td>5</td>
        <td>5</td>
        <td>1</td>
        <td>5</td>
    </tr>
</table>

</body>

在这里插入图片描述