简易注册实验

最新推荐文章于 2024-05-21 19:09:41 发布

岸玉

最新推荐文章于 2024-05-21 19:09:41 发布

阅读量217

点赞数 1

分类专栏：实验文章标签： javascript css html

本文链接：https://blog.csdn.net/weixin_47198589/article/details/109129857

版权

实验专栏收录该内容

1 篇文章 0 订阅

订阅专栏

最终效果如图：

此图为最终效果

注意：

1、此实验用form中的table写比较好排版。

2、要使按提交按钮后依然停留在原网页：

form标签里用return check(); 而不是check();
JS里相应要return false;
如图：

<form action="https://www.baidu.com/" method="post" onsubmit="return check();">

if(document.getElementById("name").value===''){
        alert("用户名不能为空！");
        document.getElementById("name").focus();
        return false;
    }

3、每次错误只有一个弹出：

用.focus();

document.getElementById("name").focus();

4、标题栏渐变代码：

.biaoti{
background-image: linear-gradient(to right,white,powderblue);
}

遇见的玄学：

1、只能这样写，不能自己定义一个变量出来（如;var a=document.getElementById(“name”).value），我也不晓得为什么QAQ.

if(document.getElementById("name").value==='')

2、不能.getElementByName()只能用.getElementById().
（最后不得不把HTML里所有的name改成idQAQ）

全部代码
以下为HTML：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>实验四副本</title>
    <link href="实验四副本.css" rel="stylesheet" type="text/css">
    <script type="text/javascript" src="实验四副本.js"></script>
</head>
<body>
    <form action="https://www.baidu.com/" method="post" onsubmit="return check();">
        <table>
        <div class="biaoti">
            <div class="box"><img src="实验4.png" alt=""></div>
                    <h1>中国人发邮件用中国网邮箱</h1>
                    <div style="text-align: center;"><strong style="color: crimson">china.con.cn</strong></div>
        </div>
            <td colspan="2" class="xiaobiao">
                新用户申请 (带<span>*</span>的为必填选项)
            </td>
            <tr>
                <td>
                    &emsp;&emsp;&emsp;用户名&emsp;<label for="name"></label><input type="text" id="name" name="name">&emsp;<span>*</span>
                </td>
                <td>
                    &emsp;真实姓名&emsp;<label for="rna"></label><input type="text" id="rna" name="rna">&emsp;<span>*</span>
                </td>
            </tr>
            <tr>
                <td>
                    &emsp;&emsp;&emsp;&emsp;密码&emsp;<label for="password"></label><input type="text" id="password" name="password">&emsp;<span>*</span>
                </td>
                <td>
                    &emsp;&emsp;&emsp;性别&emsp;
                    <label>
                        <input type="radio" name="sex" checked="checked">
                    </label>女
                    <label>
                        <input type="radio" name="sex">
                    </label>男
                </td>
            </tr>
            <tr>
                <td>
                    &emsp;&emsp;确认密码&emsp;<label for="sur"></label><input type="text" id="sur" name="sur">&emsp;<span>*</span>
                </td>
                <td>
                    &emsp;&emsp;&emsp;省/市&emsp;
                    <label>
                        <select name="region">
                            <option value="" selected="selected">北京</option>
                            <option value="1">天津</option>
                            <option value="2">上海</option>
                            <option value="3">长沙</option>
                        </select>
                    </label>
                </td>
            </tr>
            <tr>
                <td>
                    &emsp;&emsp;&emsp;验证码&emsp;<label>
                    <input type="text" name="code">
                </label>
                </td>
                <td>
                    &emsp;&emsp;&emsp;地址&emsp;<label>
                    <input type="text" name="address">
                </label>
                </td>
            </tr>
            <tr>
                <td>
                    密码提示问题&emsp;<label for="que"></label><input type="text" id="que" name="que">&emsp;<span>*</span>
                </td>
                <td>
                    &emsp;邮政编码&emsp;<label>
                    <input type="text" name="address">
                </label>
                </td>
            </tr>
            <tr>
                <td>
                    &emsp;问题的答案&emsp;<label for="ans"></label><input type="text" id="ans" name="ans">&emsp;<span>*</span>
                </td>
                <td>
                    &emsp;&emsp;&emsp;生日&emsp;<label>
                    <input type="date" name="date" >
                </label>
                </td>
            </tr>
            <tr>
                <td>
                    &emsp;&emsp;电子邮箱&emsp;<label>
                    <input type="text" id="email" name="email">
                </label>
                </td>
                <td>
                    身份证号码&emsp;<label>
                    <input type="text" id="crd" name="crd">
                </label>
                </td>
            </tr>
            <tr>
                <td>
                    &emsp;&emsp;手机号码&emsp;<label>
                    <input type="text" id="tel" name="tel">
                </label>
                </td>
                <td>
                    &emsp;联系电话&emsp;<label>
                    <input type="text" id="tel2" name="tel2">
                </label>
                </td>
            </tr>
            <tr>
                <th colspan="2">
                    <input type="submit" class="new_button">
                    <input type="reset" class="new_button">
                </th>
            </tr>
        </table>
    </form>
</body>
</html>

以下为CSS：

table{
    width: 700px;
    margin: 0 auto;
    background-color: rgb(243,248,251);
    padding: 0;
}
table tr{
    width: 700px;
    height: 50px;
}
table tr td{
    padding-left: 20px;
}
h1{
    margin: 20px 20px 0 20px;
}
span{
    color: crimson;
}
.box{
    position: absolute;
    left: 55%;
    margin-top: -15px;
}
.xiaobiao{
    text-align: center;
}
.biaoti{
    width: 698px;
    margin: 0 auto;
    border: 2px solid black;
    background-image: linear-gradient(to right,white,powderblue);
}
.new_button{
    margin: 20px 20px 20px 30px;
}

以下为JS：

function check() {
    if(document.getElementById("name").value===''){
        alert("用户名不能为空！");
        document.getElementById("name").focus();
        return false;
    }
    if(document.getElementById("rna").value===''){
        alert("真实姓名不能为空！");
        document.getElementById("rna").focus();
        return false;
    }
    if(document.getElementById("password").value===''){
        alert("密码不能为空！");
        document.getElementById("password").focus();
        return false;
    }
    if(document.getElementById("sur").value===''){
        alert("确认密码不能为空！");
        document.getElementById("sur").focus();
        return false;
    }
    if(document.getElementById("que").value===''){
        alert("真实姓名不能为空！");
        document.getElementById("que").focus();
        return false;
    }
    if(document.getElementById("ans").value===''){
        alert("真实姓名不能为空！");
        document.getElementById("ans").focus();
        return false;
    }

    //密码相同验证
    if(document.getElementById("password").value!==document.getElementById("sur").value){
        alert("两次输入的密码要一致！");
        document.getElementById("password").focus();
        return false;
    }

    //邮箱验证
    var email=document.getElementById("email").value;
    var reg3=/^\w+((.\w+)|(-\w+))@[A-Za-z0-9]+((.|-)[A-Za-z0-9]+).[A-Za-z0-9]+$/
    if(!reg3.test(email)){
        alert("邮箱格式不正确！")
        document.getElementById("email").focus();
        return false;
    }

    //长度验证
    var tel=document.getElementById("tel").value;
    var crd=document.getElementById("crd").value;
    if(tel.length!==11){
        alert("手机号码长度不正确！")
        document.getElementById("tel").focus();
        return false;
    }
    if(crd.length!==18){
        alert("身份证号码长度不正确！")
        document.getElementById("crd").focus();
        return false;
    }

    //手机号正确性验证
    var reg2=/^1[34578]\d{9}$/;
    if(!reg2.test(tel)){
        alert("手机号不正确！");
        document.getElementById("tel").focus();
        return false;
    }
}

岸玉

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
2
评论
简易注册实验

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>实验四副本</title> <link href="实验四副本.css" rel="stylesheet" type="text/css"> <script type="text/javascript" src="实验四副本.js"><.
复制链接

扫一扫