jQuery插件&表单验证插件案例

目录

1.自定义插件；

2.第三方插件；

3.表单验证插件的案例；

---

一、自定义插件

好，我们今天来看看在jQuery里面如何去自定义一个插件，以及后面Leaf用一个案例来带大家看看如何运用别人写好了的插件，也就是第三方插件：

1.1 $.extend()

【作用一】实现对象继承

接下来我们就用一个案例来诠释这一作用点：

案例1：两个对象的继承；

//首先定义两个对象
var s1 = {};
var s2 = {"name":"邓正威","sex":"男"};
//继承前
console.info(s1.name,s1.sex);//未定义
console.info(s2.name,s2.sex);//邓正威 男
//使用extend开始继承
$.extend(s1,s2)//s1继承自s2
//继承后
console.info(s1.name,s1.sex);//邓正威 男
console.info(s2.name,s2.sex);//邓正威 男

【作用二】扩展jQuery类方法

咱们依然还是用一个案例来看看：

案例2：求最大值(最小值)；

                //最大值/最小值
                $.extend({
					getMax:function(a,b){
						return a>b?a:b;
					},
					getMin:function(a,b){
						return a

1.1 $.fn.extend()：扩展jQuery对象方法

我们也用一个案例来看看如何扩展jQuery对象方法

案例1：实现全选效果

                $.fn.extend({
					qx:function(){
						//遍历
						$(".aaa").each(function(i,ck){//ck--->每一个复选框
							ck.checked = true;//选中
						})
					},
					bqx:function(){
						//遍历
						$(".aaa").each(function(i,ck){//ck--->每一个复选框
							ck.checked = false;//不选中
						})
					}
				})

                //复选框实现全选
				$("#qx").click(function(){
					//让其他复选框的状态和全选框保持一致
					//方式一
					/* if($("#qx").prop("checked")){
						$(".aaa").qx();//让其他全选框选中
					}else{
						$(".aaa").bqx();//让其他全选框不选中
					} */
					//方式二
					if($("#qx").is(":checked")){
						$(".aaa").qx();//让其他全选框选中
					}else{
						$(".aaa").bqx();//让其他全选框不选中
					}
				})
				
				//完善全选
				$(".aaa").click(function(){
					var f = true;//假设全选框是选中的
					//遍历
					$(".aaa").each(function(i,ck){//ck--->每一个复选框
						if(ck.checked==false){
							f = false;
						}
					})
					//给全选框重新赋值
					$("#qx").prop("checked",f);
				})

---

二、第三方插件

好啦，接下来让我们来看看第三方插件是怎么运用的。

这是一个官方网站的表单验证插件的案例，让我们一起来看看：

步骤1：下载jQuery插件验证库： jquery.validate.js；

步骤2：将类库引入页面；

步骤2：两种方式使用验证；

              【1】JS方式【推荐】
                验证及错误信息
                $("表单元素").validate({
                            rules:{
                                    字段验证规则
                            }，
                            messages:{
                                    字段错误信息
                           }
                })
              【2】 HTML标签属性方式
                错误样式
                表格元素  label.error{
                                   样式
                }

放上代码：

                
		        

                /* 第三方插件:表单验证插件 */
				//表单验证(用户名、密码、确认密码、年龄、邮箱、网址url)
				$("#myForm").validate({
					rules:{
						//字段规则部分
						uname:{
							required:true,//验证不能为空
							rangelength:[6,10]
						},
						upwd1:"required",
						upwd2:{
							required:true,
							equalTo:"#upwd1"//必须要设置密码1的id为:"upwd1"才可以
						},
						uemail:{
							required:true,
							email:true
						},
						uage:{
							required:true,
							range:[1,150]
						},
						uurl:{
							required:true,
							url:true
						}
					},
					messages:{
						//错误信息提示部分
						uname:{
							required:"用户名必填!",//可自定义错误提示
							rangelength:"长度要在6-10位之间!"
						},
					}
				})

---

三、附上思维导图：

---

好啦，以上就是Leaf给大家带来的关于插件的一些知识笔分享！ 

希望可以给有需要的人带来帮助，互相学习！

抗击疫情，我们在家敲代码支持！！！