JavaScript 实现注册表单

O_oregou

已于 2023-01-16 21:31:59 修改

阅读量1.2k

点赞数

文章标签： javascript 前端 css

于 2023-01-16 18:47:21 首次发布

本文链接：https://blog.csdn.net/O_osange/article/details/128708147

版权

效果要求：

1.表单需包含昵称、姓名、QQ、手机号、邮箱、密码、确认密码以及提交和重置按钮；

2.点击表单里的输入框，隐藏提示文字；

3.点击提交和重置按钮时，都需要有相应的提示；

4.在表单提交是，需要进行验证验证填写内容是否合理：昵称不超过10个字、姓名不超过4个字、QQ号为长度小于等于10大于5位的数字、手机号为长度11位的数字、密码由字母和数字组成且大于8位小于16位、密码和确认密码需相同。

实现原理：

为每个需要的表单绑定onblur（元素失去焦点时触发的响应函数）

并且在响应函数里面设置相应的正则表达式

代码展示：

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, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./index.css">
</head>
<body>
    <div class="container">
        <form action="">
            <p>昵称</p><input type="text" id="nc" placeholder="请输入十个字以内的昵称">
            <span class="nc">请输入正确的昵称</span>
            <br>
            <p>姓名</p><input type="text" id="xm" placeholder="请输入四个字以内的姓名">
            <span class="xm">请输入正确的姓名</span>
            <br>
            <p>QQ</p><input type="text" id="qq" placeholder="请输入六到十位数字的QQ">
            <span class="qq">请输入正确的QQ</span>
            <br>
            <p>手机号</p><input type="text" id="sjh" placeholder="请输入十一位的手机号">
            <span class="sjh">请输入正确的手机号</span>
            <br>
            <p>邮箱</p><input type="email" id="yx" placeholder="请输入您QQ的邮箱">
            <span class="yx">请输入正确的邮箱</span>
            <br>
            <p>密码</p><input type="password" id="mm" placeholder="密码由字母和数字组成大于八位小于十六位">
            <span class="mm">请输入正确的密码</span>
            <br>
            <p>确认密码</p><input type="password" id="qr" placeholder="输入与上述一致的密码">
            <span class="qr">与上述密码不符</span>
            <br>
            <input type="reset" value="重置" id="cz">
        </form>
        <button id="tj" >提交</button>
    </div>

    <script src="./index.js"></script>
</body>
</html>

css

*{
    margin: 0;
    padding: 0;
}

.container{
    width: 550px;
    min-height: 300px;
    margin: 0 auto;
    margin-top: 100px;
    padding: 0 20px;
    padding-top: 20px;

    background-color: wheat;
    border-radius: 30px;
    position: relative;
}

input{
    outline: none;
    width: 250px;
    margin-left: 20px;
    margin-top: 5px;
    margin-bottom: 5px;
}

input::placeholder{
    font-size: 12px;
}

p{
    display: inline-block;
    width: 100px;
    height: 25px;
    line-height: 25px;
    text-align: center;
    margin-top: 5px;
    margin-bottom: 5px;
}

span{
    font-size: 12px;
    color: red;
    display: none;
}

#cz{
    width: 45px;
    height: 25px;
    text-align: center;
    line-height: 25px;

    position: absolute;
    bottom: 15px;
    left: 25px;
}

#tj{
    width: 45px;
    height: 25px;
    text-align: center;
    line-height: 25px;

    position: absolute;
    bottom: 15px;
    right: 192px;
}

js

var nc = document.getElementById("nc")
var xm = document.getElementById("xm")
var qq = document.getElementById("qq")
var sjh = document.getElementById("sjh")
var yx = document.getElementById("yx")
var mm = document.getElementById("mm")
var qr = document.getElementById("qr")
var cj = document.getElementById("cz")
var tj = document.getElementById("tj")
var btn = document.getElementById("btn")

var pass = 0

nc.onblur = function () {
    var reg1 = /^.{1,10}$/
    var cn2 = document.getElementsByClassName("nc")[0]
    if (reg1.test(nc.value)) {
        cn2.style.display = "none"
        pass = 1
    } else {
        cn2.style.display = "inline"
    }
}

xm.onblur = function () {
    var reg1 = /^[\u4e00-\u9fa5]{1,4}$/
    var xm2 = document.getElementsByClassName("xm")[0]
    if (reg1.test(xm.value)) {
        xm2.style.display = "none"
        pass = 1
    } else {
        xm2.style.display = "inline"
    }
}

qq.onblur = function () {
    var reg1 = /^[1-9][0-9]{5,9}$/
    var qq2 = document.getElementsByClassName("qq")[0]
    if (reg1.test(qq.value)) {
        qq2.style.display = "none"
        pass = 1
    } else {
        qq2.style.display = "inline"
    }
}

sjh.onblur = function () {
    var reg1 = /^1[3456789][0-9]{9}$/
    var sjh2 = document.getElementsByClassName("sjh")[0]
    if (reg1.test(sjh.value)) {
        sjh2.style.display = "none"
        pass = 1
    } else {
        sjh2.style.display = "inline"
    }
}

yx.onblur = function () {
    var reg1 = /^[1-9][0-9]{5,9}(@qq\.com)$/
    var yx2 = document.getElementsByClassName("yx")[0]
    if (reg1.test(yx.value)) {
        yx2.style.display = "none"
        pass = 1
    } else {
        yx2.style.display = "inline"
    }
}

mm.onblur = function () {
    var reg1 = /^[0-9a-zA-Z]{8,16}$/
    var mm2 = document.getElementsByClassName("mm")[0]
    if (reg1.test(mm.value)) {
        mm2.style.display = "none"
        pass = 1
    } else {
        mm2.style.display = "inline"
    }
}

qr.onblur = function () {
    var qr2 = document.getElementsByClassName("qr")[0]
    if (qr.value == mm.value) {
        qr2.style.display = "none"
        pass = 1
    } else {
        qr2.style.display = "inline"
    }
}

tj.onclick = function () {
    if (pass == 0) {
        alert("请正确输入注册表单")
    } else if (pass == 1) {
        alert("提交成功")
    }
}

cz.onclick = function(){
    pass = 0
}