Appearance
jQuery深入
案例目标
省市二级联动
左右移动
表单校验
jQuery遍历【了解】
在 java 中存储一列连续的数据往往会用到数组或者集合，当需要从数组或者集合中将每一个元素取出来的时候就必须对数组或者集合进行遍历。我们在学习 javascript 的时候学习过一种 js 的遍历方式，在 jQuery 中，提供了两种常用的遍历方式，分别是：
javascript
// 方式一：jq的对象方法
jq对象.each(function(index,element){
//index:被遍历到的元素的索引
//element:被遍历到的元素
})
// 方式二：jq全局方法
$.each(jq对象,function(index,element){
//index:被遍历到的元素的索引
//element:被遍历到的元素
})【案例】jQuery 遍历案例
【需求】根据按钮上的提示信息进行相关操作
【素材】
html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>05-可见性过滤选择器.html</title>
<script type="text/javascript" src="../js/jquery-3.3.1.js" ></script>
<script type="text/javascript">
$(function() {
//jq遍历
/*
var arr = [5,2,0];
* 方式一：jq对象方法
* jq对象.each(function(index,element){
* index:索引
* element:遍历的当前的值
* });
*
* 方式二：jq的全局函数
* $.each(jq对象,function(index,element){
* index:索引
* element:遍历的当前的值
* })
* */
// <input type="button" value=" 选取所有的文本隐藏域, 并打印它们的值" id="b1" />
//绑定事件
$("#b1").click(function () {
//选取所有的文本隐藏域, 并打印它们的值
var inputs = $("input[type='hidden']");
//遍历inputs
inputs.each(function (index, element) {
//index：索引
//element：js标签对象
alert(index + " " + element.value+" "+this.value + " "+$(this).val());
});
});
/*
* this:
* 1.在动态绑定事件中，this指向的是被绑定事件的对象；
* 2.在遍历中：this指向的是当前被遍历到的元素；
* */
// <input type="button" value=" 选取所有的文本隐藏域, 并打印它们的值" id="b2" />
//给b2绑定点击事件
$("#b2").click(function () {
//选取所有的文本隐藏域, 并打印它们的值
var inputs = $("input[type='hidden']");
//遍历 jq的全局函数
$.each(inputs,function (index, element) {
alert(index+" "+this.value+" "+element.value)
})
})
// <input type="button" value=" 遍历数组" id="b3" />
//给b3绑定事件
$("#b3").click(function () {
var arr = [5, 2, 0, true, null, undefined, "hello"];
$(arr).each(function (index, element) {
alert(element)
});
});
//jquery 3.0 新特性 for of
$("#b4").click(function () {
var arr = [5, 2, 0, true, null, undefined, "hello"];
for(var ele of arr){
alert(ele);
}
});
});
</script>
</head>
<body>
<input type="button" value=" 选取所有的文本隐藏域, 并打印它们的值" id="b1" />
<input type="button" value=" 选取所有的文本隐藏域, 并打印它们的值" id="b2" />
<input type="button" value=" 遍历数组" id="b3" />
<input type="button" value=" for of遍历数组" id="b4" />
<br /><br />
<!--文本隐藏域-->
<input type="hidden" value="hidden_1">
<input type="hidden" value="hidden_2">
<input type="hidden" value="hidden_3">
<input type="hidden" value="hidden_4">
</body>
</html>【总结】
- jQuery 的两种遍历方式中得到的 element 都是 JS 对象（dom 元素），如需转换成 jQuery 对象只需要使用$包裹；
- jQuery 的两种遍历方式中，第一种遍历使用的比较多；
【this 关键字小结】
1.在动态绑定事件中，this指向的是被绑定事件的对象； 2.在遍历中：this指向的是当前被遍历到的元素；
jQuery事件
事件绑定与解绑
【案例】jQuery 事件案例
【需求】分别使用 JS 和 jQuery 的方式给素材中的按钮绑定点击事件；
【参考代码】
html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<input type="button" value="分别使用JS给我绑定点击事件，点击后弹出Hello World" id="b1"/>
<input type="button" value="分别使用jQuery给我绑定点击事件，点击后弹出Hello World" id="b2"/>
</body>
<script type="text/javascript" src="js/jquery-3.3.1.js" ></script>
<script type="text/javascript">
//1.使用JS的方式添加点击事件
document.getElementById("b1").onclick = function(){
alert("Hello World! js");
}
//2.使用jQuery的方式给按钮添加点击事件
$("#b2").click(function(){
alert("Hello World! jQuery");
})
</script>
</html>事件切换【了解】
事件的切换主要由以下两个方法完成：
- 鼠标的移入移出事件:hover([over,]out) ；
- 多次点击切换执行：toggle([speed],[easing],[fn])；
【参考代码】
【需求】：
- 调用 hover()方法，鼠标移入 div 和移除 div 后改变 div 中的文本信息；
- 点击按钮，完成 toggle()事件切换【了解】；
html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!--
<script type="text/javascript" src="../js/jquery-3.3.1.js" ></script>
-->
<script src="../js/jquery-1.8.3.js"></script>
<script type="text/javascript">
/*
* 事件切换：
* jq对象.hover(fn1,fn2);
* fn1:mouseover 鼠标移入事件
* fn2:mouseout 鼠标移出事件
*
* toggle(fn1,fn2,fn3...);
* 注意：
* 对点击事件有效
* 只在jquery-1.8.3.js及其以前的版本生效
*
* */
$(function(){
$("#divId").hover(
function(){ this.innerHTML = "鼠标移入了" },
function(){ this.innerHTML="鼠标移出了"}
);
//toggle
$("#bId").toggle(
function () {
alert(1);
},
function () {
alert(2);
},
function () {
alert(3);
}
);
});
</script>
</head>
<body>
<input type="button" id="bId" value="点击查看" /><br>
<div id="divId" style="border:1px solid red;height:100px;width:100px">事件切换</div>
</body>
</html>jQuery插件-validate
javascript
// value: 表单当中，用户填写的内容
// element: dom-js对象
// params: [0, 10]
$.validator.addMethod("ruleName", function(value, element, params) {
// 返回值:
// true: 代表校验成功
// 表单允许提交(前提:所有的校验项，全部校验通过)
// false: 代表校验失败
// 表单不允许提交，并提示错误信息
}, "身份证号长度不正确");
$("#form").validate({
rules: {
username: {
required: true
},
card: {
ruleName: [0, 10]
}
},
messages: {
}
});
<form>
<input name="username">
<input name="card">
</form>问题：之前，我们做过表单的验证。表单的验证方式比较简单，只是比较 繁琐，需要我们获取值，比较值，然后对用户做出相应的反馈。当注册界面中的内容比较多的时候，需要验证的东西比较多的时候，是非常繁琐的。所以有了我们接下来学习的表单验证的插件。
什么是插件
插件就是将 jQuery 实现的某些特定的功能进行封装，而我们可以按照插件的语法去操作，就可以实现很多复杂的功能。
我们任何开发人员都可以借助于 jQuery 提供的扩展接口来开发自己的插件，从而来简化开发，实现 write less， do more 的愿望。现在越来越多的开发者借助与 JQuery 开发插件，已经形成了围绕 JQuery 的生态圈！
什么是 jQuery Validate
本质上也是一个 js 文件。
下载
下载地址
官网下载地址：http://jqueryvalidation.org/files/jquery-validation-1.15.0.zip 帮助文档位置：http://jqueryvalidation.org/documentation/ 菜鸟网地址： http://www.runoob.com/jquery/jquery-plugin-validate.html
目录结构
我们需要的文件在： dist 发布代码里面的 jquery.validate.js
快速入门
【使用步骤】
- 导入 jquery 文件；
- 导入 jquery.validate.js 文件；
- 在页面加载完成后，确定对哪个表单进行校验，校验方法为 jq 表单.validate();
- 配置校验规则和提示信息；
【需求】：
使用 jQuery 的 validate 插件实现一个简单的表单验证：
- 用户名不能为空；
- 密码是 4-6 位；
【参考代码】
html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body style="margin: 50px;">
<form id="form1" action="#" method="get">
<table>
<tr>
<td>用户名</td>
<td><input type="text" name="username" id="username" /></td>
</tr>
<tr>
<td>密码</td>
<td><input type="password" name="password" id="password" /></td>
</tr>
<tr>
<td></td>
<td><input type="submit" value="提交" /></td>
</tr>
</table>
</form>
<!--引入JQ库-->
<script src="../js/jquery-3.3.1.js"></script>
<!--引入validate库-->
<script src="../js/jquery.validate.js"></script>
<script type="text/javascript">
$("#form1").validate({
rules:{
username:{
required:true
},
password:{
required:true,
minlength:4,
maxlength:6
}
},
messages:{
username:{
required:"用户名必填"
},
password:{
required:"密码不能为空",
minlength:"密码的最小长度为4",
maxlength:"密码的最大长度为6"
}
}
})
</script>
</body>
</html>快速入门校验方法说明
validate()方法
使用 jQuery validate 插件必须使用表单对象调用 validate()方法，这样才能确定对哪个表单进行校验；
rules： 配置验证规则
配置验证规则，里面是具体的验证规则（JSON 结构），key 是被验证表单元素的 name 属性的值，value 是验证规则 (也是 json 格式)，如：
html
rules:{
username:{
required:true
},
password:{
required:true,
minlength:4,
maxlength:6
}
}【默认校验规则】
| 校验类型 | 取值 | 描述 |
|---|---|---|
| required | true|false | 必填字段 |
| true|false | 邮件地址 | |
| url | true|false | 统一资源定位符 |
| date | 数字 | 日期 |
| dateISO | 字符串 | 日期(YYYY-MM-dd yyyy/MM/dd) |
| number | true|false | 数字(负数，小数) |
| digits | true|false | 整数 |
| minlength | 数字 | 最小长度 |
| maxlength | 数字 | 最大长度 |
| rangelength | [minL,maxL] | 长度范围 |
| min | 数字 | 最小值 |
| max | 数字 | 最大值 |
| range | [min,max] | 值范围 |
| equalTo | jQuery表达式 | 两个值相同 |
| remote | url路径 | ajax校验 |
messages：错误提示信息
配置通过验证规则不通过要显示的提示信息（JSON 结构），里面是具体的错误信息（JSON 结构），key 是被验证表单元素的 name 属性的值，value 是提示信息 (也是 json 格式)，如：
html
messages:{
username:{
required:"用户名必填"
},
password:{
required:"密码不能为空",
minlength:"密码的最小长度为4",
maxlength:"密码的最大长度为6"
}
}【注意】错误提示信息往往是在被校验字段的后面，通过添加 label 标签来显示的。
也就是说，当校验不通过时，会自动在被校验字段后面添加如下标签：
所以，我们可以通过添加 style 样式来对错误信息进行修饰：
html
<style type="text/css">
label.error {
color: red;
}
</style>【注意】如果是 radio 或者 checkbox，校验不通过时默认的提示信息在第一个 radio 后面，解决这个问题有两种方案：
- 可以在 validate（）方法中添加以下代码：
javascript
errorPlacement: function(error, element) {
if ( element.is(":radio") )
error.appendTo ( element.parent() );
else if ( element.is(":checkbox") )
error.appendTo ( element.parent() );
//else if ( element.is("input[name=captcha]") )
// error.appendTo ( element.parent() );
else
error.insertAfter(element);
}- 在 radio 标签前后面加上以下标签：注意，lable 的 for 属性值要与 radio 的 name 属性值保持一致。
<label class="error" for="gender" style="display: none;"></label>【validate 插件入门】
html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="../js/jquery-3.3.1.js"></script>
<script src="../js/jquery.validate.js"></script>
<script src="../js/messages_zh.js"></script>
<style>
.error{
color: red;
}
</style>
<script>
/*
* validate入门：
* 1、导入jquery.js;
* 2、导入validate.js
* 3、确定对哪个表单进行校验；使用validate方法对表达进行校验；
* 4、validate() 配置：校验规则，错误提示信息；
* */
$(function () {
//确定对formId表单记性校验
$("#formId").validate({
//配置校验规则
rules:{
//选中（name属性值）标签 进行校验
username:{
required:true
},
password:{
required:true,
number:true
},
repassword:{
required:true,
equalTo:$("input[name='password']")
},
zuixiaozhi:{
min:4
},
shuzhiqujian:{
range:[18,130]
},
gender:{
required:true
}
},
//配置错误提示信息
messages:{
username:{
required:"用户名必填"
},
gender:{
required:"性别必填"
},
shuzhiqujian:{
range:"年龄必须在{0}到{1}之间"
}
}
});
});
</script>
</head>
<body>
<form id="formId" action="">
必填：<input type="text" name="username" /> <br/>
必填数字：<input type="text" name="password" /> <br />
必填重复：<input type="text" name="repassword" /> <br />
最小值：<input type="text" name="zuixiaozhi" /> <br />
区间：<input type="text" name="shuzhiqujian" /> <br />
性别：<input type="radio" name="gender"/>男
<input type="radio" name="gender"/>女
<label id="gender-error" class="error" for="gender"></label>
<br />
<input type="submit" value="提交" />
</form>
</body>
</html>高级应用：自定义校验
如果预定义的校验规则尚不能满足需求的话可以进行自定义校验规则，使用 jQuery Validate 提供的方法$.validator.addMethod 来完成自定义校验规则。
【语法结构】
$.validator.addMethod(name , method , message);
【参数说明】
参数1：name 校验规则的名称。例如：required
参数2：method 执行校验时使用的处理函数。返回true表示校验通过，返回false表示校验未通过。 function(value , element , params ){} ,处理函数被调用时，可以获得3个参数。 参数value： 表单项的value值。例如： 参数element： 被校验的表单项对象。 参数params： 使用当前校验规则传递的值。例如：rules : { username : {required : true} }
参数3：message，校验未通过时的提示信息。
【自定义校验规则】
javascript
// 自定义身份证号码长度校验
$.validator.addMethod('cardLength', function(value,element,params) {
// value : 当前文本框的value值
// element : 当前文本框对象
// params : 规则的参数 [15,18]
if (value.length == 15 || value.length == 18) {
return true;
} else {
return false;
}
}, '身份证号码长度必须是{0}位或者{1}位数字');【案例】完整校验案例
【需求】
- 自定义密码校验：6-12 位字母或数字；
- 自定义身份证号码校验：身份证号码合法性校验；
【素材】
html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></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 }
label.error { margin-left: 10px; color: red }
input.error { border: 1px solid red; }
</style>
</head>
<body>
<p>员工信息录入</p>
<form name="empForm" id="empForm" action="#" method="get">
<table border=1>
<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="password" name="password" /></td>
</tr>
<tr>
<td>重复密码</td>
<td><input type="password" id="repassword" name="repassword" /></td>
</tr>
<tr>
<td>性别(必选其一)</td>
<td>
<input type="radio" id="male" value="male" name="gender" /> 男
<input type="radio" id="female" value="female" name="gender" /> 女
<label class="error" for="gender" style="display: none;"></label>
</td>
</tr>
<tr>
<td>年龄(必填26-50)</td>
<td><input type="text" id="age" name="age" /></td>
</tr>
<tr>
<td>你的学历</td>
<td>
<select name="education" id="education">
<option value="">--请选择你的学历--</option>
<option value="zk">专科</option>
<option value="bk">本科</option>
<option value="yjs">研究生</option>
<option value="ss">硕士</option>
<option value="bs">博士</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="hobby" value="sing" /> 唱歌
<input type="checkbox" name="hobby" value="dance" /> 跳舞
<input type="checkbox" name="hobby" value="coding" /> 编码
<input type="checkbox" name="hobby" value="shoping" /> 购物
<label class="error" for="hobby" style="display: none;"></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" value="保存"></td>
</tr>
</table>
</form>
<!--引入JQ库-->
<script src="../js/jquery-1.8.3.js"></script>
<!--引入validate库-->
<script src="../js/jquery.validate.js"></script>
</body>
</html>【校验代码】
【注意】以下的自定义校验规则可以抽取到一个独立的 js 文件中，当前页面引入后即可使用。
javascript
<script type="text/javascript">
// 自定义密码校验规则
$.validator.addMethod('pwdFormat', function(value,element,params) {
// value : 当前密码框的value值
// element : 当前密码框对象
// params : 规则的参数 [6,12]
var reg = new RegExp('^[a-zA-Z0-9]{'+ params[0] +','+ params[1] +'}$');
if (reg.test(value)) {
return true;
} else {
return false;
}
}, '密码必须是{0}-{1}位的字符或者数字');
// 自定义身份证校验规则
$.validator.addMethod('cardFormat', function(value, element, params) {
if (params) { // params:true 表示要验证
if (value.length == 15) {
// 15位： 都是数字
var reg = /^\d{15}$/;
return reg.test(value);
} else if (value.length == 18) {
// 18 位： 都是数字或者末尾是X,x
var reg = /^\d{18}|\d{17}[X|x]$/;
return reg.test(value);
}
// 格式不符合
return false;
}
// params: false 表示不验证 直接通过
return true;
});
$('#empForm').validate({
rules: {
realname : {
required : true
},
username : {
required : true,
rangelength : [5,8]
},
password : {
required : true,
pwdFormat : [6,12]
},
repassword : {
equalTo : '#password'
},
gender : {
required : true
},
age : {
required : true,
min : 26,
max : 50
},
education : {
required : true
},
birthday : {
required : true,
date : true
},
hobby : {
required : true
},
email : {
required : true,
email : true
},
card : {
required : true,
cardFormat : true
}
},
messages: {
realname : {
required : '真实姓名为必填项'
},
username : {
required : '登录名为必填项',
rangelength : '登录名长度必须在5-8之间'
},
password : {
required : '密码为必填项'
},
repassword : {
equalTo : '两次密码输入不一致'
},
gender : {
required : '性别必须选择一个'
},
age : {
required : '年龄是必填项',
min : '年龄最小值是{0}',
max : '年龄最大值是{0}'
},
education : {
required : '学历信息是必填项'
},
birthday : {
required : '出生日期是必填项',
date : '出生日期格式不正确'
},
hobby : {
required : '兴趣爱好是必填项'
},
email : {
required : '邮箱是必填项',
email : '邮箱格式不正确'
},
card : {
required : '身份证是必填项',
cardFormat : '身份证格式不正确'
}
}
});
</script>案例
省市二级联动
html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script>
// 定义二维数组:
var arr = new Array(4);
arr[0] = ["石家庄", "邯郸", "保定", "秦皇岛"];
arr[1] = ["郑州市", "洛阳市", "安阳市", "南阳市"];
arr[2] = ["沈阳市", "锦州市", "大连市", "铁岭市"];
arr[3] = ["长春市", "吉林市", "四平市", "通化市"];
</script>
<script src="../js/jquery-3.3.1.js"></script>
<script type="text/javascript">
$(function() {
/*
* 需求分析：选中省之后，动态加载对应的市的信息
* 技术分析：
* 1、事件：change事件---省select上面；
* 2、选中省后，获取被选中省的value值。根据value值查找对应市的信息：arr[value]
* 3、遍历市数组，动态创建option，插入到市的select中；
* */
$("select[name='pro']").change(function () {
//清空市的数据
//$("#city").empty();
$("#city").html("<option>-请选择-</option>");
//获取被选中的option的value值
// var pro = $("select[name='pro'] option:selected").val();
var pro = this.value;
var cities = arr[pro];
//遍历数组
$(cities).each(function (index, element) {
//遍历市数组，动态创建option，插入到市的select中；
$("<option>"+element+"</option>").appendTo($("#city"));
});
});
});
</script>
</head>
<body>
<form action="#" method="get">
<select name="pro" >
<option>--请选择--</option>
<option value="0">河北</option>
<option value="1">河南</option>
<option value="2">辽宁</option>
<option value="3">吉林</option>
</select>省
<select id="city">
<option>-请选择-</option>
</select>市
</form>
</body>
</html>左右选中
html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>左右选中.html</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<style>
input[type='button'] {
width: 50px;
}
</style>
<script type="text/javascript" src="../js/jquery-3.3.1.js"></script>
<script type="text/javascript">
$(function(){
//toRight3 点击后将左边所有的option移动到右边
$("#toRight3").click(function () {
//左边option
$("#left option").appendTo($("#right"));
});
//toRight2 点击后将左边选中的option移动到→_→
$("#toRight2").click(function () {
//左边option
$("#left option:selected").appendTo($("#right"));
});
//toRight1 点击后将左边选中的第一个移动到右边
$("#toRight1").click(function () {
//左边option
$("#left option:selected:first").appendTo($("#right"));
});
});
</script>
</head>
<body>
<table>
<tr>
<td>
<select id="left" multiple="true" style="width:100px" size="10">
<option>環</option>
<option>芈</option>
<option>琅</option>
<option>琊</option>
<option>爨</option>
<option>甄</option>
<option>槑</option>
<option>夔</option>
</select>
</td>
<td>
<input type="button" value=">" id="toRight1"><br>
<input type="button" value=">>" id="toRight2"><br>
<input type="button" value=">>>" id="toRight3"><br><br>
<input type="button" value="<" id="toLeft1"><br>
<input type="button" value="<<" id="toLeft2"><br>
<input type="button" value="<<<" id="toLeft3">
</td>
<td>
<select id="right" multiple="multiple" style="width:100px" size="10">
</select>
</td>
</tr>
</table>
</body>
</html>表单校验
html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></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 }
label.error { margin-left: 10px; color: red }
input.error { border: 1px solid red; }
</style>
<script src="../js/jquery-3.3.1.js"></script>
<script src="../js/jquery.validate.js"></script>
<script src="../js/messages_zh.js"></script>
<script src="../js/myvalidate.js"></script>
<script src="../laydate/laydate.js"></script>
<script>
$(function () {
//确定对哪个表单进行校验
$("#empForm").validate({
//校验规则
rules:{
realname:{
required:true
},
username:{
required:true,
rangelength:[5,8]
},
password:{
required:true,
fmtPwd:[6,12]
}
//日期校验
// birthday:{
// required:true,
// dateISO:"yyyy-MM-dd"
// }
},
//错误提示信息
messages:{
}
})
})
</script>
</head>
<body>
<p>员工信息录入</p>
<form name="empForm" id="empForm" action="#" method="get">
<table border=1>
<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="password" name="password" /></td>
</tr>
<tr>
<td>重复密码</td>
<td><input type="password" id="repassword" name="repassword" /></td>
</tr>
<tr>
<td>性别(必选其一)</td>
<td>
<input type="radio" id="male" value="male" name="gender" /> 男
<input type="radio" id="female" value="female" name="gender" /> 女
<label class="error" for="gender" style="display: none;"></label>
</td>
</tr>
<tr>
<td>年龄(必填26-50)</td>
<td><input type="text" id="age" name="age" /></td>
</tr>
<tr>
<td>你的学历</td>
<td>
<select name="education" id="education">
<option value="">--请选择你的学历--</option>
<option value="zk">专科</option>
<option value="bk">本科</option>
<option value="yjs">研究生</option>
<option value="ss">硕士</option>
<option value="bs">博士</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="hobby" value="sing" /> 唱歌
<input type="checkbox" name="hobby" value="dance" /> 跳舞
<input type="checkbox" name="hobby" value="coding" /> 编码
<input type="checkbox" name="hobby" value="shoping" /> 购物
<label class="error" for="hobby" style="display: none;"></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" value="保存"></td>
</tr>
</table>
</form>
</body>
<script>
//执行一个laydate实例
laydate.render({
elem: '#birthday' //指定元素
});
</script>
</html>学习目标总结
- 能够使用 jQuery 的 3 种动画效果
- 能够使用 jQuery 对象的遍历方法
- 能够使用 jQuery 全局的遍历方法
- 能够使用 jQuery3.0 的 for-of 遍历方法
- 能够使用 jQuery 的绑定与解绑方法
- 能够使用 jQuery 的完成案例-广告的显示与隐藏
- 能够使用 jQuery 的完成案例-抽奖程序
- 能够理解 jQuery 的插件机制及其相关 API
- 能够使用 jQuery 的表单校验插件进行表单校验
- 能够使用表单校验插件的方法进行自定义校验规则