<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#myForm label.error{
color: red;
font-size: 14px;
}
</style>
<!-- 引入jQuery库 -->
<script type="text/javascript" src="js/jquery-3.3.1.js"></script>
<script src="js/jquery.validate.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function() {
//1.1 $.extend()实现对象继承
// var s1={};
// var s2={"name":"大炮","age":38};
// console.info("继承前:"+s1.name,s1.age);
// console.info("继承前:"+s2.name,s2.age);
// $.extend(s1,s2);//s1继承s2
// console.info("继承后:"+s1.name,s1.age);
// console.info("继承后:"+s2.name,s2.age);
//
//1.2 $.extend()扩展jQuery类方法
// $.extend({
// abcd:function(){
// alert(123);
// },
// getMax:function(a,b){
// return a>b?a:b;
// },
// getMin:function(a,b){
// return a<b?a:b;
// }
// });
// $.abcd();
// var a=$.getMax(99,100);
// console.info(a);
// console.info($.getMax(50,100));
// var b=$.getMin(99,100);
// console.info(b);
//1.3 $.fn.extend()扩展jQuery对象方法
// $.fn.extend({
// xx:function(){
// $(this).each(function(i,k){//下标:ck每一个复选框
// k.checked=true;
//
// })
// },
// yy:function(){
// $(this).each(function(i,k){//下标:ck每一个复选框
// k.checked=false;
//
// })
// }
// });
// $("#ok").click(function(){
// $(".aaa").xx();
// })
// $("#nook").click(function(){
// $(".aaa").yy();
// })
// $("#qx").on("click",function(){
// // if($(this).prop("checked")){//选中了
// if($(this).is(":checked")){
// $(".aaa").xx();
// }
// else{
// $(".aaa").yy();
// }
// })
// $(".aaa").click(function(){
// var f=true;//假设全选框是选中的
// $(".aaa").each(function(i,k){//k指每一个复选框
// if(k.checked==false){//有任何一个复选框没有选中
// f=false;
// }
// })
// $("#qx").prop("checked",f);//改变全选的方法
// })
$("#myForm").validate({
rules:{
uname:{
required:true,
rangelength:[6,10]
},
upwd1:"required",
upwd2:{
required:true,
equalTo:"#upwd1",
},
uemail:{
required:true,
email:true
},
uage:{
required:true,
range:[1.150]
}
},
messages:{
uname:{
required:"用户名必填",
rangelength:"你个山炮"
}
}
});
})
</script>
</head>
<body>
<h2>案例3:自定义插件实现全选功能</h2>
<input type="button" value="全选" id="ok"/>
<input type="button" value="取消全选" id="nook"/>
<input type="checkbox" value="全选" id="qx"/>全选
<input type="checkbox"value="看美女" class="aaa"/>看美女
<input type="checkbox"value="打球" class="aaa"/>打球
<input type="checkbox"value="玩游戏" class="aaa"/>玩游戏
<h2>案例4:使用jQuery validation插件完成表单验证</h2>
<form id="myForm">
用户名:<input type="text" name="uname"/><br />
密码:<input type="text" name="upwd1" id="upwd1"/><br />
确认密码:<input type="text" name="upwd2"/><br />
邮箱:<input type="text" name="uemail"/><br />
年龄:<input type="text" name="uage"/><br />
网址:<input type="text" name="uname"/><br />
<input type="submit" value="提交" />
</form>
</body>
</html>