jQuery插件

時宜

已于 2022-03-24 01:05:30 修改

阅读量441

点赞数 7

文章标签： css html jquery javascript

于 2022-03-22 12:07:40 首次发布

本文链接：https://blog.csdn.net/weixin_62270300/article/details/123637997

版权

一、自定义插件

1.$.extend

2.$.fn.extend

二、第三方插件(jQuery Validate)

一、自定义插件

1.$.extend

对象继承：$.extend(对象1，对象2) ===>对象1继承对象2

$.extend(qq, ww)
qq.吃饭() //本身自带
qq.写项目() //从ww里面继承的

扩展jQuery类的方法：$.extend({方法名：function(){方法体}})

案例：扩展$.max的方法

// 具备一个可以算出多个数字的最大值的方法
$.extend({
	max: (...is) => {
       // ...is 具备多个参数 且是一个数组
       let max=-Infinity//Infinity  无穷大
       // 打擂台
	   for(let i of is){
			max=max<i?i:max
		}
			return max
		}
	})
		console.log($.max(1,2,3,4,5,6,7))

注：多个方法之间用逗号隔开

2.$.fn.extend

扩展jQuery对象方法：$.fn.extend({方法名:function(){方法体}})

// 拓展的jquery对象
	$.fn.extend({
     	test:()=>{
		console.log("hello")
	}
	})
	// $ 是jquery
	// $("xx")是jquery对象
	$("a").test()

注：test()是扩展到jQuery对象上的 $后面需带有括号并且里面得有值

二、第三方插件(jQuery Validate)

什么是jQuery Validate？

jQuery Validate插件为表单提供了强大的验证功能，让客户端表单验证变得更简单，同时提供了大量的定制选项，满足应用程序各种需求。该插件捆绑了一套有用的验证方法，包括URL和电子邮件验证，同时提供了一个用来编写用户自定义方法的API。所有的捆绑方法默认使用英语作为错误信息，且已翻译成其它37种语言。

1.默认校验规则

序号	规则	描述
1	required：true	必须输入的字段
2	remote：“check.php”	使用ajax方法调用check.php验证输入值
3	email：true	必须输入正确格式的电子邮件
4	url:true	必须输入正确格式的网址
5	date：true	必须输入正确格式的日期
6	dateISO：true	必须输入正确格式的日期(ISO)，例如：2009-06-23,2009/01/11，只验证格式，不验证有效性
7	number：true	必须输入合法的数字（负数、小数）
8	digits：true	必须输入整数
9	ceditcard：	必须输入合法的信用卡号
10	equalTo：“#field”	输入值必须和#field相同
11	accept：	输入拥有合法后缀名的字符串（上传文件的后缀）
12	maxlength：5	输入长度最多是5的字符串（汉字算一个字符）
13	minlength：10	输入长度最小是5的字符串（汉字算一个字符）
14	rangelength：[5,10]	输入长度必须介于5和10之间的字符串（汉字算一个字符）
15	range：[5,10]	输入值必须介于5和10之间
16	max：5	输入值不能大于5
17	min：10	输入值不能小于10

2.使用步骤

1.下载jQuery插件验证库

访问下面的URL 下载最新版的jQuery Validate插件

https://jqueryvalidation.org/

2.将类引入到页面

先将下载好的文件复制到项目中去

然后引入到页面中去

<script src="js/jquery-3.5.1.js"></script>
<script src="js/jquery-validation-1.19.0/dist/jquery.validate.js"></script>

注：表单验证插件是基于jquery的再导入插件之前需要先导入jquery

3.两种方式使用验证

HTML标签属性方式
JS方式(推荐)

验证及错误信息

$("表单元素").validate({
rules:{
  字段验证规则
},
messages:{
  字段错误信息
}
})

错误样式

表格元素 lable.error{ 样式 }

案例：表单验证（用户名、密码）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- 表单验证插件是基于jquery的 再导入插件之前需要先导入jquery -->
		<script src="js/jquery-3.5.1.js"></script>
		<script src="js/jquery-validation-1.19.0/dist/jquery.validate.js"></script>
		<script src="js/jquery-validation-1.19.0/dist/localization/messages_zh.js"></script>

		<style type="text/css">
			label.error {
				color: red;
			}
		</style>
	</head>
	<body>
		<form action="" method="post">
			<p><input type="text" name="username" placeholder="用户名" /></p>
			<p><input type="text" name="password" placeholder="密码" /></p>
			<p>
				<button>登录</button>
				<button type="reset">取消</button>
			</p>
		</form>
	<script type="text/javascript">
		$("form").validate({
			rules: {
			username: {
				required: true,
				rangelength: [5, 10]
			},
			password: "required"
			},
			messages: {
			username: {
				required: "用户名不能为空",
				rangelength: "用户名长度在5到10之间"
				},

				password: {
					required: "密码不能为空",
				}

				}
			})
		</script>
	</body>
</html>

效果图如下：

总结：

今天的分享就到这里结束啦！！✌

以上就是关于jQuery插件的一些内容！！📖

期待下次见面！！😊

時宜

关注

7
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery插件

目录一、自定义插件1.$.extend2.$.fn.extend二、第三方插件(jQuery Validate)什么是jQuery Validate？1.默认校验规则2.使用步骤1.下载jQuery插件验证库2.将类引入到页面3.两种方式使用验证一、自定义插件1.$.extend对象继承：$.extend(对象1，对象2) ===>对象1继承对象2$.extend(qq, ww)qq.吃饭() //本身自带qq.写项目() //从ww
复制链接

扫一扫