注册表单提交

最新推荐文章于 2024-07-23 11:32:13 发布

dundundunsis

最新推荐文章于 2024-07-23 11:32:13 发布

阅读量328

点赞数 8

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/dundundunsis/article/details/134764390

版权

html部分

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        input:focus::placeholder{
            opacity: 0;
        }
    </style>
</head>
<body>
    <div><input type="text" placeholder="昵称" id="nc"></div>
    <div><input type="text" placeholder="姓名" id="xm"></div>
    <div><input type="text" placeholder="QQ" id="qq" onkeyup="this.value=this.value.replace(/[^\d]/g,'')"></div>
    <div><input type="text" placeholder="手机号" id="sjh" onkeyup="this.value=this.value.replace(/[^\d]/g,'')"></div>
    <div><input type="email" placeholder="邮箱" id="yx"></div>
    <div><input type="password" placeholder="密码" id="mm" onkeyup="this.value=this.value.replace(/[^\d|a-z|A-Z]/g,'')"></div>
    <div><input type="password" placeholder="确认密码" id="mm2" onkeyup="this.value=this.value.replace(/[^\d|a-z|A-Z]/g,'')"></div>
    <div><button id="tj">提交</button>
    <button id="cz">重置</button></div>

    <script src="./1注册表单提交.js"></script>
</body>
</html>

## js部分

var nc = document.querySelector("#nc")
var xm = document.querySelector("#xm")
var qq = document.querySelector("#qq")
var sjh = document.querySelector("#sjh")
var yx = document.querySelector("#yx")
var mm = document.querySelector("#mm")
var mm2 = document.querySelector("#mm2")
var tj = document.querySelector("#tj")
var cz = document.querySelector("#cz")
var inputtext = document.querySelectorAll('input')


tj.onclick = function () {
    if (nc.value.length > 10) {
        alert("昵称过长")
    }
    if (xm.value.length > 4) {
        alert("姓名过长")
    }
    if (qq.value.length < 5 || qq.value.length >= 10) {
        alert("QQ号应为长度大于5小于等于10的数字")
    }
    if (sjh.value.length != 11
    ) {
        alert("手机号为长度11位的数字")
    }
    if (mm.value.length < 8 || mm.value.length > 16) {
        alert("密码由字母和数字组成且大于8位小于16位")
    }
    if (mm.value != mm2.value) {
        alert("密码和确认密码需相同")
        mm2.value=""
    }

    if (nc.value == "" || xm.value == "" || qq.value == ""
        || sjh.value == "" || yx.value == "" || mm.value == ""
        || mm2.value == "") {
        alert("请正确提交表单")
    }
    else {
        alert("提交成功")
    }
}