目录
1.下载jQuery插件验证库：jquery.validate.js
一，自定义插件
extend的用法
1.$.extend
- 对象继承：$.extend(对象1，对象2) 对象1会继承对象2的所有属性
- 扩展jQuery方法：$.extend({方法名：function(){方法体}}) tip:多个方法可用逗号隔开
2.$.fn.extend
扩展jQuery的对象方法：$.fn.extend({方法名：function(){方法体}})tip:多个方法可用逗号隔开
案例展示：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>extend</title>
<script src="js/jquery-3.5.1.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<!-- jquery的扩展功能 -->
<script type="text/javascript">
let good = {
study: function() {
console.log("小猿在上课");
}
};
let bad = {
sleep: function() {
console.log("小员在睡觉");
}
};
good.study(); //调用good对象的sleep属性，控制会输出"小猿在睡觉"
//study对象继承bad对象
$.extend(good, bad);
good.sleep(); //bad对象调用了good对象的study属性
//具备一个可以算出多个数字中数值最大的一个数字
$.extend({
//获取最大值
max: (...is) => {
//...is是简写的数字形式，可以传入多个参数
//相当于[1,2,3,4,5]
//可令max值为数组的第一号元素
let max = is[0]; //也能让max为负无穷大-Infinity
//遍历数组
for (let i of is) {
//使用三元运算进行比较
max = max < i ? i : max;
}
return max;
},
//获取最小值
min: (...is) => {
//...is是简写的数字形式，可以传入多个参数
//相当于[1,2,3,4,5]
//可令max值为数组的第一号元素
let min = is[0]; //也能让max为无穷大Infinity
//遍历数组
for (let i of is) {
//使用三元运算进行比较
min = min > i ? i : min;
}
return min;
}
})
//调用max函数
console.log($.max(1, 2, 3, 4, 5)); //控制台将会输出5
console.log($.min(1, 2, 3, 4, 5)); //控制台将会输出1
// 拓展的jquery对象上
$.fn.extend({
test: () => {
console.log("hello world")
}
})
//tip：
// $ 是jquery
// $("xx") 是jquery对象
$("a").test()
//test()只能是jQuery对象才能使用
</script>
</body>
</html>
二，第三方插件
-
插件名：jQuery validation
-
使用步骤：
1.下载jQuery插件验证库：jquery.validate.js
2.将类库引到页面
3.两种方法实现验证
(1)html标签属性方式
(2)js方式(推荐)
a.验证及错误信息的框架
b.错误样式
代码展示：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表单验证</title>
<script src="js/jquery-3.5.1.js" type="text/javascript" charset="utf-8"></script>
<!-- 导入jQuery插件 -->
<script src="js/jquery-validation-1.19.0/dist/jquery.validate.js" type="text/javascript" charset="utf-8">
</script>
<!-- 将语言设置为中文 -->
<script src="js/jquery-validation-1.19.0/dist/localization/messages_zh.js" type="text/javascript"
charset="utf-8">
// <script src="js/jquery-validation-1.19.0/dist/localization/messages_zh_TW.js">
</script>
</script>
<style type="text/css">
/* 编辑错误样式 */
label.error {
/* 提醒字段设置字体颜色 */
color: #003399;
}
</style>
</head>
<body>
<form action="">
<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: {
password: {
required: "密码不能为空！"
}
}
})
</script>
</body>
</html>
效果图展示
jQuery的学习就到此结束了，咱们下期再见！