【无标题】

nncwww

于 2022-03-24 22:22:47 发布

阅读量40

点赞数

分类专栏： jQuery 文章标签： jquery

本文链接：https://blog.csdn.net/nncwww/article/details/123723431

版权

jQuery 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <title></title>
       <style type="text/css">
           #myForm label.error{
               color: red;
               font-size: 14px;
           }
       </style>
       
       <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>

nncwww

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【无标题】

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> #myForm label.error{ color: red; font-size: 14px;...
复制链接

扫一扫