一个简易的只在网页上注册信息的方法

本文链接：https://blog.youkuaiyun.com/bianyuanfei/article/details/77092924

该博客介绍了一种简单的网页用户注册信息的方法，通过JavaScript实现对象存储和验证功能。用户输入姓名和年龄，当信息完整时，信息将被存储到数组中，并显示注册成功。同时，提供了显示所有注册信息、清空注册信息和隐藏提示信息的功能。

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

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        .bg{ font-size:13px;color:red;}       /*用于提示文字的效果*/
    </style>
    <script type="text/javascript">
        var arr=[];     //把对象存到数组里。
        function people(text1,text2){        //如果想创建多个对象，需要使用构造函数.  封装一个方法
            this.name=text1;
            this.age=text2;
        }
        function zhuce(){
            var text1=document.getElementById("text1");
            var span1=document.getElementById("span1");
            var text2=document.getElementById("text2");
            var span2=document.getElementById("span2");
            var show=document.getElementById("show");
            if(text1.value==""){                        当输入内容为空时，点击注册的时候，span显示提示文字
                span1.innerHTML="*请输入姓名";
                span1.className="bg";
            }else if(text2.value==""){
                span2.innerHTML="*请输入年龄";
                span2.className="bg";
            }else {                                        //姓名年龄都不为空，符合要求后才能注册信息到数组中
                var gong=document.getElementById("gong");
                var p=new people(text1.value,text2.value);//传参，也可以p.name=...   .  p.age=...
                arr.push(p);  //把对象存进数组里面
                gong.innerHTML="一共有（"+arr.length+"）人注册成功";
                text1.value="";
                text2.value="";
//                show.style.display="block";  //页面弹出框（提示注册成功）
            }
            text1.οnfοcus=function(){ //空内容不合格时，点完注册后，再去输入内容时，span里面不提示
               span1.innerHTML="";
            }
            text2.οnfοcus=function(){
                span2.innerHTML="";
            }
            xinxi.style.display="none";
        }
        function guanbi(){            //关闭注册成功的弹出框
            var show=document.getElementById("show");
            show.style.display="none";
        }
        function xianshi(){
            var xinxi=document.getElementById("xinxi");
            xinxi.style.display="block";
            xinxi.innerHTML="";
            if(arr.length>=1){
                for(var i=0;i<arr.length;i++){
                    xinxi.innerHTML=xinxi.innerHTML+"姓名:"+arr[i].name+" "+"年龄:"+arr[i].age+"<br>";
                }
            }else {
                xinxi.innerHTml="无人注册";
            }
        }
        function qingkong (){
            arr=[];
            gong.innerHTML="一共有"+arr.length+"人注册成功";
            var gong=document.getElementById("gong");
            var xinxi=innerHTML="";
        }
        function qingping(){
            var xinxi=document.getElementById("xinxi");
            xinxi.innerHTML="";
        }
    </script>
</head>
<body>
    <span id="xinxi" style="display:none;"></span>
    <span id="gong">一共有（0）人注册成功</span><br>
        姓名:<input type="text" id="text1" >
        <span id="span1"></span><br>
        年龄:<input type="text" id="text2" >
        <span id="span2"></span>
    <br>

        <div style="display:none;" id="show">
            <div style="width:100%;height:100%;position:absolute;left:0;top:0;background:rgba(0,0,0,.5);"></div>
            <div style="width:200px;height:100px;text-align:center; background:white;margin-left:-100px;margin-top:-50px;position:absolute;left:50%;top:50%"><span style="line-height:100px" >注册成功</span> <span style="float:right;font-size:40px;" οnclick="guanbi()"><b>×</b></span></div>
        </div>
        <input type="button" value="注册" οnclick="zhuce()">
        <input type="button" value="显示" οnclick="xianshi()">
        <input type="button" value="清空" οnclick="qingkong()">
        <input type="button" value="清屏" οnclick="qingping()">


</body>
</html>