注册用户2

来源：互联网发布：python高级教程pdf 编辑：程序博客网时间：2024/06/07 20:41

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8" />
       <title></title>
       <style type="text/css">
           div{
               border: 1px;
               width: 300px;
               margin: 0 auto;
           }

           span{
               display: none;
           }

           table{
               margin: 0 auto;
               display: none;
           }
       </style>

       

       <script src="js/jquery-1.11.1.js"></script>
       <script>
           //工厂函数
           $(function(){
               //定义联动的数组
               var provinces = [["保定","石家庄","邯郸"],["深圳","广州","惠州"]];
               $("#prov").change(function(){
                   //清空上次
                   $("#citys").siblings().remove();
                   var prov = $(this).val();
                   for(var i=0;i<provinces[prov].length;i++){

                       var opt = $("<option></option>");
                       opt.html(provinces[prov][i]+"");
                       $("#city").append(opt);
                   }
               });

               //添加的点击事件
               $("input").eq(3).click(function(){
                   flag0 = false;
                   flag1 = false;
                   flag2 = false;
                   flag3 = false;
                   flag4 = false;

                   //获取姓名输入框中的值
                   var $sname = $("input").eq(0).val();
                   //判断输入的内容
                   if($sname!=""&&$sname!=null){
                   var $td0 = $("<td>"+$sname+"</td>");
                       flag0=true;
                   }else{
                       flag0=false;
                   $("span").eq(0).html("用户名不能为空");
                   $("span").eq(0).show();
                   }

                   //获取邮箱输入的值
                   var $semail = $("input").eq(1).val();
                   //判断邮箱输入值
                   if($semail.indexOf("@")!=-1){
                       var $td1 = $("<td>"+$semail+"</td>");
                       flag1=true;
                   }else{
                       flag1=false;
                   }


                   //获取电话输入的值
                   var $stel = $("input").eq(2).val();
                   //判断电话输入值
                   var yztex = /^\d{8,11}$/

                   if(yztex.test($stel)){
                       var $td2 = $("<td>"+$stel+"</td>");
                       flag2=true;
                   }else{
                       flag2=false;
                   }


                   //获取省份输入的值
                   var $ssheng = $("#prov option:checked").html();
                   //判断省份输入值
                   if($ssheng!=null&&$ssheng!=""){
                       var $td3 = $("<td>"+$ssheng+"</td>");
                       flag3=true;
                   }else{
                       flag3=false;
                   }

                   //获取省份输入的值
                   var $shi = $("#city option:checked").html()
                   //判断省份输入值

                   if($shi!=null&&$shi!=""){
                       var $td4 = $("<td>"+$shi+"</td>");
                       flag4=true;
                   }else{
                       flag4=false;
                       alert("市不能为空");
                   }


                   if(flag0&&flag1&&flag2&&flag3&&flag4){
                       $("table").show();
                       var $td5 = $("<td><a href='#'>delete</a></td>");
                       var $tr = $("<tr bgcolor='white'></tr>")
                       $tr.append($td0);
                       $tr.append($td1);
                       $tr.append($td2);
                       $tr.append($td3);
                       $tr.append($td4);
                       $tr.append($td5);
                       $("table").append($tr);
                   }else{
                       alert("输入数据不符");
                   }


                   $("a").click(function(){
                       var $ta = $(this);
                       var bol=confirm("是否删除");
                       if(bol==true){

                           $ta.parent().parent().remove();
                           if($("tr").length==1){
                               $("table").hide();
                           }

                       }
                       $ta.stopPropagation();
                       return false;

                    });

               });

           });
       </script>
   </head>
   <body>
       <div>
           <form>
               
               <label>姓    名:</label>
               <input type="text" placeholder="请输入不为空的用户名" />
               <br />
               
               <label> email :</label>
               <input type="text" placeholder="请输入合法邮箱'@'" />
               <br />
               
               <label>电    话:</label>
               <input type="tel" placeholder="请输入8-11位手机号" />
               <br />
               
               <label>省    份:</label>
               <select id="prov">
                   <option>-请选择省份-</option>
                   <option value="0">河北</option>
                   <option value="1">广东</option>
               </select>
               <br />
               
               <label>城    市:</label>
               <select id="city">
                   <option id="citys">-请选择市份-</option>
               </select>
               <br />
               <input type="button" value="添加" />
           </form>
       </div>
       <p></p>
       <table border="0px" bgcolor="black" cellspacing="1px" style="width: 500px; text-align: center;">
           <tr bgcolor="white">
               <th>姓名</th>
               <th>email</th>
               <th>电话</th>
               <th>省份</th>
               <th>城市</th>
               <th>删除</th>
           </tr>
       </table>

   </body>
</html>

阅读全文

0 0