<!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. json_encode中文unicode的问题

    近期做微信卡券开发遇到一个问题,创建卡券post数据给服务器时返回data format error, do NOT use json unicode encode (/uxxxx/uxxxx), p ...

  2. A List of Social Tagging Datasets Made Available for Research

    This list is not exhaustive - help expand it! Social Tagging Systems Research Group Source Year Obta ...

  3. vim指令常用

    慢慢尝试使用vim,不断学习使用新的快捷键,将常用快捷键但经常容易忘的写下来, 1. 复制黏贴 命令行模式下按住v选中,y表示复制,d表示剪切,p为复制.

  4. Java SE、Java EE、Java ME

    Java SE(Java Platform,Standard Edition).Java SE 以前称为 J2SE.它允许开发和部署在桌面.服务器.嵌入式环境和实时环境中使用的 Java 应用程序.J ...

  5. WPF 显示GIF动画

    简单的通过GifBitmapDecoder解析GIF图片,获取gif帧数和每一帧数据,然后通过时间切换显示,效果如下: 代码如下: namespace GIfImageApplication { pu ...

  6. 网络请求报错：The resource could not be loaded because the App Transport Security policy requires the use of a secure connection.

    iOS9引入了新特性App Transport Security (ATS).详情:App Transport Security (ATS) 如果你想设置不阻止任何网络,只需要在info.plist文 ...

  7. [Leetcode][JAVA] Flatten Binary Tree to Linked List

    Given a binary tree, flatten it to a linked list in-place. For example,Given 1 / \ 2 5 / \ \ 3 4 6   ...

  8. Drupal 7 安装时的数据库问题

    在安装D7时,需要用PhpMyAdmin创建数据库,不建议使用ROOT帐号而需要建立一个新的帐号.一般,建立一个新的账号,如foo,并同时建一个同名的数据库,选择localhost(如果是本地).但是 ...

  9. Java 后台获取当前时间

    Calendar c = Calendar.getInstance();//可以对每个时间域单独修改 int year = c.get(Calendar.YEAR); int month = c.ge ...

  10. JS实现雪花效果

    演示效果 http://www.9696e.com/demo/snow/ 春节之前新一博客也会一直挂着的. 加载链接 <script src="http://www.9696e.com ...