菜鸟的Jquery validate入门

JqueryValidate插件入门 古月为君

最近自学因为项目要用到 validate插件所以本人自学了一下给大家分享一下废话不多说直入正题吧

* 首先我们下载jquery插件 和validate插件*
地址是：http://www.51xuediannao.com/plus/download.php?open=0&aid=807&cid=3直接点击下载就ok jquery文件我就不用给地址了 直接就可以度娘找到

**第二步引入将下载好的jar包放到我们的项目中建立js文件放到js文件目录下当然这里随便大家放到哪里只要待会引入地址正确就OK

    <!--首先引入我们的jquery的js文件-->    <script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>    <!--首先引入我们的jquery的validate文件-->    <script type="text/javascript" src="js/jquery.validate.js"></script>

引入文件后当然就是使用了 先来个最简单的

            <form id="formID"action="login.spring" method="post">                name:<input type="text" name="username" ><br><br>                age :<input type="text"  name="userpassword" ><br><br>                    <input type="submit" value="增加">            </form>**接下来我们来写验证规则**    //validate插件使用  首先还是文档加载后执行 funcion函数        $(function(){            //获取form表单元素对象使用validate方法            $("#formID").validate({                //加入debug:true; 可以进入调试状态不会不会请求服务器 只在页面进行验证调试                    debug:true,                //rules要验证的元素包裹进rules中                    rules:{                    //username 注意这里的username和文本框的name是一一对应的                    username:{                        required:true,//是否必填验证 true是必须填写 false文本框可以不用填写                        minlength:2,//最小长度                        maxlength:10//最大长度                    },                    //密码验证                    userpassword:{                        required:true,                        minlength:2,                        maxlength:10                    }                },                //提示信息                messages:{                        username:{                        required:"必须填写用户名",//如果没有填写用户名称显示错误信息                        minlength:"用户名不能小于2位", 如过输入文字小于两个显示错误信息                        maxlength:"用户名不能大于10位"                    },                    userpassword:{                        required:"必须填写密码",//如果没有填写用户名称显示错误信息                        minlength:"用户名不能小于2位",                        maxlength:"用户名不能大于10位"                    }                }            });        });直接访问http://localhost:8080/SpringmvcSpringMybatis/index.jsp直接点增加按钮 错误信息显示 阻止form提交**validate 基本API：**required:true:文本框是否必填minlength：最小长度 maxlength:最大长度remote:远程校验rangelength :在什么范围之类min:最小值max：最大值range:值在什么范围之类(0-9)email:邮箱验证格式url:验证url格式date:验证日期number:验证数字digits:验证整数具体太多了可以网上查找API 这里列举几个常用的$("#formID").validate({                //加入debug=true; 可以进入调试状态不会不会请求服务器 只在页面进行验证调试                 //debug:true,                 //rules要验证的元素包裹进rules中                rules:{                    //username 注意这里的username和文本框的name是一一对应的                    username:{                        required:true,//是否必填验证 true是必须填写 false文本框可以不用填写                        //只能输入0-10位                        rangelength :[0,10]},                    //提示信息                    messages:{                        username:{                        required:"必须填写用户名",//如果没有填写用户名称显示错误信息                        rangelength:"用户名不能小于2位Or大于10位"                    },注意其实remote的实习也就是使用了异步的AJAX请求 主要用于我们验证该用户名是否存在 把信息发送到服务器 服务器拿到该用户名查询数据库表 返回true或则false 判断是否存在该用户就OK了rangelength :使用一个数组表示中间使用 逗号分隔开来 [0,10]表示0-10个

我们再来看看 min 和max的用法 下面告诉我们min 和max控制的是输入的值的大小至于range来说用户和rangelength一样也是一个数组[0-10]输入的值只能是 0-10范围之类的

$(function(){            //获取form表单元素对象使用validate方法            $("#formID").validate({                //加入debug=true; 可以进入调试状态不会不会请求服务器 只在页面进行验证调试                 //debug:true,                 //rules要验证的元素包裹进rules中                rules:{                    //username 注意这里的username和文本框的name是一一对应的                    username:{                        required:true,//是否必填验证 true是必须填写 false文本框可以不用填写                        rangelength:[2,10],                        min:2,                        max:10                    },                    //密码验证                },                //提示信息                messages:{                        username:{                        required:"必须填写用户名",//如果没有填写用户名称显示错误信息                        rangelength:"用户名不能小于2位Or大于10位",                        min:"只能输入2-10数字",                        max:"只能输入2-10数字"                    },       }    });});

    //validate插件使用  首先还是文档加载后执行 funcion函数        $(function(){            $("#formID").validate({                    rules:{                    //username 注意这里的username和文本框的name是一一对应的                    username:{                        required:true,//是否必填验证 true是必须填写 false文本框可以不用填写     date:true,//2011-1-1 11:11:11这是有效的可以去除时分秒也是可以的只要date类型能转换的都是符合时间格式的                      //url:true,//这个不能写www.baidu.com 还要加上http这样的前置信息才会通过                        dateISO:true, //yyyy-mm-dd也可以yyyy/-mm-dd 这样 的时间格式符合ISO标                        number:true,//必须是数字 不管是浮点型还是整数 负数都是有效的                        digits:true//文本框必须输入整数                    },                    //密码验证                    userpassword:{                            required:true,                            rangelength:[2,10],                            date:true                        }                },                //提示信息                    messages:{                        username:{                        required:"必须填写用户名",//如果没有填写用户名称显示错误信息                        //email:"非法的email格式"                        date:"非法的时间"},                        userpassword:{                            required:"必须填写密码",//如果没有填写用户名称显示错误信息                            rangelength:"用户名不能小于2位Or大于10位"                    }                }            });        });

以上都是常用的验证规则如果那个文本框要使用直接属性值改成true就ok

接下来我们学习密码的重复验证

在我们注册账号的时候都有密码框和密码确认框我们来看看validate中是怎么验证的 JS代码

        //validate插件使用  首先还是文档加载后执行 funcion函数        $(function(){            //获取form表单元素对象使用validate方法            $("#formID").validate({                //加入debug=true; 可以进入调试状态不会不会请求服务器 只在页面进行验证调试                 //debug:true,                 //rules要验证的元素包裹进rules中                rules:{                  password: "required",  //设置密码框为必须输入                  cofiguserpassword: {equalTo: "#userpassword" }  //设置密码确认框的值与密码框值比较 #userpassword是密码框的ID  要对密码框ID进行设置再直接选择器选择就OK                 },                //提示信息                messages:{                    cofiguserpassword:{                            equalTo:"两次密码输入不一致"//如果不一致提示信息                    }                }            });        });    </script>

验证成功!!!!

菜鸟写的入门级别的 大神轻喷 谢谢 下一章高级篇讲解