Web实验十二 JavaScript事件

嚣张路过的王小明

已于 2023-11-27 21:28:19 修改

阅读量283

点赞数 1

文章标签： html5 javascript css3

于 2023-11-27 21:27:19 首次发布

本文链接：https://blog.csdn.net/qq_70494538/article/details/134654963

版权

问题描述

一、实验目的：

1、了解JavaScript事件类型。

2、利用表单的提交及重置事件对表单的数据进行校验。

3、掌握表单事件、鼠标事件、键盘事件、窗口事件处理程序的调用方法。

二、实验内容：

1、完成以下效果的网页设计：

初始化网页如下：

2、要求如下

1）页面刷新时，用户名对应的文本框自动获得焦点，并且当用户名输入值长度小于6个字符时，提示“用户名长度太短，至少6个字符！！“。当输入长度大于等于6个字符，则立即清除提示。注意，提示信息在文本框的右边显示，并且不改变原有元素的位置。

2）当设置密码为空时，提示请设置密码。不为空则立即清除提示。

3）当确认密码与设置密码不一致时，请提示密码不一致。密码一致则立即清除提示。

4)点击提交按钮后，会校验用户名是否符合要求，确认密码与设置密码是否一致。若不一致，则不允许提交表单，且显示校验失败的提示信息和以警告框的方式显示“注册信息不符合要求，不允许提交表单！！！”。若一致，则提交表单。

解决方案：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表单提交控制</title>
</head>
<style>
    .name{
        padding-left: 16px;
    }
    body{ 
        display: flex;
        justify-content: center;
        padding-left: 17%;
     } 
    .button{
        margin-left: 130px;
    }
   
</style>
<body>
    <div>
        <form id="myForm">
        <div class="name">
            <span>用户名：</span><input type="text" id="name" onblur="selectname()" autofocus>
             <span style="visibility: hidden" id="tishi1">用户名长度太短，至少6个字符！！</span><br>
        </div>
    设置密码：<input type="text" id="pwd" onblur="selectpwd()">
    <span style="visibility: hidden" id="tishi2">密码不能为空</span><br>
    确认密码：<input type="text" id="pwd2" onblur="selectpwd2()">
    <span style="visibility: hidden" id="tishi3">密码不一致</span><br>
    <input class="button" type="button" value="提交" onclick="submitinfo();">
    <!-- <button type="submit">提交</button> -->
</form>
</div>
</body>
<script>
   
    function selectname() {
        var x = document.getElementById("name");
        var y=document.getElementById('name').value.length;
        var z = document.getElementById("tishi1");
        if(y<6){
            //显示
            z.style.visibility = 'visible'; 
        }else{
            //隐藏
            z.style.visibility = 'hidden'; 
        }
			
    }
    function selectpwd() {
        var x = document.getElementById("pwd");
        var y=document.getElementById('pwd').value.length;
        var z = document.getElementById("tishi2");
        if(y==0){
            //显示
            z.style.visibility = 'visible';
        }else{
            //隐藏
            z.style.visibility = 'hidden';
        }
			
    }
    function selectpwd2() {
        var x1 = document.getElementById("pwd2").value;
        var x2 = document.getElementById("pwd").value;
        var z = document.getElementById("tishi3");
        if(x1!=x2){
            //显示
            z.style.visibility = 'visible'
        }else{
            //隐藏
            z.style.visibility = 'hidden';
        }
			
    }
    function submitinfo(){
        var a = document.getElementById('name').value.length;
        var b = document.getElementById('pwd').value.length;
        var c1 = document.getElementById("pwd2").value;
        var c2 = document.getElementById("pwd").value;
        if(a<6 || b==0 || c1!=c2){
            alert("注册信息不符合要求，不允许提交表单！！！");
        }
        else{
            var form = document.getElementById("myForm");
             form.submit();
             alert("提交成功");
        }
}  
</script>
</html>

嚣张路过的王小明

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
2
评论
Web实验十二 JavaScript事件

1）页面刷新时，用户名对应的文本框自动获得焦点，并且当用户名输入值长度小于6个字符时，提示“用户名长度太短，至少6个字符！当输入长度大于等于6个字符，则立即清除提示。注意，提示信息在文本框的右边显示，并且不改变原有元素的位置。若不一致，则不允许提交表单，且显示校验失败的提示信息和以警告框的方式显示“注册信息不符合要求，不允许提交表单！3）当确认密码与设置密码不一致时，请提示密码不一致。3、掌握表单事件、鼠标事件、键盘事件、窗口事件处理程序的调用方法。2、利用表单的提交及重置事件对表单的数据进行校验。
复制链接

扫一扫