学习目标
jquery事件
表单验证插件
一、jQuery事件
1、概述
jQuery 事件处理方法是 jQuery 中的核心函数。我们之前使用元素对象直接绑定事件的方式进行开发,但这样的缺点是,当该元素对象身上的事件使用完成后如果想解除该事件是不可以的,所以下面我学习事件的另一种绑定方式。
方法 | 描述 |
---|---|
bind() | 向匹配元素附加一个或更多事件处理器 |
blur() | 触发、或将函数绑定到指定元素的 blur 事件 |
change() | 触发、或将函数绑定到指定元素的 change 事件 |
click() | 触发、或将函数绑定到指定元素的 click 事件 |
dblclick() | 触发、或将函数绑定到指定元素的 double click 事件 |
delegate() | 向匹配元素的当前或未来的子元素附加一个或多个事件处理器 |
die() | 移除所有通过 live() 函数添加的事件处理程序。 |
error() | 触发、或将函数绑定到指定元素的 error 事件 |
event.isDefaultPrevented() | 返回 event 对象上是否调用了 event.preventDefault()。 |
event.pageX | 相对于文档左边缘的鼠标位置。 |
event.pageY | 相对于文档上边缘的鼠标位置。 |
event.preventDefault() | 阻止事件的默认动作。 |
event.result | 包含由被指定事件触发的事件处理器返回的最后一个值。 |
event.target | 触发该事件的 DOM 元素。 |
event.timeStamp | 该属性返回从 1970 年 1 月 1 日到事件发生时的毫秒数。 |
event.type | 描述事件的类型。 |
event.which | 指示按了哪个键或按钮。 |
focus() | 触发、或将函数绑定到指定元素的 focus 事件 |
keydown() | 触发、或将函数绑定到指定元素的 key down 事件 |
keypress() | 触发、或将函数绑定到指定元素的 key press 事件 |
keyup() | 触发、或将函数绑定到指定元素的 key up 事件 |
live() | 为当前或未来的匹配元素添加一个或多个事件处理器 |
load() | 触发、或将函数绑定到指定元素的 load 事件 |
mousedown() | 触发、或将函数绑定到指定元素的 mouse down 事件 |
mouseenter() | 触发、或将函数绑定到指定元素的 mouse enter 事件 |
mouseleave() | 触发、或将函数绑定到指定元素的 mouse leave 事件 |
mousemove() | 触发、或将函数绑定到指定元素的 mouse move 事件 |
mouseout() | 触发、或将函数绑定到指定元素的 mouse out 事件 |
mouseover() | 触发、或将函数绑定到指定元素的 mouse over 事件 |
mouseup() | 触发、或将函数绑定到指定元素的 mouse up 事件 |
one() | 向匹配元素添加事件处理器。每个元素只能触发一次该处理器。 |
ready() | 文档就绪事件(当 HTML 文档就绪可用时) |
resize() | 触发、或将函数绑定到指定元素的 resize 事件 |
scroll() | 触发、或将函数绑定到指定元素的 scroll 事件 |
select() | 触发、或将函数绑定到指定元素的 select 事件 |
submit() | 触发、或将函数绑定到指定元素的 submit 事件 |
toggle() | 绑定两个或多个事件处理器函数,当发生轮流的 click 事件时执行。 |
trigger() | 所有匹配元素的指定事件 |
triggerHandler() | 第一个被匹配元素的指定事件 |
unbind() | 从匹配元素移除一个被添加的事件处理器 |
undelegate() | 从匹配元素移除一个被添加的事件处理器,现在或将来 |
unload() | 触发、或将函数绑定到指定元素的 unload 事件 |
重要的如下图:
2、事件的绑定
html代码:
<body>
<input type="button" value="Click">
</body>
js代码:
行内式js代码:
<input type="button" value="Click" onclick="btnClick();">
<script>
function btnClick() {
alert("按钮被点击了...");
}
</script>
内嵌式js代码:
<input type="button" value="Click">
<script>
// 页面入口函数
$(function () {
// jquery 方法绑定事件 :
$("input").click(function () {
alert("按钮被点击了...");
});
});
</script>
绑定一个事件:
Jq对象.bind("事件类型",响应函数);
jquery代码:
<script src="../js/jquery-3.3.1.min.js"></script>
<script>
$(function () {
// bind()
// 绑定单个事件
$("input").bind("click", function () {
alert("按钮被点击了...");
});
// unbind()
// 括号里面不写参数,代表解绑所有事件
$("input").unbind("click");
});
</script>
绑定多个事件:
Jq对象.bind({事件类型1:function(){},事件类型2:function(){}});
jquery代码:
<script src="../js/jquery-3.3.1.min.js"></script>
<script>
$(function () {
// bind()
// 绑定多个事件
$("input").bind({
"click": function () {
alert("按钮被点击了...");
},
"mouseover": function () {
alert("鼠标移入...");
},
"mouseout": function () {
alert("鼠标移出...");
}
});
// unbind()
// 括号里面不写参数,代表解绑所有事件
$("input").unbind("click");
});
</script>
3、事件的解绑
解绑所有事件:
Jq对象.unbind();
解绑指定事件:
Jq对象.unbind("click");
$("input").unbind();
$("input").unbind("click");
4、事件切换
hover(over,out) == mouseover+mouseout
格式:
Jq对象.hover(function(){
//等同于mouseover事件,鼠标移入会执行
},function(){
//等同于mouseout事件,鼠标移出会执行
})
jquery代码:
// hover(function(){mouseover},function(){mouseout});
$("input").hover(function () {
// mouseover 事件
alert("鼠标移入...");
}, function () {
// mouseout 事件
alert("鼠标移出...");
});
格式:
Jq对象.hover(function(){
//只写一个匿名函数,代表鼠标移入和移出分别执行一次这里的js语句
})
<script src="../js/jquery-3.3.1.min.js"></script>
<script>
$(function () {
// 只写一个function,代表移入和移出都会执行一次里面的语句
// hover(function(){mouseover,mouseout});
$("input").hover(function () {
alert("鼠标移动了...");
});
});
</script>
5、案例-左右选择
5.1、说明:
如下图、选 中下拉A框中的选项1移动到下接B中。
1. 点击按钮 --> 让下拉框A中 选中的项 到下拉框B中,并且添加到最后
2. 点击按钮 ==> 让下拉框A中 所有的项 到下拉框B中
3. 点击按钮 <-- 让下拉框B中 选中的项 到下拉框A中,并且添加到最后
4. 点击按钮 <== 让下拉框B中 所有的项 到下拉框A中
5.2、演示:
html代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
body {
font-family: Courier;
font-size: 12px;
margin: 0px 0px 0px 0px;
overflow-x: hidden;
overflow-y: hidden;
background-color: #B8D3F4;
}
td {
font-size: 12px;
}
.td3 {
background-color: #B8D3F4;
text-align: center;
line-height: 20px;
width: 160px;
}
.tb td {
font-size: 12px;
border: 2px groove #ffffff;
}
.button {
border: 1px ridge #ffffff;
line-height: 18px;
height: 20px;
width: 45px;
padding-top: 0px;
background: #CBDAF7;
color: #000000;
font-size: 9pt;
font-family: Courier;
}
</style>
</head>
<body>
<div style="border:1px dashed #E6E6E6;margin:150px 0px 0px 450px; width:450px; height:300px; background-color:#E6E6E6;">
<table width="385" height="169" border="0" align="left" cellpadding="0" cellspacing="0" style="margin:15px 0px 0px 15px;">
<tr>
<td width="126">
<!--multiple="multiple" 能同时选择多个 size="10" 确定下拉选的长度-->
<select id="_left" name="first" size="10" multiple="multiple" class="td3" id="first">
<option value="选项1">选项1</option>
<option value="选项2">选项2</option>
<option value="选项3">选项3</option>
<option value="选项4">选项4</option>
<option value="选项5">选项5</option>
<option value="选项6">选项6</option>
<option value="选项7">选项7</option>
<option value="选项8">选项8</option>
</select>
</td>
<td width="89" valign="middle" align="center">
<input name="add" id="add" type="button" class="button" value="-->" />
<input name="add_all" id="add_all" type="button" class="button" value="==>" />
<input name="remove" id="remove" type="button" class="button" value="<--" />
<input name="remove_all" id="remove_all" type="button" class="button" value="<==" />
</td>
<td width="127" align="left">
<select id="_right" name="second" size="10" multiple="multiple" class="td3" id="second">
<option value="选项9">选项9</option>
</select>
</td>
</tr>
</table>
</div>
</body>
</html>
jquery代码:
<script src="../js/jquery-3.3.1.min.js"></script>
<script>
$(function () {
// 说明 : 获取所有的 input 标签按钮
var inputs = $("input");
// 将左侧当前选中的添加到右侧
// 1. 给第一个 input 标签按钮绑定单击事件
inputs.eq(0).click(function () {
// 2. 将左边所有选中的 option 选项框, 拼接到右边.
$("#_left option:selected").appendTo($("#_right"));
});
// 将左侧全部添加到右侧
inputs.eq(1).click(function () {
$("#_left option").appendTo($("#_right"));
});
// 将右侧当前选中的添加到左侧
inputs.eq(2).click(function () {
$("#_right option:selected").appendTo($("#_left"));
});
// 将右侧全部添加到左侧
inputs.eq(3).click(function () {
$("#_right option").appendTo($("#_left"));
});
});
</script>
二、表单验证插件
1、说明:
插件:实现了某些特定功能的组件。
框架:是一个集合体,里面不仅仅有功能。
插件一共分为两类,一类是基于js的插件,一类是基于jquery的插件。
唯一的区别就是,基于jquery的插件在使用的时候一定要引jquery的包!
简介:jQuery Validate 插件为表单提供了强大的验证功能,让客户端表单验证变得更简单,同时提供了大量的定制选项,满足应用程序各种需求。该插件捆绑了一套有用的验证方法,包括 URL 和电子邮件验证,同时提供了一个用来编写用户自定义方法的 API。所有的捆绑方法默认使用英语作为错误信息,且已翻译成其他 37 种语言。
该插件是由 Jörn Zaefferer 编写和维护的,他是 jQuery 团队的一名成员,是 jQuery UI 团队的主要开发人员,是 QUnit 的维护人员。该插件在 2006 年 jQuery 早期的时候就已经开始出现,并一直更新至今。
2、下载
官网地址:http://jqueryvalidation.org/files/jquery-validation-1.15.0.zip
帮助文档位置:http://jqueryvalidation.org/documentation/
目录结构
默认校验规则:
序号 | 规则 | 描述 |
---|---|---|
1 | required:true | 必须输入的字段。 |
2 | remote:"check.php" | 使用 ajax 方法调用 check.php 验证输入值。 |
3 | email:true | 必须输入正确格式的电子邮件。 |
4 | url:true | 必须输入正确格式的网址。 |
5 | date:true | 必须输入正确格式的日期。日期校验 ie6 出错,慎用。 |
6 | dateISO:true | 必须输入正确格式的日期(ISO),例如:2009-06-23,1998/01/22。只验证格式,不验证有效性。 |
7 | number:true | 必须输入合法的数字(负数,小数)。 |
8 | digits:true | 必须输入整数。 |
9 | creditcard: | 必须输入合法的信用卡号。 |
10 | equalTo:"#field" | 输入值必须和 #field 相同。 |
11 | accept: | 输入拥有合法后缀名的字符串(上传文件的后缀)。 |
12 | maxlength:5 | 输入长度最多是 5 的字符串(汉字算一个字符)。 |
13 | minlength:10 | 输入长度最小是 10 的字符串(汉字算一个字符)。 |
14 | rangelength:[5,10] | 输入长度必须介于 5 和 10 之间的字符串(汉字算一个字符)。 |
15 | range:[5,10] | 输入值必须介于 5 和 10 之间。 |
16 | max:5 | 输入值不能大于 5。 |
17 | min:10 | 输入值不能小于 10。 |
3、演示
html代码:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>我的jquery表单校验页面</title>
<style type="text/css">
p{text-align: center;font-size:24px;}
table{margin: 0 auto;border: 0;}
table tr{height:40px;border:0;}
table tr td{padding:0 14px;border:1px solid #999}
.error{color:red;}
</style>
</head>
<body>
<p>员工信息录入</p>
<form name="empForm" id="empForm" method="get" action="test.html" novalidate="novalidate">
<table border="1">
<tbody><tr>
<td>真实姓名(不能为空 )</td>
<td><input type="text" id="realname" name="realname">
</td>
</tr>
<tr>
<td>登录名(登录名不能为空,长度在5-8之间):</td>
<td><input type="text" id="username" name="username"></td>
</tr>
<tr>
<td>密码(不能为空,长度在6-12之间):</td>
<td><input type="password" id="psw" name="psw"></td>
</tr>
<tr>
<td>重复密码(不能为空,长度在6-12之间):</td>
<td><input type="password" id="psw2" name="psw2"></td>
</tr>
<tr>
<td>性别(必选其一)</td>
<td>
<input type="radio" id="gender_male" value="m" name="gender"> 男
<input type="radio" id="gender_female" value="f" name="gender"> 女
<label id="gender-error" class="error" for="gender"></label>
</td>
</tr>
<tr>
<td>年龄(必填26-50):</td>
<td><input type="text" id="age" name="age"></td>
</tr>
<tr>
<td>你的学历:</td>
<td> <select name="edu" id="edu">
<option value="">-请选择你的学历-</option>
<option value="a">专科</option>
<option value="b">本科</option>
<option value="c">研究生</option>
<option value="e">硕士</option>
<option value="d">博士</option>
</select>
</td>
</tr>
<tr>
<td>出生日期(1982/09/21):</td>
<td><input type="text" id="birthday" name="birthday" value=""></td>
</tr>
<tr>
<td>兴趣爱好:</td>
<td colspan="2">
<input type="checkbox" name="checkbox1" id="qq1"> 乒乓球
<input type="checkbox" name="checkbox1" id="qq2" value="1"> 羽毛球
<input type="checkbox" name="checkbox1" id="qq3" value="2"> 上网
<input type="checkbox" name="checkbox1" id="qq4" value="3"> 旅游
<input type="checkbox" name="checkbox1" id="qq5" value="4"> 购物
<label id="checkbox1-error" class="error" for="checkbox1"></label>
</td>
</tr>
<tr>
<td align="left">电子邮箱:</td>
<td><input type="text" id="email" name="email"></td>
</tr>
<tr>
<td align="left">身份证(15-18):</td>
<td><input type="text" id="card" name="card"></td>
</tr>
<tr>
<td></td>
<td><input type="submit" name="firstname" id="firstname" value="保存"></td>
</tr>
</tbody></table>
</form>
</body>
</html>
jquery代码:
validate是jQuery插件,其必须在jQuery的基础上进行运行。我们将导入jquery库、validate库
<script src="../js/jquery-3.3.1.min.js"></script>
<script src="../js/jquery.validate.min.js"></script>
校验模板:
<script>
$(function () {
$("form表单选择器").validate({
rules: {
表单项name值1: 校验规则,
表单项name值2: 校验规则
},
messages: {
表单项name值1: 错误提示信息,
表单项name值2: 错误提示信息
}
});
});
</script>
<!--导包-->
<script src="../js/jquery-3.3.1.min.js"></script>
<script src="../js/jquery.validate.min.js"></script>
<script>
$(function () {
$("#empForm").validate({
rules: {
realname: "required",
username: {
required: true,
rangelength: [5,8]
},
psw: {
required: true,
rangelength: [6,12]
},
psw2: {
required: true,
equalTo: "#psw"
},
gender: "required",
age: {
required: true,
range: [26,50]
},
edu: "required",
birthday: {
required: true,
dateISO: true
},
checkbox1: "required",
email: {
required: true,
email: true
},
card: "required"
},
messages: {
realname: "请输入你的真实姓名",
username: {
required: "请输入您的用户名",
rangelength: "用户名必须在{0}-{1}位之间"
},
psw: {
required: "请输入密码",
rangelength: "密码长度必须在{0}-{1}位之间."
},
psw2: {
required: "请再次输入密码",
equalTo: "两次密码保持一致"
},
gender: "请选择性别",
age: {
required: "请输入您的年龄",
range: "年龄必须介于{0}-{1}数值之间"
},
edu: "请选择学历",
birthday: {
required: "请输入你的生日",
dateISO: "生日格式不正确"
},
checkbox1: "请选择您的兴趣爱好",
email: {
required: "请输入您的邮箱",
email: "邮箱格式不正确"
},
card: "请输入您的身份证号码"
}
});
});
</script>
4、自定义校验规则
如果预定义的校验规则尚不能满足需求的话可以进行自定义校验规则:
格式:
$.validator.addMethod(name,method,message);
参数1:name,校验规则的自定义名称。例如:aaa
参数2:method,执行校验时使用的处理函数。返回true表示校验通过,返回false表示校验未通过。
function(value,element,params){} ,处理函数被调用时,可以获得3个参数。
参数value:表单项的value值。例如:<input value="">
参数element:被校验的表单项对象。
参数params:使用当前校验规则传递的值。例如:rules : { username : {required : true} }
只有为true才会开始校验
参数3:message,校验未通过时的提示信息(可以不写,不写可以在messages里面配置)。
注意:自定义校验规则写完了之后,一定要在rules中开启!
自定义校验代码实现:
<!--导包-->
<script src="../js/jquery-3.3.1.min.js"></script>
<script src="../js/jquery.validate.min.js"></script>
<script>
$(function () {
// 自定义方法 :
// $.validator.addMethod("方法名称", "匿名函数", "提示消息");
$.validator.addMethod("cardLength", function (value, element, params) {
// 使用 value 进行长度判断
if (value.length == 15 || value.length == 18) {
return true;
}
}, "身份证号码长度不正确.");
$.validator.addMethod("cardFormat", function (value, element, params) {
// 使用 value 进行长度判断
if (value.length == 15) {
// 说明 : 如果身份证号码为 15 位, 要求全部为 `数字`.
var regex = /\d{15}/;
if (regex.test(value)) {
return true;
}
}
if (value.length == 18) {
// 说明 : 如果身份证号码为 18 为, 有两种可能, 1. 全部为数字 2. 前17位为数字,最后一位为 [xX]
var regex = /\d{18}|\d{17}[xX]/;
if (regex.test(value)) {
return true;
}
}
}, "身份证号码格式不正确.");
// 开始校验 :
$("#empForm").validate({
rules: {
realname: "required",
username: {
required: true,
rangelength: [5,8]
},
psw: {
required: true,
rangelength: [6,12]
},
psw2: {
required: true,
equalTo: "#psw"
},
gender: "required",
age: {
required: true,
range: [26,50]
},
edu: "required",
birthday: {
required: true,
dateISO: true
},
checkbox1: "required",
email: {
required: true,
email: true
},
card: {
required: true,
cardLength: true,
cardFormat: true
}
},
messages: {
realname: "请输入你的真实姓名",
username: {
required: "请输入您的用户名",
rangelength: "用户名必须在{0}-{1}位之间"
},
psw: {
required: "请输入密码",
rangelength: "密码长度必须在{0}-{1}位之间."
},
psw2: {
required: "请再次输入密码",
equalTo: "两次密码保持一致"
},
gender: "请选择性别",
age: {
required: "请输入您的年龄",
range: "年龄必须介于{0}-{1}数值之间"
},
edu: "请选择学历",
birthday: {
required: "请输入你的生日",
dateISO: "生日格式不正确"
},
checkbox1: "请选择您的兴趣爱好",
email: {
required: "请输入您的邮箱",
email: "邮箱格式不正确"
},
card: {
required: "请输入身份证号码",
}
}
});
});
</script>