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

来源：互联网发布：nginx php 500错误编辑：程序博客网时间：2024/05/17 15:59

             获取输入框的信息添加到表格里，用到方式是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>

阅读全文

0 0