用户信息验证

最新推荐文章于 2023-12-23 17:51:22 发布

小胖胖哈

最新推荐文章于 2023-12-23 17:51:22 发布

阅读量508

点赞数

本文链接：https://blog.csdn.net/xxb52306/article/details/78507217

版权

//记住导jQuery文件包

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>第二周模拟题</title>
<script src="../jquery库文件/jQuery-2.1.0/jquery-2.1.0.js"></script>
       <script>
         $(function(){
           //按钮点击事件
           $("#sub").click(function(){
               var flag1=flag2=flag3=flag4=false;

               //用户名非空
               var name=$("#name").val();
               if(name==null||name==""){
                   alert("用户名不能为空");
                   //$("span").text("用户名不能为空");
                   flag1=false;
                   }else{
                       $("span").text();
                       flag1=true;
                       }

              //密码长度验证
              var pwd=$("#pwd").val();
              var size=pwd.length;
              if(size < 4 || size > 16){
                  alert("密码长度不正确");
                  flag2=false;
                  }else{
                      flag2=true;
                      }

               //年龄必须是数字(现验证非空)
               var age=$("#age").val();
               if(isNaN(age)){
                   alert("年龄必须是数字");
                   flag3=false;
                   }else{
                       flag3=true;
                       }

               //验证性别
                var sex=$("[name='sex']:checked");
                var sex2=sex.val();
               var sexChecked=sex.size();
               if(sexChecked != 1){
                   alert("性别必选");
                   flag4=false;
                   }else{
                       flag4=true;
                       }

               //提交成功追加数据
               var privince = $("#privince").val();
               var city = $("#city").val();

               if(flag1 && flag2 && flag3 && flag4){
                   alert("成立");
                   //创建单元格
                   var tCheckbox = $("<th><input class='check' type='checkbox' /></th>");
                   var tName = $("<td>"+name+"</td>");
                   var tPwd = $("<td>"+pwd+"</td>");
                   var tAge = $("<td>"+age+"</td>");
                   var tSex = $("<td>"+sex2+"</td>");
                   var tCity = $("<td>"+privince+"-"+city+"</td>");
                   //创建tr
                   var tr = $("<tr>");
                   var $data = $("#data");
                   //向tr中追加td
                   tr.append(tCheckbox).append(tName).append(tPwd).append(tAge).append(tSex).append(tCity);
                   //把tr放到tbody中
                   //$("tbody:eq(1)").append(tr);
                   $data.append(tr);
               }else{
                   alert("错误信息");
               }

                 });

               //二级联动
               $("#privince").change(function(){
                   var privince=$(this).val();
                   if(privince=="北京"){
                       //选中北京怎么更改城市下拉菜单中的内容
                       var city=$("<option selected='selected'>海淀区</option><option>昌平区</option><option>朝阳区</option><option>大兴区</option>");
                       $("#city").html(city);
                       }

                   if(privince=="河北"){
                       var city=$("<option >石家庄</option><option>唐山</option><option>保定</option><option selected='selected'>邢台</option>");
                       }
                       $("#city").html(city);

                   if(privince=="山西"){
                       var city=$("<option selected='selected'>运城</option><option>太原</option><option>临汾</option><option>大同</option>");
                       }
                       $("#city").html(city);
                   });

              });
        </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;
                        });
                   }
               });
               //批量删除，点击删除，删除选中的元素
               $("#dell").click(function(){
                   //data表格下有是checked且没有id属性的都删除
                   $("#data :checked").not("[id]").parent().parent().remove(); //移除所有被选中的input元素


               })


           });
       </script>

</head>
<style>
span{ color:#f00}
</style>
<body>
     <center>
    <h2>用户注册</h2>
     <table border="1" cellpadding="10px" cellspacing="0" align="center">
      <form action="**">
      <tbody>
      <tr>
         <td>用户名</td>
         <td>
         <input type="text" placeholder="用户名不能为空" id="name"/>
         <span></span>
         </td>
     </tr>
     <tr>
         <td>密　码</td>
         <td>
         <input type="password" placeholder="长度在4-16位之间" id="pwd"/>

         </td>
     </tr>
      <tr>
         <td>年龄</td>
         <td>
         <input type="text" placeholder="年龄必须是数字" id="age"/>

         </td>
     </tr>
     <tr>
         <td>性别</td>
         <td>
         <input type="radio" name="sex" value="男"/>男
         <input type="radio" name="sex" value="女"/>女

         </td>
     </tr>
     <tr>
         <td>住　址</td>
         <td>
          省 <select id="privince">
             <option>北京</option>
             <option>河北</option>
             <option>山西</option>
             </select>
         市 <select id="city">
             <option>海淀区</option>
             <option selected="selected">昌平区</option>
             <option>朝阳区</option>
             <option>大兴区</option>

             </select>
         </td>
     </tr>
        <tr>
            <td colspan="2" align="center">
                <input type="submit" id="sub" value="提交后查询"/>
            </td>
        </tr>
        </tbody>
    </form>
   </table><br />
    <button id="dell">批量删除</button>
    <table border="1px solid bile" cellpadding="10" cellspacing="0" id="data">
               <tr>
                   <td><input type="checkbox" id="all"/></td>
                   <td>用户名</td>
                   <td>密　码</td>
                   <td>年　龄</td>
                   <td>性　别</td>
                   <td>地　址</td>
               </tr>
               <tbody>

              </tbody>
    </table>
    </center>
</body>
</html>