jQuery表单验证

最新推荐文章于 2022-02-14 13:48:03 发布

你的孤独虽败犹荣

最新推荐文章于 2022-02-14 13:48:03 发布

阅读量192

点赞数

本文链接：https://blog.csdn.net/zhou742626/article/details/78759352

版权

<!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="../../../代码/4.jQuery/jQuery-2.1.0/jquery-2.1.0.js"></script>
    <style>
       .odd{
           background-color:blue;
       }
       .even{
           background-color:red;
       }
   </style>
    <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>");
                   var tCtrl = $("<td></td>");
                   var tDel = $("<button class='del'>删除</button>");
                   tCtrl.append(tDel);

                   //给按钮添加点击事件
                   tDel.click(function(){
                       //判断当前行有没有被选中
                       var result = $(this).parent().parent().children().eq(0).children();
                       if(result[0].checked){
                           //被选中了，删除即可
                           $(this).parent().parent().remove();

                           $("tbody:eq(1) tr").removeAttr("class");
                           $("tbody:eq(1) tr:odd").addClass("odd");
                           $("tbody:eq(1) tr:even").addClass("even");
                       }else{
                           alert("请选择");
                       }

                   });


                   //创建tr
                   var tr = $("<tr>");
                   //向tr中追加td
                   tr.append(tCheckbox).append(tName).append(tPwd).append(tAge).append(tSex).append(tCity).append(tCtrl);
                   //把tr放到tbody中
                   $("tbody:eq(1)").append(tr);

                   $("tbody:eq(1) tr").removeAttr("class");
                   $("tbody:eq(1) tr:odd").addClass("odd");
                   $("tbody:eq(1) tr:even").addClass("even");
               }else{
                   alert("asf");
               }


           });

           //二级联动
           $("#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);
               }
           });


           //全选
           var a = 0;
           $("#first").click(function(){
               //var result = alert($(this).attr("checked"));
               //a = 1;
               if(a == 0){
                   //alert();
                   $(":checkbox").prop("checked","checked");
                   a = 1;
               }else{
                   //alert("asdf");
                   $(":checkbox").prop("checked",false);
                   a = 0;
               }
           });

           //批量删除
           $("#deleteAll").click(function(){
               var size = $("#delBody :checked").length;
               if(size<=0){
                   alert("请先选择");
               }else{
                   if(window.confirm("确定要删除吗？")){
                       $("#delBody :checked").parent().parent().remove();
                   }
               }
           });




       });
   </script>

</head>

<body>
   <center>
       <h3>用户注册</h3>
        <table border="1px solid blue" cellpadding="10" cellspacing="0">
            <form action="*">
               <tbody>
                   <tr>
                       <th>用户名</th>
                        <td><input id="name" type="text" placeholder="用户名不能为空" /><span></span></td>

                    </tr>
                   <tr>
                       <th>密　码</th>
                        <td><input id="pwd" type="text" placeholder="长度在4-16位之间" /></td>
                    </tr>
                    <tr>
                       <th>年　龄</th>
                        <td><input id="age" type="text" placeholder="年龄必须是数字" /></td>
                    </tr>
                    <tr>
                       <th>性　别</th>
                        <td><input name="sex" value="男" type="radio" />男<input value="女" name="sex" type="radio" />女</td>
                    </tr>
                    <tr>
                       <th>住　址</th>
                        <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>
                        <th colspan="2"><input id="sub" type="submit" value="提交" /></th>
                    </tr>
            </form>
            </tbody>
        </table><br />
        <button id="deleteAll">批量删除</button><br /><br />
        <table border="1px solid blue" cellpadding="10" cellspacing="0">
           <thead>
               <tr>
                   <th><input id="first" type="checkbox" /> </th>
                    <th>用户名</th>
                    <th>密　码</th>
                    <th>年　龄</th>
                    <th>性　别</th>
                    <th>住　址</th>
                    <th>操　作</th>
                </tr>
            </thead>
            <tbody id="delBody">

            </tbody>
        </table>

    </center>
</body>
</html>