<!doctype html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <script type="text/javascript" src="js/jquery-1.11.1.js"></script>

    <script type="text/javascript" src="js/jquery.validate-1.14.0.js"></script>

    <script type="text/javascript">

    $().ready(function() {

        var validate= $("#signupForm").validate({

                rules: {

                   firstname: "required",

                   email: {

                    required: true,

                    email: true

                   },

                   password: {

                    required: true,

                    minlength: 5

                   },

                   confirm_password: {

                    required: true,

                    minlength: 5,

                    equalTo: "#password"

                   }

                },

                messages: {

                   firstname: "请输入姓名",

                   email: {

                    required: "请输入Email地址",

                    email: "请输入正确的email地址"

                   },

                   password: {

                    required: "请输入密码",

                    minlength: "密码不能小于{0}个字 符"

                   },

                       confirm_password: {

                    required: "确认密码",

                    minlength: "确认密码不能小于5个字符",

                    equalTo: "两次输入密码不一致不一致"

                }

            },

            //把错误信息放到一处处理与 errorPlacement 函数连用

            groups:{

                login:"firstname email password confirm_password"

            },

            errorPlacement:function(error,element){

                error.insertBefore("#error_info");

            },

            //提交表单后焦点在第一个错误表单内

            focusInvalid:true,

            //指定错误提示的css类名

            errorClass:"error_info",

            //指定验证通过的css类名

            validClass:"success_info",

            //验证通过提交表单

            submitHandler:function(form){

                console.info("提交表单"+$(form).serialize());

            },

            invalidHandler:function(event,validator){

                console.info("表单错误"+validate.numberOfInvalids());

            },

            // 取消某个元素的校验

            ignore:"#firstname",

            onfocusout:function(){

                return false;

            }

        });

        $("#check").click(function(){

            var flag1=$("#signupForm").valid();//检查表单是否有效

            var flag2=$("#firstname").rules();//查询元素的校验规则

            var flag3=$("#firstname").rules("add",{minlength:2,maxlength:10});//添加元素的校验规则

            var flag4=$("#firstname").rules("remove","minlength");//删除元素的校验规则

            var flag5=validate.form();//验证表单是否有效

            var flag6=validate.element("#firstname");//验证表单某个元素是否有效

            validate.resetForm();//恢复表单原来的状态

            var flag7=validate.numberOfInvalids();//获得错误元素个数

            console.info(flag7);

        });

        //针对某个元素显示特定的提示信息

        validate.showErrors({

            firstname:"ERROR"

        });

});

    </script>

</head>

<body>

    <form id="signupForm" method="get" action="">

        <p id="error_info">

            <label for="firstname">Firstname</label>

            <input id="firstname" name="firstname" />

        </p>

        <p>

            <label for="email">E-Mail</label>

            <input id="email" name="email" />

        </p>

        <p>

            <label for="password">Password</label>

            <input id="password" name="password" type="password" />

        </p>

        <p>

            <label for="confirm_password">确认密码</label>

            <input id="confirm_password" name="confirm_password" type="password" />

        </p>

        <p>

            <input class="submit" type="submit" value="Submit"/>

        </p>

        <p>

            <input class="c" type="button" value="检查表单是否有效" id="check"/>

        </p>

</form>

</body>

</html>

jquery.validate 基础的更多相关文章

  1. 修改 jquery.validate.js 支持非form标签

    尝试使用markdown来写一篇blog,啦啦啦 源代码传送门:github 在特殊情况下我们使用jquery.validate.js对用户输入的内容做验证的时候,表单并不是一定包含在form之中,有 ...

  2. jQuery validate 根据 asp.net MVC的验证提取简单快捷的验证方式（jquery.validate.unobtrusive.js）

    最近在学习asp.netMVC,发现其中的验证方式书写方便快捷,应用简单,易学好懂. 验证方式基于jQuery的validate 验证方式,也可以说是对jQuery validate的验证方式的扩展, ...

  3. jQuery Validate 表单验证插件----Validate简介，官方文档，官方下载地址

     一. jQuery Validate 插件的介绍 jQuery Validate 插件为表单提供了强大的验证功能,让客户端表单验证变得更简单,同时提供了大量的定制选项,满足应用程序各种需求.该插件捆 ...

  4. 基于Jquery Validate 的表单验证

    基于Jquery Validate 的表单验证 jquery.validate.js是jquery下的一个验证插件,运用此插件我们可以很便捷的对表单元素进行格式验证. 在讲述基于Jquery Vali ...

  5. 表单验证插件jquery.validate的使用方法演示

    jQueryValidate表单验证效果 jquery.validate验证错误信息的样式控制 <!--validate验证插件的基础样式--> input.error{border: 1 ...

  6. 【JQ成长笔记】jQuery Validate验证插件

    validate是一款很好的jq插件,提供了强大的验证功能,让客户端表单验证变得更简单,同时提供了大量的定制选项,满足应用程序各种需求.该插件捆绑了一套有用的验证方法,包括 URL 和电子邮件验证,同 ...

  7. MVC的验证 jquery.validate.unobtrusive

    jQuery validate 根据 asp.net MVC的验证提取简单快捷的验证方式(jquery.validate.unobtrusive.js) 2013-07-22 19:07 4568人阅 ...

  8. jquery.validate和jquery.form配合实现验证表单后AJAX提交

    基础代码其实很简单,之后一点一点扩充.最终代码写在最后. 表单: <form action="@Url.Action("AddColumns","Cont ...

  9. Jquery Validate结合QTip实现绚丽的表单验证

    相信做过前端开发的童鞋,一定都涉及到表单验证的模块设计,也定都会对Alert的粗暴提示厌恶至极.当然,我也不例外.一直期待着,一种比较优雅提示效果. 看到这,大家可能觉得Jquery Validate ...

随机推荐

  1. Oracle 11g 修改字符集 为 ZHS16GBK

    方法一:sqlplus “用户/密码 as sysdba” sqlplus “sys/sys as sysdba”  方法二:sqlplus/nolog SQL> conn /as sysdba ...

  2. Python 学习---------Ｄay5

    第十四章 文档 class employee: "class doumentation" pass print employee.__doc__ #注释会保存在__doc__属性中 ...

  3. Alpha、Beta、RC、GA版本的区别 ZT

    http://www.blogjava.net/RomulusW/archive/2008/05/04/197985.html Alpha:是内部测试版,一般不向外部发布,会有很多Bug.一般只有测试 ...

  4. Excel里内嵌在线翻译

    本来寻思着继续写点系统运行日志跟踪技术的,但早晨哥家领导从单位打来电话,让帮助她的闺蜜搞一个excel翻译的问题,总部IT搞不定.我过去是用excel做了几年工作,却都是些数学计算,跟翻译也扯不上啊: ...

  5. GridView里的文本框改变事件

    <asp:TemplateField HeaderText="实收数量"> <ItemTemplate> <asp:TextBox ID=" ...

  6. 【转】【Linux】 临界区，互斥量，信号量，事件的区别

    原文地址:http://blog.itpub.net/10697500/viewspace-612045/ Linux中 四种进程或线程同步互斥的控制方法1.临界区:通过对多线程的串行化来访问公共资源 ...

  7. 技术文档--studio技术文档

    1.Google推出的毫无疑问,这个是它的最大优势,Android Stuido是Google推出,专门为Android“量身订做”的,是Google大力支持的一款基于IntelliJ IDEA改造的 ...

  8. velocity导出word报错解决

  9. .net 第二周学习

    这周更进一步的介绍了.net,通过作业的练习,有那么一点点的成就感,相对于前端,成就感还不是很大,但是我还是会继续加油  学习.net,看着他们周末只能呆在寝室写网页,顿时我就高兴了:        ...

  10. libj 0.8.2 发布，Java/JavaScript API 的 C++ 实现

    libj 0.8.2 增加了一些新的字符串相关的方法. libj 是一个跨平台的运行库,相当于提供了类似 Java/JavaScript API.libj 的内存管理是自动的,基于 shared_pt ...