【无标题】

最新推荐文章于 2024-05-18 00:53:54 发布

原创最新推荐文章于 2024-05-18 00:53:54 发布 · 1.2k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jquery

本文介绍了如何使用jQuery实现复选框的全选功能，并结合jQuery Validation插件进行表单验证，包括用户名、密码等字段的规则和错误提示。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			#myForm label.error {
				color: red;
				font-size: ;
			}
		</style>
		<!-- 引入jQuery库 -->
		<script src="js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script>
		<!-- 引入jQuery表单验证引入 -->
		<script src="js/jquery.validate.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			/*jQuery第五次课*/

			$(function() {
				/* var s1={};
				var s2={"name":"欧阳","sex":"女"};
				console.info(s1.name,s1.sex);
				console.info(s2.name,s2.sex);
				//开始继承
				$.extend(s1,s2);//s1继承自s2
				console.info(s1.name,s1.sex);
				console.info(s2.name,s2.sex); */

				//1.2 
				//案例2:求最大值(最小值)
				/* $.extend({
					abcd:function(){
						alert(1234);
					},
				
					getMax:function(a,b){
						return a>b?a:b;
					},
					getMin:function(a,b){
						return a<b?a:b;
					}
				}); */

				//调用类方法
				/* 	var max=$.getMax(39,5);
					console.info(max); */

				// console.info($.getMin(22,34));

				// $.absc();

				//1.3 $.fn.extend()扩展jQuery对象方法
				$.fn.extend({
					xx: function() {
						//遍历
						$(this).each(function(i, ck) { //ck指每一个复选框
							ck.checked = true; //让其选中
						})
					},
					yy: function() {
						//遍历
						$(this).each(function(i, ck) { //ck指每一个复选框
							ck.checked = false; //让其选中
						})
					}
				})
				//案例3：实现全选效果
				$("#ok").click(function() {
					$(".aaa").xx();
				})
				$("#nook").click(function() {
					$(".aaa").yy();
				})

				//复选框实现全选
				$("#qx").on("click", function() {
					//让其复选框的状态跟全选框保持一致
					// console.info($("#qx").porp("checked"));
					// if($(this).prop("checked")){//说明全选框是选中的
					if ($(this).is(":checked")) {
						$(".aaa").xx(); //让其他复选框选中
					} else {
						$(".aaa").yy();
					}
				})

				//完善全选
				$(".aaa").click(function() {
					//遍历
					$(".aaa").each(function(i, ck) { //ck指的是每一个复选框
						if (ck.checked == flase) { //只要有任何一个没有选中
							f = false;
						}
						//给全选框重新赋值
						$("#qx").prop("checked")
					})
				})

				// 二，第三方插件:表单验证插件
				//案例4：表单验证(用户名,密码，确认密码，年龄，邮件，网址url)
				$("#myForm").validate({
					rules: {
						//字段的规则部分
						uname: {
							required: true,
							rengelength: [6, 10]
						},
						upwd1: "required",
						upwd2: {
							requored: true,
							equalTo: "#upwd1"
						},
						uemail: {
							required: true,
							email: true
						},
						uage: {
							required: true,
							range: [1, 150]
						},
						uurl: {
							required: true,
							url: true
						}
					},
					messages: {
						//错误信息提示部分
						uname: {
							required: "用户名必填",
							rengelength: "长度要在6-10之间"
						},
						upwd1: "密码必填",
						upwd2: {
							requored: "确定密码必填",
							equalTo: "两次密码不一致"
						},
						uemail: {
							required: "邮件必填",
							email: "邮箱格式错误"
						},
						uage: {
							required: "年龄必填",
							range: "年龄在1-150岁之间"
						},
						uurl: {
							required: "网址必填",
							url: "网址输入错误"
						}
					}
				})
			})
		</script>
	</head>

	<body>
		<h2>案例3:自定义插件实现全选功能</h2>
		<input type="button" value="全选" id="ok" />
		<input type="button" value="取消全选" id="nook" />
		<input type="checkbox" id="qx" value="全选" />全选
		<input type="checkbox" class="aaa" value="躺着听网课" />躺着听网课
		<input type="checkbox" class="aaa" value="吃辣条" />吃辣条
		<input type="checkbox" class="aaa" value="玩soul" />玩soul
		<h2>案例4:使用jQuery validation插件完成表单验证</h2>
		<form id="myForm">
			用户名：<input type="text" name="uname" /><br />
			密码：<input type="text" name="upwd1" /><br />
			确认密码：<input type="text" name="upwd2" /><br />
			邮箱：<input type="text" name="uemail" /><br />
			年龄：<input type="text" name="uage" /><br />
			网址：<input type="text" name="uurl" /><br />
			<input type="submit" value="提交" />
		</form>
	</body>
</html>

jQuey_05笔记

自己理解才是王道