注册表单提交

最新推荐文章于 2024-06-19 14:45:15 发布

black_tea114514

最新推荐文章于 2024-06-19 14:45:15 发布

阅读量352

点赞数

文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/black_tea114514/article/details/128723566

版权

要求：

1.表单需包含昵称、姓名、QQ、手机号、邮箱、密码、确认密码以及提交和重置按钮；
2.点击表单里的输入框，隐藏提示文字；
3.点击提交和重置按钮时，都需要有相应的提示；
4.在表单提交是，需要进行验证验证填写内容是否合理：昵称不超过10个字、姓名不超过4个字、QQ号为长度小于等于10大于5位的数字、手机号为长度11位的数字、密码由字母和数字组成且大于8位小于16位、密码和确认密码需相同。

思路：

进行value值得判断

代码：

<style>
        .box{
            margin: 200px auto 0;
            width: 300px;
            border: 3px solid rgb(188, 224, 224);
            text-align: center;
            background-color: rgb(240, 240, 240);
        }
        .box>input{
            display: inline-block;
            width: 200px;
            height: 20px;
            line-height: 20px;
            margin: 10px 0;
            color: black;
            outline:none;
        }
        .sbox>input{
            margin: 10px 10px;
        }
</style>
</head>
<body>
    <form>
    <div class="box">
            <input type="text" placeholder="昵称" class="nicheng">
            <input type="text" placeholder="真实姓名" class="realname">
            <input type="text" placeholder="QQ号码" class="qq">
            <input type="text" placeholder="电话号码" class="phonenumber">
            <input type="text" placeholder="邮箱" class="message">
            <input type="password" placeholder="请输入你的密码" class="pass">
            <input type="password" placeholder="请重新输入密码" class="confirm">
        <div class="sbox">
            <input type="submit" class="tj"></input>
            <input type="reset">
        </div>   
    </div>
    </form>
    <script>
        var nicheng = document.querySelector(".nicheng")
        var realname = document.querySelector(".realname")
        var qq = document.querySelector(".qq")
        var phonenumber = document.querySelector(".phonenumber")
        var message= document.querySelector(".message")
        var pass = document.querySelector(".pass")
        var confirm = document.querySelector(".confirm")
        var form = document.querySelector("form")
        window.onload = function(){
            form.submit = function(){
                if(nicheng.value.length>10){
                    nicheng.placeholder= "昵称大于10个字"
                    nicheng.style.color="red"
                }
                if(realname.value.length>4){
                    nicheng.placeholder= "姓名大于10个字"
                    nicheng.style.color="red"
                }
                if(realname.value.length>4){
                    nicheng.placeholder= "姓名大于10个字"
                    nicheng.style.color="red"
                }
                if(5<qq.value.length<=10){
                    nicheng.placeholder= "姓名大于10个字"
                    nicheng.style.color="red"
                }
                if(phonenumber.value.length != 11){
                    nicheng.placeholder= "手机为11位数"
                    nicheng.style.color="red"
                }
                if(pass.value != confirm.value){
                    nicheng.placeholder= "两次密码不一样"
                    nicheng.style.color="red"
                }
            }
        }
    </script>