注册表单提交

Whnist

于 2023-01-15 15:47:19 发布

阅读量298

点赞数

文章标签： javascript 前端 css

本文链接：https://blog.csdn.net/Meg_Fu/article/details/128694871

版权

该文章展示了一个HTML表单的设计，包括昵称、姓名、QQ、手机号、邮箱、密码和确认密码字段。使用JavaScript进行了输入验证，如昵称不超过10个字、姓名不超过4个字等，并在提交时检查内容合理性。表单还包含了提交和重置按钮的功能实现。

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

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

<!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>
</head>
	<style>
	*{
        margin: 0;
        padding: 0;
        list-style: none;
        text-decoration: none;
    }
    body{
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
    }
    #table{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 400px;
        height: 450px;
        border: 1px solid #000;
        background-color: bisque;
        margin-top: 50px;
    }
    input{
        float: right;
    }
    #submit{
        width: 70px;
        height: 40px;
        line-height: 16px;
        font-size: 20px;
        margin-top: 40px;
        float: left;
    }
    #reset{
        width: 70px;
        height: 40px;
        line-height: 16px;
        font-size: 20px;
        margin-top: 40px;
        float: right;
    }
	</style>
</head>
<body>
    <table id="table">
        <tr>
            <td>昵称：<input type="search" id="oname" placeholder="不超过10个字"></td>
         </tr>
        <tr>
           <td>姓名：<input type="search" id="name" placeholder="不超过4个字"></td>
        </tr>
        <tr>
            <td>QQ: <input type="search" id="QQ" placeholder="5~10个数字"></td>
        </tr>
        <tr>
            <td>手机号：<input type="search" id="number" placeholder="请输入11位数字"></td>
        </tr>
        <tr>
            <td>邮箱：<input type="search" id="email" placeholder="请输入"></td>
        </tr>
        <tr>
            <td>密码：<input type="password" id="password" placeholder="8~16个字符"></td>
        </tr>
        <tr>
            <td>确认密码：<input type="password" id="password2" placeholder="8~16个字符"></td>
        </tr>
        <tr>
            <td>
                <button id="submit">提交</button>
                <button id="reset">重置</button>
            </td>
        </tr>
    </table>
    <script>
        function Get(obj){
            return document.getElementById(obj).value;
        }
        var input=document.getElementsByTagName("input");
        var reset=document.getElementById("reset");
        var submit=document.getElementById("submit");
        
        submit.onclick=function(){
            if(confirm("是否确定？")){
                //设定限制
                var tname=/^[\u4e00-\u9fa5]{1,4}/;
                var toname=/[a-zA-Z0-9]{1,10}/;
                var tnumber3=/^1[3-9][0-9]{9}$/;
                var tpassword=/[a-zA-Z0-9]{8,16}/;
                var tQQ=/[0-9]{5,10}/;
                //设置达成数目
                var Number=0;
                if(tname.test(Get("name"))){
                    Number++;
                    console.log(1);
                }
                if(toname.test(Get("oname"))){
                    Number++
                    console.log(2);
                }
                if(tnumber3.test(Get("number"))){
                    Number++
                    console.log(3);
                }
                if(tpassword.test(Get("password"))){
                    Number++
                    console.log(4);
                }
                if(tQQ.test(Get("QQ"))){
                    Number++
                    console.log(5);
                }
                if(Get("password")==Get("password2")){
                    Number++
                    console.log(6);
                }
                //数目达成后判断
                if(Number==6){
                    alert("注册成功!");
                }
                else{
                    alert("注册失败");
                }
            }

        }
        reset.onclick=function(){
                if(confirm("是否重置？")){
                var oname=document.getElementById("name");
                var ooname=document.getElementById("oname");
                var onumber=document.getElementById("number");
                var oQQ=document.getElementById("QQ");
                var oemail=document.getElementById("email");
                var opassword=document.getElementById("password");
                var opassword2=document.getElementById("password2");
                
                oname.value="";
                ooname.value="";
                onumber.value="";
                oQQ.value="";
                oemail.value="";
                opassword.value="";
                opassword2.value="";
                }
            }
    </script>
</body>
</html>

效果

注册表提交

Whnist

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
注册表单提交

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

扫一扫