寒假集训D15 Demo 注册表单提交

最新推荐文章于 2024-09-04 20:18:34 发布

码上奉先

最新推荐文章于 2024-09-04 20:18:34 发布

阅读量54

点赞数

文章标签： javascript 前端 css

本文链接：https://blog.csdn.net/intmain404/article/details/128721031

版权

该文章描述了一个注册表单的设计，包括昵称、姓名、QQ、手机号、邮箱和密码等字段，以及使用JavaScript进行的表单验证。当用户点击输入框时，提示文字会消失，点击提交和重置按钮会有提示。在表单提交时，会对输入内容进行合理性验证，如昵称、姓名的长度，QQ号、手机号的格式，以及密码的复杂度要求。

摘要由CSDN通过智能技术生成

题目需求：

1.表单需包含昵称、姓名、QQ、手机号、邮箱、密码、确认密码以及提交和重置按钮；
2.点击表单里的输入框，隐藏提示文字；
3.点击提交和重置按钮时，都需要有相应的提示；
4.在表单提交是，需要进行验证验证填写内容是否合理：昵称不超过10个字、姓名不超过4个字、QQ号为长度小于等于10大于5位的数字、手机号为长度11位的数字、密码由字母和数字组成且大于8位小于16位、密码和确认密码需相同。

演示：

注册表单

body部分：

<body>
    <div class="dan_content">
        <form action="">
        <span class="first"><strong>注册表单</strong></span>
        <div class="inner"><span>昵称：</span><input type="text" placeholder="请输入昵称" maxlength="10"></div>
        <div class="inner"><span>姓名：</span><input type="text" placeholder="请输入姓名" maxlength="4"></div>
        <div class="inner"><span>QQ ：</span><input type="text" placeholder="请输入QQ" minlength="6" maxlength="10"></div>
        <div class="inner"><span>手机号：</span><input type="tel" placeholder="请输入手机号" maxlength="11" minlength="11"></div>
        <div class="inner"><span>邮箱：</span><input type="email" placeholder="请输入邮箱"></div>
        <div class="inner"><span>密码：</span><input type="password" placeholder="请输入密码" minlength="8" maxlength="16" ></div>
        <div class="inner" ><span>确认密码：</span><input type="password" placeholder="请确认密码" minlength="8" maxlength="16"></div>
        <input class="btn" type="submit" id="btn1">
        <input class="btn" id="btn2" type="reset">
        </form>
    </div>

css部分：

<style>
        *{
            margin: 0;
            padding: 0;
        }
        .dan_content{
            width: 350px;
            height: 420px;
            margin: 100px auto;
            border: 1px solid black;
            background-color: cyan;
            border-radius: 15px;
        }
        .dan_content div{
            padding: 10px ;
            outline: none;
        }
        .first{
            margin: 2px 145px;
        }
        .dan_content div input{
            outline: none;
            width: 150px;
            height: 25px;
            border: 1px solid black;
            border-radius: 5px;
            padding-left: 10px;
        }
        .dan_content span{
            display: inline-block;
            width: 80px;
        }
        #btn1{
            margin: 10px 90px;
            width: 60px;
            height: 30px;
        }
        #btn2{
            width: 60px;
            height: 30px;
            margin: 10px -55px;
        }
    </style>

JavaScript部分：

<script>   
        //填充内容
        let pass =document.querySelectorAll(".inner input")
            for(let i in pass){
                pass[i].onfocus=function(){
                pass[i].placeholder=" "
                //输入内容后保持清除
            }
        }
        //设置提交
        let btn1=document.getElementById("btn1")
            btn1.onclick=function(){
                alert("确定提交？")
            }
        //设置重置
        let btn2=document.getElementById("btn2")
            btn2.onclick=function(){
            alert("确定重置？")
            }
    //点击提交和重置后的提示
        function fn(){
            if(putk[6].value===" "){
                alert("请输入密码");
            return false;
        }
            if(pass[7].value!==c2.value){
                alert("两次密码不同请重新输入")
            return false
                }else{
            return true
                }
        }
        //全部填充
        pass[7].onblur=fn()
        btn1.onclick=fn()
    
</script>