用户验证，htlm+jQuery

来源：互联网发布：m4a1黑龙数据编辑：程序博客网时间：2024/05/29 23:22

//用户验证，，用户名，密码，年龄，性别，住址，批量删除

//效果图如下

<!DOCTYPE html>
<html>

   <head>
       <meta charset="UTF-8">
       <title></title>
       <style>
           td {
               text-align: center;
           }
       </style>
       <script src="../js/jquery-1.11.0.js"></script>
       <script>
           $(function() {
               var arr = [
                       ["东城","西城","崇文","宣武","朝阳","丰台","石景山","海淀","门头沟","房山","通州","顺义","昌平","大兴","平谷","怀柔","密云","延庆" ]
                       ,
                       ["哈尔滨","大庆","牡丹江","绥化","齐齐哈尔","鸡西","伊春","黑河","七台河","鹤岗","双鸭山","肇源","肇州","肇东"]
                       ,
                       ["长春","吉林","四平","辽源","通化","白山","松原","白城"]
                       ,
                       ["沈阳","大连","鞍山","抚顺","本溪","丹东","锦州","营口","阜新","辽阳","盘锦","铁岭","朝阳","葫芦岛"]
                       ];
               var flag1 = false;
               var flag2 = false;
               var flag3 = false;
               var flag4 = false;
               //获取元素
               var $name = $("#name");
               var $pwd = $("#pwd");
               var $age = $("#age");
               var $city = $("#city");

               $name.blur(function() {
                   if($name.val() == "") {
                       alert("请输入用户名");
                       flag1 = false;
                   } else {
                       flag1 = true;
                   }
               });

               $pwd.blur(function() {
                   var $pl = $pwd.val().length;
                   if($pl > 4 && $pl < 16) {
                       flag2 = true;
                   } else {
                       alert("长度在4-16位之间");
                       flag2 = false;
                   }
               });

               $age.blur(function() {
                   if($age.val() < 1 || $age.val() > 300) {
                       alert("请输入正确的年龄");
                       flag3 = false;
                   } else {
                       flag3 = true;
                   }
               });

               $city.change(function(){
                   $("#city2 option").remove();
                   var ind = $(this).val();
                   alert(ind);
                   for(c in arr[ind]){
                       var $c2 = $("#city2");
                       var cs = $("<option>"+arr[ind][c]+"</option>");
                       $c2.append(cs);
                   }
               });


               //提交按钮点击事件
               $("#tj").click(function() {

                   if(flag1 && flag2 && flag3){
                       var $nameV = $("#name").val();
                       var $pwdV = $("#pwd").val();
                       var $ageV = $("#age").val();
                       var $sexV = $("input[name='sex']:checked").val();
                       var $cityV = $("#city option:selected").html();
                       var $city2V = $("#city2 option:selected").html();
                       var $data = $("#data");
                       var $a = $("<tr><td><input type='checkbox'></td><td>"+$nameV+"</td><td>"+$pwdV+"</td><td>"+$ageV+"</td><td>"+$sexV+"</td><td>"+$cityV+"-"+$city2V+"</td></tr>");
                       $data.append($a);

                   }else{
                       alert("请按要求输入信息");
                   }
               });

           });
       </script>
       
       <script>
           //页面加载完成
           $(function(){
               //选中全选
               $("#all").click(function(){
                   //判断状态
                   var fl = $(this).prop("checked");
                   if(fl){
                       //全选
                       var $ch = $(":checkbox");
                       $ch.each(function(index, element) {
                            $ch[index].checked=true;
                        });
                   }else{
                       //全不选
                       var $ch = $(":checkbox");
                       $ch.each(function(index, element) {
                            $ch[index].checked=false;
                        });
                   }
               });
               //批量删除，点击删除，删除选中的元素
               $("#del").click(function(){
                   //data表格下有是checked且没有id属性的都删除
                   $("#data :checked").not("[id]").parent().parent().remove(); //移除所有被选中的input元素


               })


           });
       </script>
   </head>

   <body>
       <center>
           <h2>用户注册</h2>
           <table border="1px" cellpadding="10px" cellspacing="0px">
               <tr>
                   <td>用户名</td>
                   <td><input type="text" placeholder="用户名不能为空" id="name" /></td>
               </tr>
               </tr>
                   <td>密　码</td>
                   <td><input type="password" placeholder="长度在4-16位之间" id="pwd" /></td>
               </tr>
               </tr>
                   <td>年　龄</td>
                   <td><input type="number" placeholder="年龄必须是数字" id="age" /></td>
               </tr>
               </tr>
                   <td>性　别</td>
                   <td><input type="radio" value="男" name="sex" checked="checked"/>男
                   <input type="radio" value="女" name="sex" />女</td>
               </tr>
               <tr>
                   <td>住　址</td>
                   <td>省
                       <select id="city">
                           <option value=0>北京</option>
                           <option value=1>黑龙江</option>
                           <option value=2>吉林</option>
                           <option value=3>辽宁</option>
                       </select>
                       市
                       <select id="city2">
                           <option>东城区</option>
                       </section>
                   </td>
               </tr>
               <tr>
                   <td colspan="2"><button id="tj">提交</button></td>
               </tr>
           </table>
           <button id="del">批量删除</button>
           <table border="1px" cellpadding="10px" cellspacing="0px" id="data">
               <tr>
                   <td><input type="checkbox" id="all"></td>
                   <td>用户名</td>
                   <td>密　码</td>
                   <td>年　龄</td>
                   <td>性　别</td>
                   <td>住　址</td>
               </tr>

           </table>
       </center>
   </body>

</html>

阅读全文

0 0