html的jQuery判断格式和从文本框获取信息放入表格

最新推荐文章于 2021-05-10 14:44:31 发布

zhuc666

最新推荐文章于 2021-05-10 14:44:31 发布

阅读量975

点赞数

本文链接：https://blog.csdn.net/zhuc666/article/details/78219306

版权

           	  获取输入框的信息添加到表格里，用到方式是jQuery

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>第二周</title>

    <style>
        body{
            margin: 0 auto;
        }
        button{
            display: block;
            margin: 0 auto;
        }
        input{
            background-color: #c7edcc;
        }
        td{
            border: 1px solid #000;
        }
        img{
            width: 20px;
            height: 20px;
        }
    </style>
    <script src="jquery-1.11.1.min.js"></script>
    <script>
        $(function () {
            $("span").hide();
            //邮箱
            var email = $(".email").val();
            $(".email").blur(function () {
                var ereg = /.+@.+\.[a-zA-Z]{2,4}$/;
                if(ereg.test($(".email").val())){
                    $(this).parents("td").next().children("span:first").show();
                    $(this).parents("td").next().children("span:last").hide();
                }else{
                    $(this).parents("td").next().children("span:first").hide();
                    $(this).parents("td").next().children("span:last").show();
                    console.log(1);
                }
            });
            //昵称
            var name = $(".name").val();
            $(".name").blur(function () {
                if($(".name").val().length>4){
                    $(this).parents("td").next().children("span:first").show();
                    $(this).parents("td").next().children("span:last").hide();
                }else{
                    $(this).parents("td").next().children("span:first").hide();
                    $(this).parents("td").next().children("span:last").show();
                }
            });
            //密码
            var pwd = $(".pwd").val();
            $(".pwd").blur(function () {
                if( $(".pwd").val().length>=6){
                    $(this).parents("td").next().children("span:first").show();
                    $(this).parents("td").next().children("span:last").hide();
                }else{
                    $(this).parents("td").next().children("span:first").hide();
                    $(this).parents("td").next().children("span:last").show();
                }
            });
//            再一次输入
            var rpwd = $(".rpwd").val();
            $(".rpwd").blur(function () {
                if($(".rpwd").val()==$(".pwd").val()&&$(".rpwd").val()!=""){
                    $(this).parents("td").next().children("span:first").show();
                    $(this).parents("td").next().children("span:last").hide();
                }else{
                    $(this).parents("td").next().children("span:first").hide();
                    $(this).parents("td").next().children("span:last").show();
                }
            });
//            注册按钮
            $(".zhuce").click(function () {
                if($(".email").val()!=""&&$(".name").val()!=""&&$(".pwd").val()!=""&&$(".epwd").val()!=""&&$(".rpwd").val()==$(".pwd").val()){
                    alert("符合要求");
                    var e1 = $(".email").val();
                    var e2 = $(".name").val();
                    var e3 = $(".pwd").val();
                    alert($(".tab").val());
                    var arr = new Array(e1,e2,e3);
                    var tabl = document.getElementById("tab");
                  tabl.innerHTML+= "<tr><td>"+arr[0]+"</td><td>"+arr[1]+"</td><td>"+arr[2]+"</td></tr>";
                }else{
                    alert("不符合要求");
                }
            })


        });
    </script>
</head>
<body>
<center>
    <table>
        <tr>
            <td>请填写您的Email地址:</td>
            <td><input type="text" class="email" id="emailId"></td>
            <td>请填写有效的Email地址,在下一步中您将用此邮箱接收验证邮件。<br>
                <span><img src="dui.gif">用户名可用</span><span><img src="cuo.gif">用户名不可用</span></td>
        </tr>
        <tr>
            <td>请填写您在当当网的昵称:</td>
            <td><input type="text" class="name" id="nameId"></td>
            <td>您的昵称可以由小写英文字母，中文、数组组合才能，长度4-20个字符，一个汉字为两个字符<br>
                <span><img src="dui.gif">昵称可用</span><span><img src="cuo.gif">昵称不可用</span></td>
        </tr>
        <tr>
            <td>设置密码:</td>
            <td><input type="text" class="pwd" id="pwdId"></td>
            <td>您的密码可由大小写英文字母、数字组成，长度6-20位<br>
                <span><img src="dui.gif">密码可用</span><span><img src="cuo.gif">密码不可用</span></td>
        </tr>
        <tr>
            <td>再次输入密码:</td>
            <td><input type="text" class="rpwd"></td>
            <td>
                <span><img src="dui.gif">密码一致</span><span><img src="cuo.gif">密码不一致</span></td>
        </tr>
    </table>
    <button class="zhuce">注册</button>
    <br/><br/>

    <table border="1px" style="width: 600px" id="tab" class="tab">
        <tr>
            <td>Email地址</td>
            <td>昵称</td>
            <td>密码</td>
        </tr>
    </table>
</center>
</body>
</html>

zhuc666

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
html的jQuery判断格式和从文本框获取信息放入表格

html>html lang="en">head> meta charset="UTF-8"> title>第二周title> style> body{ margin: 0 auto; } button{ display: block; margin
复制链接

扫一扫