jQuery的表单验证

最新推荐文章于 2024-03-14 07:00:00 发布

原创最新推荐文章于 2024-03-14 07:00:00 发布 · 754 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#jquery

这篇博客介绍了如何使用jQuery的validate插件实现表单验证，包括用户名、密码、确认密码、年龄、邮箱和网址的验证规则设置，以及自定义全选功能的实现。

<!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>

           $(function() {
               /* 一、自定义插件 */
               //1.1 $.extend()实现对象继承
               //案例1：两个对象的继承
               //                var s1={};
               //                var s2={"name":"ff","age":23};
               //                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类方法
               //案例2：求最大值(最小值)
//                $.extend({
//                    abcd: function() {
//                        alert(1234)
//                    },
//                    getMax: function(a, b) {
//                        return a > b ? a : b;
//                    },
//                    getMin: function(a, b) {
//                        return a < b ? a : b;
//                    }
//                })
               // $.abcd()
               //                var a=$.getMax(10,13)
               //                console.info(a)

               //1.3 $.fn.extend()扩展jQuery对象方法
//                $.fn.extend({
//
//                    xx: function() {
//                        $(this).each(function(i, ck) { //下标 , ck值每一个复选框
//                            ck.checked = true;
//                        })
//                    },
//                    yy: function() {
//                        $(this).each(function(i, ck) { //下标 , ck值每一个复选框
//                            ck.checked = false;
//                        })
//                    }
//                })

               //案例3：实现全选效果
               //用按钮实现
               //                $("#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, ck) {//ck 指每一个复选框
//                        if (ck.checked == false) {//有任何一个没有选中
//                            f = false;
//                        }
//
//                    })
//                    $("#qx").prop("checked", f)//改变全选框的状态
//                })

               /* 二、第三方插件:表单验证插件 */
               //案例4：表单验证(用户名、密码、确认密码、年龄、邮箱、网址url)
           $("#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]
                   },
                   uurl:{
                       required:true,
                       url:true
                   }
               },
               messages:{
                   //错误信息提示
                   uname:{
                   required: "用户名必填",
                   rangelength:"用户名长度在6-10"
                   }
               }
           })




           })
       </script>
   </head>
   <body>
       <h2>案例3:自定义插件实现全选功能</h2>
       <input type="button" value="全选" id="ok" />
       <input type="button" value="取消全选" id="nook" />
       <input type="checkbox" id="qx" />全选
       <input type="checkbox" value="kmn" class="aaa" />kmn
       <input type="checkbox" value="dyx" class="aaa" />dyx
       <input type="checkbox" value="swk" class="aaa" />swk
       <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="uurl" />
           <br />
           <input type="submit" value="提交" />
       </form>

   </body>
</html>