jquery+表单验证(标签操作)

来源:互联网 发布:硕士毕业论文 知乎 编辑:程序博客网 时间:2024/05/19 06:39
<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <script src="jquery-1.11.0.js"></script>    <script>              $(function () {                 $("button").click(function () {                     var name =   $("input:eq(0)").val();                     var email =   $("input:eq(1)").val();                     var phone =   $("input:eq(2)").val();                    var flag=true;                     if(name == null || name ==""){                         alert("姓名不能为空");                         flag=false;                     }                     if(email == null || email ==""){                         alert("邮箱不能为空");                         flag=false;                     }else{                         if(email.indexOf("@")>=0){                         }else{                             alert("格式不对");                             flag=false;                         }                     }                     if(phone == null || phone ==""){                         alert("号码不能为空");                         flag=false;                     }               if(flag){                     var tr =$("<tr></tr>");                    // var tr = $("#tr");                        tr.append("<td>"+name+"</td>")                        .append("<td>"+email+"</td>")                        .append("<td>"+phone+"</td>")                        .append("<td><a href='#'>删除</a></td>").appendTo($("tbody"))                     }                               $("a").click(function () {                                             var tr = $(this).parent().parent();                                             tr.remove();                               });                 })  ;              });    </script></head><body><center>     姓名:<input type="text"><br/>     邮箱:<input type="text"><br/>     电话:<input type="text"><br/>            <button>添加</button>    <hr/><table border="1px solid #000" cellspacing="0" cellpadding="10">    <thead>    <th>姓名</th>    <th>邮箱</th>    <th>电话</th>    <th>操作</th>    </thead>    <tbody>    <tr id="tr">    </tr>    </tbody></table></center></body></html>
原创粉丝点击