利用JS实现简单的注册界面验证小案例

最新推荐文章于 2021-06-03 02:28:48 发布

程序员小王1546

最新推荐文章于 2021-06-03 02:28:48 发布

阅读量4.2k

点赞数 4

分类专栏： web前端 JavaScript注册验证文章标签： js html css

本文链接：https://blog.csdn.net/qq_43270112/article/details/108029988

版权

web前端同时被 2 个专栏收录

1 篇文章 0 订阅

订阅专栏

JavaScript注册验证

1 篇文章 0 订阅

订阅专栏

注册界面如下：
在这里插入图片描述

需求说明：
1.手机号必须为11位数字，且不能为空
2.验证码要输入正确
3.名称不能为空
4.密码必须为6~12个字符之间
5.确认密码必须一致
6.服务条框必须勾选

注：若满足以上所有条件，则注册成功，前往新的界面（这里我自己定义跳到百度）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="loginstyle.css">

</head>
<body>

<div id="main">
    <div id="d1">
        <span>手机号：</span><input type="text" id="i1">
    </div>
    <div id="d2">
        <span>图形码：</span><input type="text" id="i2">
        <div id="yanz"></div>
    </div>
    <div id="d3">
        <span>验证码：</span><input type="text" placeholder="请输入手机短信验证码" id="i3">
        <button>获取验证码</button>

    </div>
    <div id="d4">
        <span>名称：</span><input type="text" id="i4">
        <pre class="tip" style="display:inline-block;">你所在社区的名字</pre>
    </div>
    <div id="d5">
        <span>密码：</span><input type="password" id="i5">
        <pre class="tip" style="display:inline-block;">6到16个字符</pre>
    </div>
    <div id="d6">
        <span>确认密码：</span><input type="password" id="i6">
    </div>


</div>

<div id="d7">
    <input type="checkbox" id="gouxuan" }>同意用户服务条框
    <br>
    <br>
    <br>
    <button id="bth" onclick="getValue()">注册</button>
</div>


<script>
    //定义一个相对于以下几个函数的全局变量，来获取每一次网页生成的验证码
    var num;
    //生成一个四位的随机数
    window.onload = function suiRom() {
        var string = "0123456789qwertyuiopasdfghjklzxcvbnmQWERTYUIOPASDFGHJKLZXCVBNM";
        var str = "";
        for (var i = 0; i < 4; i++) {
            str = str + string.charAt(randomNum(0, 61));
        }
        document.getElementById("yanz").innerText = str;
        num = str;
        return str;
    }

    //生成从minNum到maxNum的随机数
    function randomNum(minNum, maxNum) {
        switch (arguments.length) {
            case 1:
                return parseInt(Math.random() * minNum + 1, 10);
                break;
            case 2:
                return parseInt(Math.random() * (maxNum - minNum + 1) + minNum, 10);
                break;
            default:
                return 0;
                break;
        }
    }

    //验证获取所有输入的内容
    function getValue() {

        if (document.getElementById("i1").value.trim().length == 0) {
            alert("账号不能为空");
            return;
        }


        var re = /^1\d{10}$/    //11位手机号的正则表达式
        if (!re.test(document.getElementById("i1").value)) {
            alert("手机号必须为11位数字！")
            return;
        }

        if ((num != document.getElementById("i2").value)) {
            alert('验证码输入有误！！！');
            return;
        }

        if (document.getElementById("i4").value.trim().length == 0) {
            alert('名称不能为空！！！');
            return;
        }

        if (document.getElementById("i5").value.trim().length > 12 || document.getElementById("i5").value.trim().length <= 6) {
            alert('密码不符合要求');
        }

        if (document.getElementById("i5").value != document.getElementById("i6").value) {
            alert('密码不一致');
            return;
        }


        if (!document.getElementById("gouxuan").checked) {
            alert('没有勾选协议');
            return;
        }

        alert('注册成功！！！前往百度');
        window.location = "https://www.baidu.com/";

    }


</script>


</body>
</html>

loginstyle.css样式代码如下：

#main {
    position: relative;
    margin: auto;
    top: 100px;
    width: 500px;
    height: 500px;
    background: white;
    border: #909090 solid 1px;
}

#main > div{
    margin-left: 50px;
    margin-top: 20px;

}

#main > div > span {
    display: inline-block;
    height: 24px;
    width: 100px;
    text-align: center;
    background: #dfdcde;
    border: #909090 solid 1px;
}

#main > div > input {
    width: 200px;
    height: 20px;
    margin: auto;
}


.tip {
    list-style: none;
    color: #909090;
}

#d3 > button {
    background: dodgerblue;
    border: 1px solid white;
    height: 30px;
    color: white;
}

#d7 {
    position: relative;
    margin: auto;
    text-align: center;
    left: -128px;
    top: -60px;
}

#bth{
    position: relative;
    margin: auto;
    text-align: center;
    left: -20px;
    background: dodgerblue;
    border: 1px solid white;
    height: 30px;
    width: 100px;
    color: white;
}

#d2>button{
    display: inline-block;
    height: 30px;
    width: 80px;
}

#yanz{
    float:right;
    position: relative;
    margin: auto;
    height: 40px;
    width: 100px;
    left: -40px;
    background: dodgerblue;
    text-align: center;
    color: black;
}