文档章节

jQuery(一)选择器与表单验证

o
 osc_wws45aot
发布于 2019/08/21 20:27
字数 1241
阅读 8
收藏 0

精选30+云产品,助力企业轻松上云!>>>

$(document).ready()可以简写成

  $(function(){

    //执行的代码

  });

 

基本过滤选择器  

  选取第一个元素:$("li:first")

  选取最后一个元素:$("li:last")

  选取索引为偶数的元素:$("li:even")

  选取索引为奇数的元素:$("li:odd")

  选取索引等于index的元素:$("li:eq(index)")

  选取索引大于index的元素:$("li:gt(index)")
  选取索引小于index的元素:$("li:lt(index)")

 

使用jQuery进行表单验证

  1 <!DOCTYPE html>
  2 <html>
  3 <head>
  4     <meta charset="UTF-8">
  5     <title>使用jQuery验证框架制作表单</title>
  6     <link type="text/css" rel="stylesheet" href="../css/demo1.css" />
  7 </head>
  8 <body>
  9 <!-- action表单连接页面,onsubmit事件,当type=submit提交时触发 -->
 10 <form action="success.html" method="post" >
 11     <table>
 12         <tr>
 13             <td>
 14                 <span>*</span> 用户名:</td>
 15             <td>
 16                 <input type="text" name="uname" />
 17             </td>
 18         </tr>
 19 
 20         <tr>
 21             <td>
 22                 <span>*</span> 密码:</td>
 23             <td>
 24                 <input id="upwd" type="password" name="upwd" />
 25             </td>
 26         </tr>
 27 
 28         <tr>
 29             <td>
 30                 <span>*</span> 确认密码:</td>
 31             <td>
 32                 <input type="password" name="apwd" />
 33             </td>
 34         </tr>
 35 
 36         <tr>
 37             <td>
 38                 <span>*</span> 年龄:</td>
 39             <td>
 40                 <input type="number"  name="uage" />
 41             </td>
 42         </tr>
 43 
 44         <tr>
 45             <td>
 46                 <span>*</span> 手机号:</td>
 47             <td>
 48                 <input type="number" name="uphone" />
 49             </td>
 50         </tr>
 51 
 52         <tr>
 53             <td>
 54                 <span>*</span> 邮箱:</td>
 55             <td>
 56                 <input type="email" name="uemail" />
 57             </td>
 58         </tr>
 59 
 60         <tr>
 61             <td>
 62                 <span>*</span> 性别:</td>
 63             <td>
 64                 <input type="radio" name="usex" id="usex1" value="男"/><label for="usex1">男</label>
 65                 <input type="radio" name="usex" id="usex2" value="女" /><label for="usex2">女</label>
 66                 <!--注意:加上label标签为name属性的值,加上class类样式,加上自动生成generated的信息,这样提示的错误信息不会显示在中间-->
 67                 <label for="usex" class="error" generated="true"></label>
 68             </td>
 69         </tr>
 70 
 71         <tr>
 72             <td>
 73                 <span>*</span> 爱好:</td>
 74             <td id="listlike">
 75                 <input type="checkbox" name="ulike" id="ulike1" value="看小说" onclick="creturn()"/><label for="ulike1">看小说</label>
 76                 <input type="checkbox" name="ulike" id="ulike2" value="看电影" onclick="creturn()" /><label for="ulike2">看电影</label>
 77                 <input type="checkbox" name="ulike" id="ulike3" value="吃零食" onclick="creturn()"/><label for="ulike3">吃零食</label>
 78                 <input type="checkbox" name="ulike" id="ulike4" value="打麻将" onclick="creturn()" /><label for="ulike4">打麻将</label>
 79                 <!--注意:加上label标签为name属性的值,加上class类样式,加上自动生成generated的信息,这样提示的错误信息不会显示在中间-->
 80                 <label class="error" for="ulike" generated="true"></label>
 81             </td>
 82         </tr>
 83         <tr>
 84             <td></td>
 85             <td>
 86                 <input type="radio"  name="choose"  id="c1" /><label for="c1" >全选</label>
 87                 <input type="radio"  name="choose"  id="c2" /><label for="c2" >全不选</label>
 88                 <input type="radio"  name="choose"  id="c3" /><label for="c3" >反选</label>
 89             </td>
 90         </tr>
 91         <tr>
 92             <td></td>
 93             <td><input type="submit" value="提交注册" />
 94                 <input type="reset" value="重置注册"/></td>
 95         </tr>
 96     </table>
 97 </form>
 98 </body>
 99 <script src="../js/jquery.min.js"></script><!-- 引入jQuery框架 -->
100 <script src="../js/jquery.validate.min.js"></script><!-- 引入jQuery验证框架 -->
101 <script src="../js/demo1.js">
102 </script>
103 </html>
 1     $(function(){//当页面加载完成后,需要做的事情
 2         $("form").validate({
 3                 rules:{
 4                     uname:{
 5                         required:true,//表示用户名不能为空
 6                         rangelength:[5,20]//表示用户名必须是5到20位之间
 7                     },
 8                     upwd:{
 9                         required:true,//表示密码不能为空
10                         rangelength:[6,30]//表示密码的长度必须在6到30位之间
11                     },
12                     apwd:{
13                         required:true,//表示确认密码不能为空
14                         equalTo:"#upwd"//表示两次密码必须相同,
15                     },
16                     uage:{
17                         required:true,
18                         range:[1,130],
19                         digits:true //表示必须是整数
20                     },
21                     uphone:{
22                         required:true,
23                         range:[13000000000,19999999999]
24                     },
25                     uemail:{
26                         required:true,
27                         email:true
28                     },
29                     usex:{
30                         required:true
31                     },
32                     ulike:{
33                         required:true
34                     }
35                 },
36                 messages:{
37                     uname:{
38                         required:"用户名不能为空!",
39                         rangelength:"用户名的长度必须在5到20位之间"
40                     },
41                     upwd:{
42                         required:"密码不能为空",
43                         rangelength:"密码长度必须在6到30位之间"
44                     },
45                     apwd:{
46                         required:"确认密码不能为空",
47                         equalTo:"两次密码必须一致"
48                     },
49                     uage:{
50                         required:"年龄不能为空",
51                         range:"年龄必须在1到130岁之间",
52                         digits:"必须是整数"
53                     },
54                     uphone:{
55                         required:"手机号不能为空",
56                         range:"手机号非法"
57                     },
58                     uemail:{
59                         required:"邮箱不能为空",
60                         email:"邮箱格式不正确"
61                     },
62                     usex:{
63                         required:"性别不能为空"
64                     },
65                     ulike:{
66                         required:"爱好至少选中一个"
67                     }
68                 }
69         });
70         <!--全选-->
71         $("#c1").click(function(){
72             <!--$("[name='ulike']").attr("checked",true);--><!--也可以-->
73             <!--$("[type='checkbox']").prop("checked",$(this).is(":checked"));--><!--也可以-->
74             $("[name='ulike']").prop("checked",true);<!--也可以-->
75         });
76         <!--全不选-->
77         $("#c2").click(function(){
78             <!--$("[type='checkbox']").removeAttr("checked");--><!--也可以-->
79             $("[type='checkbox']").attr("checked",false);<!--也可以-->
80         });
81         <!--反选-->
82         $("#c3").click(function(){
83             $("#listlike :checkbox").each(function(){
84                 $(this).prop("checked",!$(this).prop("checked"));
85             });
86         });
87 
88 
89     });
90      function creturn(){<!--判断反选、全选、全不选-->
91         var l = $("[name='ulike']").length;
92         var l2 = $("[name='ulike']:checked").length;
93         if(l2==0){$("#c2").prop("checked",true);}else{$("#c2").prop("checked",false);}
94         if(l==l2){$("#c1").prop("checked",true);}else{$("#c1").prop("checked",false);}
95      }
 1     .error{/*jQuery提示样式*/
 2         color:red;
 3     }
 4     form{
 5         width:800px;
 6         height:400px;
 7         margin:50px auto;
 8         color:white;
 9         background-color:#777;
10         border-radius:50px;
11     }
12     table{
13         padding:50px 60px 50px 100px;
14     }

 jQuery(二)节点、动画

o
粉丝 0
博文 500
码字总数 0
作品 0
私信 提问
加载中
请先登录后再评论。

暂无文章

Spark Summit North America 202006 高清 PPT 下载

为期五天的 Spark Summit North America 2020在美国时间 2020-06-22 ~ 06-26 举行。由于今年新冠肺炎的影响,本次会议第一次以线上的形式进行。这次会议虽然是五天,但是前两天是培训,后面三...

osc_z9t307rr
31分钟前
14
0
矩阵计算与AI革命:可将计算性能提高150倍的异构计算

本文翻译自Wikibon矩阵计算与AI革命系列研究文章。 如今异构计算(Heterogeneous Compute,HC)已经部署在消费类移动设备中,与传统架构相比可以将矩阵工作负载的性能提高50倍。同时,这也将...

osc_ml6lx2h4
32分钟前
23
0
smart 后台 使用说明

乐观锁 说明 如果想实现如下需求: 当要更新一条记录的时候,希望这条记录没有被别人更新,确保当前只有一个人在操作。 乐观锁的实现原理: 取出记录时,获取当前 version 2 更新时,带上这个 ...

奔跑的android
33分钟前
10
0
关于win10的hype-v与VMWARE启动冲突的解决方法

升级win10后,在卸载hype-v重启电脑后仍然报错,解决的办法是只需要直接使用管理员身份打命令提示符,然后执行以下命令即可: bcdedit /set hypervisorlaunchtype off...

osc_l7zl78wt
34分钟前
16
0
操作系统设计中的加电引导

作者:丁宋涛 系统启动过程概述 在掀下电脑开机按钮后,电源就会开始向主板和其他外围设备供电。初始状态下的电压还不太稳定,因此并不会立即开始指令的执行。此时,主板上的控制芯片组会发出重...

osc_kz2s8mnr
36分钟前
18
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部