demo9-CSDN博客

本文链接：https://blog.csdn.net/weixin_73696461/article/details/128664885

该文展示了一个HTML注册表单的设计，包括昵称、姓名、QQ、手机号、邮箱、密码等字段，并使用JavaScript实现输入验证，如昵称、姓名、QQ号、手机号、邮箱和密码的格式检查，以及密码确认。同时，表单的输入框在聚焦时隐藏提示文字，失去焦点时恢复，提交和重置按钮也有相应的功能处理。

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

demo9

注册表单提交
要求：
1.表单包含昵称、姓名、QQ、手机号、部箱、密码、确认密码以及提交和重直按钮；
2.点击表单里的输入框，隐藏提示文字；
3.点击提交和重直按钮时，都需要有相应的提示；
4.在表单提交是，需要进行验证验证填写内容是否合理：昵称不超过10个字、姓名不超过4个字、QQ号为长度小于等于10大于5位的数字、手机号为长度11位的数字、密码由字母和数字组成且大于8位小于16位、密码和确认密码需相同。
思路：
1.先创建表单
2.给每一个input标签添加placeholder，然后遍历每一个绑定onfocus事件，触发事件时将placeholder的内容清空，再绑定onblur事件，使得每一个的placeholder再次恢复
3.用正则表达式判断输入是否合法，定义一个flag当一个条件达到时，flag自增，当达到一定数量时才能注册成功。
4.再给两个按钮分别绑定事件，当confirm确定时进行以下操作，当点击重置按钮时清空input的value以达到重置效果。

<!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>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        body{
            display: flex;
            flex-direction: row;
            justify-content: center;
            align-items: center;
        }
        #table{
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            width: 400px;
            height: 400px;
            border: 1px solid #000;
        }
        input{
            float: right;
        }
        #submit{
            width: 50px;
            height: 20px;
            line-height: 16px;
            font-size: 16px;
            margin-top: 40px;
            float: left;
        }
        #reset{
            width: 50px;
            height: 20px;
            line-height: 16px;
            font-size: 16px;
            margin-top: 40px;
            float: right;
        }
    </style>
</head>
<body>
    <table id="table">
        <tr>
            <td>昵称：<input type="search" id="sename" placeholder="请输入"></td>
         </tr>
        <tr>
           <td>姓名：<input type="search" id="name" placeholder="请输入"></td>
        </tr>
        <tr>
            <td>QQ：<input type="search" id="QQ" placeholder="请输入"></td>
        </tr>
        <tr>
            <td>手机号：<input type="search" id="telenum" placeholder="请输入"></td>
        </tr>
        <tr>
            <td>邮箱：<input type="search" id="email" placeholder="请输入"></td>
        </tr>
        <tr>
            <td>密码：<input type="password" id="password" placeholder="请输入"></td>
        </tr>
        <tr>
            <td>确认密码：<input type="password" id="password2" placeholder="请输入"></td>
        </tr>
        <tr>
            <td><button id="submit">提交</button><button id="reset" placeholder="请输入">重置</button></td>
        </tr>
    </table>
    <script>
        function Get(obj){
            return document.getElementById(obj).value;
        }
        var inputarr=document.getElementsByTagName("input");
        var reset=document.getElementById("reset");
        var submit=document.getElementById("submit");
        for(let i=0;i<inputarr.length;i++){
            inputarr[i].onfocus=function(){
                for(let j=0;j<inputarr.length;j++){
                    inputarr[j].placeholder="请输入";
                }
                this.placeholder="";
            }
            inputarr[i].onblur=function(){
                this.placeholder="请输入"
            }
        }
        
        submit.onclick=function(){
            if(confirm("是否确定？")){
                var reg1=/^[\u4e00-\u9fa5]{1,4}/;//xingm
                var reg2=/[a-zA-Z0-9]{1,10}/;//nic
                var reg3=/^1[3-9][0-9]{9}$/;//sjh
                var reg4=/[a-zA-Z0-9]{8,16}/;//mm
                var reg5=/[0-9]{5,10}/;//qq
                let flag=0;
                if(reg1.test(Get("name"))){
                    flag++;
                    console.log(1);
                }
                if(reg2.test(Get("sename"))){
                    flag++
                    console.log(2);
                }
                if(reg3.test(Get("telenum"))){
                    flag++
                    console.log(3);
                }
                if(reg4.test(Get("password"))){
                    flag++
                    console.log(4);
                }
                if(reg5.test(Get("QQ"))){
                    flag++
                    console.log(5);
                }
                if(Get("password")==Get("password2")){
                    flag++
                    console.log(6);
                }
                if(flag==6){
                    alert("注册成功!");
                }
                else{
                    alert("注册失败");
                }

            }

        }
        reset.onclick=function(){
                if(confirm("确定重置吗？")){
                var nameva=document.getElementById("name");
                var senameva=document.getElementById("sename");
                var telenumva=document.getElementById("telenum");
                var QQva=document.getElementById("QQ");
                var emailva=document.getElementById("email");
                var passwordva=document.getElementById("password");
                var password2va=document.getElementById("password2");
                nameva.value="";![在这里插入图片描述](https://img-blog.csdnimg.cn/665aa90e2ac947feb1b34da7f5a01e51.gif#pic_center)

                senameva.value="";
                telenumva.value="";
                QQva.value="";
                emailva.value="";
                passwordva.value="";
                password2va.value="";
                }
            }
        
    </script>
</body>
</html>