前端实验三--JavaScript基础及数据验证

最新推荐文章于 2023-11-10 09:58:07 发布

连箬

最新推荐文章于 2023-11-10 09:58:07 发布

阅读量197

点赞数 1

分类专栏：前端文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/newY6/article/details/130296897

版权

前端专栏收录该内容

6 篇文章 0 订阅

订阅专栏

该代码示例展示了手机网页注册界面的HTML、CSS和JavaScript实现，包括对用户名、手机号、密码、确认密码和验证码的验证。手机号验证使用正则表达式，确保格式正确，同时检查验证码是否匹配。当表单提交时，会触发各字段的验证函数，确保所有信息有效。

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

实现效果

动作	条件	异常信息	No.
点击注册	用户名为空	用户名不能为空	1
	手机号为空	手机号不能为空	2
	手机号不符合规则（正则表达式验证）	手机号不正确	3
	密码为空	密码不能为空	4
	确认密码为空	确认密码不能为空	5
	密码和确认密码不相等	两次输入密码不一致	6
	验证码为空	验证码不能为空	7
	验证码不等于123456	验证码不正确	8
点击验证码	手机号为空	手机号不能为空	9
点击验证码	手机号不符合规则（正则表达式验证）	手机号不正确	10

注册界面代码实现

HTML文件

<!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, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <link rel="stylesheet" href="main.css">
    <title>实验二-手机网页</title>
</head>

<body>
    <!-- 头部导航栏 -->
    <header>
        <div class="back">
            <img src="img/sub_back.png" alt="">
        </div>
        <div class="tab">
            <p>用户注册</p>
        </div>
        <div class="more">
            <img src="img/sub_more.png" alt="">
        </div>
    </header>
    <!-- 注册界面 -->
    <section class="login">
        <form method="post" action="index.html"  onSubmit="return checkForm()">
            <ul class="sub">
                <li>
                    <label>用户名</label>
                    <input type="text" placeholder="请输入用户名" id="username" class="list-input" name="user" onblur="checkUserName()">
                </li>
                <li>
                    <p>手机号</p>
                    <input type="tel" placeholder="请输入手机号码" id="userPhone" name="phon" class="yanz">
                    <input type="number" placeholder="请输入验证码" id="yanznum" class="put" style="display: none;">
                    <button class="fas" id="fasnumber" onclick="checkPhone()">发送验证码</button>
                </li>

                <li>
                    <label>密码</label>
                    <input type="password" placeholder="请输入密码" id="password" name="passwd" class="list-input" onblur="checkPassword()"
                        onchange="checkPassword()">
                </li>
                <li>
                    <label>确认密码</label>
                    <input type="password" placeholder="请再次输入密码" id="repassword" class="list-input"
                        onblur="ConfirmPassword()" onchange="ConfirmPassword()">
                </li>
            </ul>

            <div id="errorArea" style="display:none;"></div>
            <button type="submit" id="loginBtn" class="login-button">注册</button>
            <div class="change">
                <div class="cleft">
                    <p>已有账号</p>
                </div>
                <div class="cright">
                    <p>更换手机号</p>
                </div>
            </div>
            <script type="text/javascript" src="login.js"></script>
        </form>
    </section>

</body>

</html>

CSS文件

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

a {
    color: #333;
    text-decoration: none;
}

img {
    vertical-align: middle;
    width: 100%;
    height: 100%;
}

/* 头部导航栏 */
header {
    position: fixed;
    position: relative;
    left: 0;
    top: 0;
    width: 100%;
    height: 3.75rem;
    background-color: rgb(230, 109, 5);
}


.back img {
    position: absolute;
    top: .75rem;
    left: .75rem;
    width: 2.5rem;
    height: 2.5rem;
}

.more {
    position: absolute;
    right: 0;
    top: .75rem;
    height: 2.5rem;
    width: 2.5rem;
}
.tab {
    position: absolute;
    width: 80%;
    height: 3.75rem;
    left: 3.75rem;
    color: #fff;
    text-align: center;
    line-height: 3.75rem;
    font-size: 1.625rem;
}

/* 中间注册界面 */
section {
    clear: both;
}
.sub {
    list-style: none;
}
.sub li {
    float: left;
    margin: .375rem auto;
    width: 100%;
    height: 2.5rem;
}
.sub li label {
    float: left;
    font-size: 1rem;
    width: 5rem;
    margin: .625rem;
}

.sub li p {
    float: left;
    font-size: 1rem;
    width: 5rem;
    margin: .625rem;
}

.sub li .yanz{
    z-index: 2;
    float: left;
    width: 30%;
    height: 1.875rem;
    margin: .3125rem;
    font-size: 1.05rem;
    border: none;
    border-bottom: .0625rem solid rgb(202, 202, 202);
}
.sub li .list-input {
    float: left;
    width: 70%;
    height: 1.875rem;
    margin: .3125rem;
    font-size: 1.05rem;
    border: none;
    border-bottom: .0625rem solid rgb(202, 202, 202);
}
.sub li .fas{
    float: left;
    width: 30%;
    height: 1.875rem;
    font-size: 0.75rem;
    color: rgb(235, 140, 73);
    margin-left: 5%;
    border: none;
}
.sub li .put{
    float: left;
    width: 30%;
    height: 1.875rem;
    font-size: 0.75rem;
    color: rgb(235, 140, 73);
    margin-left: 5%;
}
.login-button {
    float: left;
    width: 90%;
    height: 2.7rem;
    line-height: 2.7rem;
    margin: 1.25rem 5%;
    border: none;
    background-color: rgb(230, 109, 5);
    color: #fff;
    font-size: 1.25rem;
}
.change .cleft p {
    float: left;
    margin-left: 5%;
    color: rgb(176, 173, 173);
}
.change .cright p {
    float: right;
    margin-right: 5%;
    color: rgb(176, 173, 173);
}

#errorArea {
    float: left;
    font-size: large;
    width: 80%;
    height: 2.5rem;
    color: red;
    text-align: center;
    margin: 0 10%;
}

JS验证实现

var userphone = document.getElementById('userPhone');
var errorArea = document.getElementById('errorArea');
var pattern = /^1[34578]\d{9}$/; //验证手机号正则表达式
var yanNumber = document.getElementById('yanznum');
var fasNumber = document.getElementById('fasnumber');


function checkPhone() {
    if (userphone.value.length == 0) {
        errorArea.innerHTML = "手机号不能为空"
        errorArea.style.display = "block";
        fasNumber.style.display = "block";
        yanNumber.style.display = "none";
        return false;
    }
    if (!pattern.test(userphone.value)) {
        errorArea.innerHTML = "请输入正确手机号码"
        errorArea.style.display = "block";
        fasNumber.style.display = "block";
        yanNumber.style.display = "none";
        return false;
    }
    else {
        errorArea.style.display = "none";
        fasNumber.style.display = "none";
        yanNumber.style.display = "block";
        if (yanNumber.value.length == 0) {
            errorArea.innerHTML = "验证码不能为空"
            errorArea.style.display = "block";
            return false;
        }
        if (yanNumber.value != '123456') {
            errorArea.innerHTML = "验证码错误！"
            errorArea.style.display = "block";
            return false;
        }
        else {
            errorArea.style.display = "none";
            return true;
        }
    }
}
//验证用户名  
var username = document.getElementById('username');
function checkUserName() {

    if (username.value.length == 0) {
        errorArea.innerText = "用户名不能为空"
        errorArea.style.display = "block";
        return false;
    }
    else {
        errorArea.style.display = "none";
        return true;
    }
}
var userpasswd = document.getElementById('password');
//验证密码   
function checkPassword() {

    var pattern = /^\w{4,8}$/; //密码要在4-8位 
    if (userpasswd.value.length == 0) {
        errorArea.innerHTML = "密码不能为空";
        errorArea.style.display = "block";
        return false;
    }
    if (!pattern.test(userpasswd.value)) {
        errorArea.innerHTML = "密码要在4-8位"
        errorArea.style.display = "block";
        return false;
    }
    else {
        errorArea.style.display = "none";
        return true;
    }
}
//确认密码 
function ConfirmPassword() {
    var userrepasswd = document.getElementById('repassword');
    if (userrepasswd.value.length == 0) {
        errorArea.innerHTML = "确认密码不能为空"
        errorArea.style.display = "block";
        return false;
    }
    if ((userpasswd.value) != (userrepasswd.value) || userrepasswd.value.length == 0) {
        errorArea.innerHTML = "上下密码不一致"
        errorArea.style.display = "block";
        return false;
    }
    else {
        errorArea.style.display = "none";
        return true;
    }
}

var sub;
function checkForm() {
    var nametip = checkUserName();
    var passtip = checkPassword();
    var conpasstip = ConfirmPassword();
    var phonetip = checkPhone();
    sub = nametip && passtip && conpasstip && phonetip && yantip
    return sub;    
}


var btn = document.getElementById('loginBtn');

btn.onclick = function(){
        alert('已提交注册信息。');
   
}

跳转界面 index文件

HTML：

<!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, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <link rel="stylesheet" href="index.css">
    <title>实验二-手机网页</title>
</head>

<body>
    <!-- 头部导航栏 -->
    <header>
        <div class="back">
            <img src="img/icon.png" alt="">
        </div>
        <div class="tab">
            <input type="text" placeholder="天价锂矿争夺大戏落幕！宁德时代...">
        </div>
        <div class="message">
            <img src="img/message.png" alt="">
        </div>
        <div class="more">
            <img src="img/sub_more.png" alt="">
        </div>
    </header>
    <!-- 浏览页面 -->
    <section>
        <ul>
            <li>
                <img src="img/news01.jpg" alt=""> 
                <p>天价锂矿争夺大戏落幕！宁德时代截胡成功，豪掷超60亿控股斯诺威矿业</p> 
                <span class="come">时代财经</span>
                <span class="time">2023年03月06日 22:42</span>     
            </li>
            <li>
                <img src="img/news02.png" alt=""> 
                <p>茅台再上新，惊蛰节气酒发布！夏系列也在酝酿中……</p> 
                <span class="come">酒业内参</span>
                <span class="time">2023年03月07日 00:02</span>     
            </li>
            <li>
                <img src="img/news03.png" alt=""> 
                <p>超300万人围观！张兰淘宝首秀赢“麻”了？</p> 
                <span class="come">证券时报</span>
                <span class="time">2023年03月07日 00:02</span>     
            </li>
            <li>
                <img src="img/news04.jpg" alt=""> 
                <p>开发供应链、收购美工厂，富士康紧锣密鼓拓展电动车业务</p> 
                <span class="come">环球网</span>
                <span class="time">2023年03月07日 06:38</span>     
            </li>
            <li>
                <img src="img/news05.png" alt=""> 
                <p>成本攀升、增长乏力，低价白酒老村长，会走上高端涨价之路吗？</p> 
                <span class="come">酒业内参</span>
                <span class="time">2023年03月08日 09:37</span>     
            </li>
            <li>
                <img src="img/news06.jpg" alt=""> 
                <p>A股女大佬，你只知道董明珠？316个女董事长14个90后，最小才24岁</p> 
                <span class="come">媒体滚动</span>
                <span class="time">2023年03月08日 13:20</span>     
            </li>
            <li>
                <img src="img/news07.jpg" alt=""> 
                <p>数字经济概念满屏飘红！怎么布局？</p> 
                <span class="come">市场资讯</span>
                <span class="time">2023年03月08日 12:48</span>     
            </li>
            <li>
                <img src="img/news08.jpg" alt=""> 
                <p>中国金融监管体系大变革！机构改革六大举措释放了什么信号</p> 
                <span class="come">澎湃新闻</span>
                <span class="time">2023年03月08日 06:54</span>     
            </li>
            <li>
                <img src="img/news09.png" alt=""> 
                <p>百亿补贴终燃“战火”：京东补贴遭拼多多狙击，阿里承压？</p> 
                <span class="come">新浪科技</span>
                <span class="time">2023年03月08日 08:07</span>     
            </li>
            <li>
                <img src="img/news10.jpg" alt=""> 
                <p>21万汽车降价9万！“史上最强补贴”来袭？这一车企强势涨停！影响有多大</p> 
                <span class="come">市场资讯</span>
                <span class="time">2023年03月08日 01:02</span>     
            </li>
            <li></li>
        </ul>
    </section>
    <!-- 尾部部分 -->
    <footer>
        <div class="fleft"> <img src="img/main_home2.png" alt="">
            <p>首页</p>
        </div>
        <div class="fright"><img src="img/main_config1.png" alt="">
            <p>设置</p>
        </div>
    </footer>
</body>

</html>

CSS:

* {
    margin: 0;
    padding: 0;
    font-family: '宋体';
    box-sizing: border-box;
}

a {
    color: #333;
    text-decoration: none;
}

img {
    vertical-align: middle;
    width: 100%;
    height: 100%;
}

/* 头部导航栏 */
header {
    position: fixed;
    position: relative;
    left: 0;
    top: 0;
    width: 100%;
    height: 3.75rem;
    background-color: rgb(230, 109, 5);
}


.back img {
    position: absolute;
    top: .75rem;
    left: .75rem;
    width: 2.5rem;
    height: 2.5rem;
}

.message img {
    position: absolute;
    right: 2rem;
    top: .75rem;
    height: 2rem;
    width: 2rem;
}

.more img{
    position: absolute;
    right: 0;
    top: .75rem;
    height: 2rem;
    width: 2rem;
}
.tab input{
    position: absolute;
    width: 60%;
    top: 1rem;
    height: 1.75rem;
    left: 4rem;
    color: #fff;
    line-height: 3.75rem;
    text-align: right;
    font-size: 0.75rem;
    border: none;
    border-radius: 45px;
    background-repeat: no-repeat;
    background-image: url(img/search.png);
    background-size: 1rem;
    background-position: .5rem;
}

/* 中间部分 */
section li {
    list-style: none;
    float: left;
    position: relative;
    width: 96%;
    height: 4.25rem;
    margin: 0.25rem 2%;
    border-radius: 0.5rem;
    background-color: rgba(206, 203, 203, 0.297);
}

section li img {
    float: right;
    width: 5.8rem;
    height: 3.6rem;
    margin: 0.35rem 0.7rem;
}

section li p {
    font-size: 0.15rem;
    margin: 0.2rem 0.3rem;
}

section li span {
    color: rgb(160, 157, 157);
}

section li .come {
    position: absolute;
    bottom: 0.2rem;
    left: 0.2rem;
    float: left;
    font-size: 0.15rem;
}

section li .time {
    position: absolute;
    bottom: 0.2rem;
    right: 7.8rem;
    font-size: 0.15rem;
    margin-left: 2.5rem;
}

/* 尾部部分 */
footer {
    position: fixed;
    bottom: 0;
    width: 100%;
    height: 3.75rem;
    background-color: rgb(230, 109, 5);
}
.fleft {
    float: left;
    position: relative;
    margin-left: 5%;
    height: 3.5rem;
    width: 3rem;
    background-color: #fff;
}
.fleft img {
    position: absolute;
    top: 0;
    left: 0.5rem;
    height: 2rem;
    width: 2rem;
}
.fleft p {
    position: absolute;
    bottom: 0.125rem;
    left: 0.6rem;
    font-size: .625rem;
    color: rgb(230, 109, 5);
}
.fright{
    float: right;
    margin-right: 5%;
    position: relative;
    height: 3.5rem;
    width: 3rem;
}
.fright img {
    position: absolute;
    height: 70%;
    width: 70%;
}
.fright p {
    position: absolute;
    bottom: 0.125rem;
    right: 1.2rem;
    font-size: .625rem;
    color: #fff;
}