JQuery的Validation插件可以到http://plugins.jquery.com/上去下载。今天来分享一下，关于这个插件的使用。

简易使用

这第一种方式可谓是傻瓜式的使用，我们只需要按照validation定义好的规则就可以了。

  • 首先引入JQuery库和Validation插件：
<script type="text/javascript" src="jquery-2.2.4.min.js"></script>
    <script type="text/javascript" src="jquery.validate.min.js"></script>
  • 然后是打开验证开关：
$(function(){
    $("#form_id").validate();
});
// 或者
$(document).ready(function(){
    $("#form_id").validate();
});

  • validation的build_in验证规则有：

    • class = “required”: 表明表单中该字段为必选的
    • class = "required email" 表明在表单中该字段为必须存在的，而且是符合email的规范格式
    • class = "url" 表明在表单中该字段需要满足url的匹配模式
    • minlength = "6" 表明在表单中该字段的长度最小为6位

  • 案例展示：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Validation for form demo</title>
    <script type="text/javascript" src="jquery-2.2.4.min.js"></script>
    <script type="text/javascript" src="jquery.validate.min.js"></script>
    <style>
        em {
            font-weight: bold;
            vertical-align: top;
            color: red;
            float: right;
        }

        label {
            width:10em;
            padding: 7px;
        }
        .container {
            width: 370px;
            height: auto;
            background-color: silver;
        }
    </style>
</head>
<body>
    <div align="center" class="container">
        <form id="vform" method="post" action="#">
            <fieldset>
                <legend>使用JQuery插件validation来实现表单验证</legend>
                <p>
                    <label for="username">姓名：</label>
                    <input id="username" name="username" class="required" minlength="2"> <em>*</em>

                </p>
                <p>
                    <label for="email">邮件：</label>
                    <input id="email" name="email" class="required email" > <em>*</em>
                </p>
                <p>
                    <label for="url">网址：</label>
                    <input id="url" name="url" class="url" ></p>
                <p>
                    <label for="comment">评论：</label>
                    <textarea id="comment" name="comment" class="required"></textarea>
                    <em>*</em>
                </p>
                <p><input type="submit" name="submit"></p>
            </fieldset>
        </form>
    </div>

<script>
    // $(function(){
    //  $("#vform").validation();
    // });
    $(document).ready(function(){
        $("#vform").validate();
    });

</script>
</body>
</html>

验证规则全写到Class中

和简易使用不同的是，这种方式使用pure的class来进行控制。但是我们需要引入一个新的插件jquery.metadate.js。实现的功能就是帮助用户将所有的与验证数据相关的信息写到class属性中，方便管理。

我们可以通过以下几步来实现这一需求。

  • 引入一个新的插件jquery.metadata.js
<script src="jquery.metadata.js"></script>
  • 改变调用验证表单的开关：
$(function(){
    $("#form_id").validate();//去掉这行代码，修改成下面的
    $("#form_id").validate({meta:"validate"});
});
  • 将验证信息写到class属性中。详见下面的代码。
<div align="center" class="container">
        <form id="vform" method="post" action="#">
            <fieldset>
                <legend>使用JQuery插件validation来实现表单验证</legend>
                <p>
                    <label for="username">姓名：</label>
                    <input id="username" name="username" class="{validate: { required : true, minlength : 2 }}" > <em>*</em>

                </p>
                <p>
                    <label for="email">邮件：</label>
                    <input id="email" name="email" class="{validate: { required :true,email :true}}" > <em>*</em>
                </p>
                <p>
                    <label for="url">网址：</label>
                    <input id="url" name="url" class="{validate: {url :true}}" ></p>
                <p>
                    <label for="comment">评论：</label>
                    <textarea id="comment" name="comment" class="{validate: {required :true}}"></textarea>
                    <em>*</em>
                </p>
                <p><input type="submit" name="submit"></p>
            </fieldset>
        </form>
    </div>

注意： Validate写在class属性的时候，记得要将验证规则使用空格分隔开来。 否则代码不会正常的运行！

还有就是$("#vform").validate({meta:"validate"});中validate这个单词不能随意的更改，否则也是不会生效的。

通过name属性构建验证规则

下面介绍一种与HTML元素的属性无直接关联，而是通过name属性来关联字段和验证规则的验证写法。

优点： 可以实现行为与结构的分离，便与调试和维护代码；

  • 表单代码，去除所有的class验证。当然这并不是说我们不可以给字段添加样式咯。
<div align="center" class="container">
        <form id="vform" method="post" action="#">
            <fieldset>
                <legend>使用JQuery插件validation来实现表单验证</legend>
                <p>
                    <label for="username">姓名：</label>
                    <input id="username" name="username"  > <em>*</em>

                </p>
                <p>
                    <label for="email">邮件：</label>
                    <input id="email" name="email" > <em>*</em>
                </p>
                <p>
                    <label for="url">网址：</label>
                    <input id="url" name="url" ></p>
                <p>
                    <label for="comment">评论：</label>
                    <textarea id="comment" name="comment" ></textarea>
                    <em>*</em>
                </p>
                <p><input type="submit" name="submit"></p>
            </fieldset>
        </form>
    </div>
  • JQuery代码如下：
<script>
    // $(function(){
    //  $("#vform").validation();
    // });

    $(function(){
        $("#vform").validate({
            rules:{
                username: {
                    required: true,
                    minlength: 6
                },
                email: {
                    required: true,
                    email: true
                },
                url: "url",
                comment: "required"
            }
        });
    });

</script>
  • 注意： 使用空格分隔验证字段

以上就是关于JQuery插件Validation的基础使用了。

国际化之中文化

  • 首先引入一个中文的信息验证库，这个我们可以在下载好的validation的lib包下找到。
<script src="messages_zh.js"></script>
  • 第二步就是在验证规则处添加message字段，然后输入自定义的中文信息。如下：
<script>
    // $(function(){
    //  $("#vform").validation();
    // });

    $(function(){
        $("#vform").validate({
            rules:{
                username: {
                    required: true,
                    minlength: 6,
                    messages: {
                        required: '请输入姓名',
                        minlength: '请至少输入6个字符'
                    }
                },
                email: {
                    required: true,
                    email: true,
                    messages: {
                        required: '请输入邮箱',
                        email: '请检查您的邮箱格式！'
                    }
                },
                url: {
                    url: true,
                    messages: {
                        url: '请检查网址的格式！'
                    }
                },
                comment: {
                    required: true,
                    messages: {
                        required: '请输入评论！',
                    }
                }
            }
        });
    });

</script>

不知道怎么回事，我这段代码没有显示中文提示，如果大家发现了错误在哪里，欢迎留下您的评论。

JQuery插件使用之Validation 快速完成表单验证的几种方式的更多相关文章

  1. asp.net 登陆验证 Form表单验证的3种方式 FormsAuthentication.SetAuthCookie；FormsAuthentication.RedirectFromLoginPage;FormsAuthenticationTicket

    我们在登陆成功后,使用下面的3种方法,都是同一个目的:创建身份验证票并将其附加到 Cookie, 当我们用Forms认证方式的时候,可以使用HttpContext.Current.User.Ident ...

  2. 【jQuery】学习jQuery插件的使用与写法（表单验证插件-validation）

    最新最全的插件可以从jQuery官方网站的插件板块下载,网站地址为:http://plugins.jquery.com/ Validation优点:内置验证规则:自定义验证规则:简单强大的验证信息提示 ...

  3. Form 表单提交的几种方式

    简单的总结一下form表单提交的几种方式:1.最简单的方式 就用form的submit提交方式,这种提交方式是不需要回调函数的   这种方式最近到一个form提供action路径后台接受就可以< ...

  4. asp.net mvc表单提交的几种方式

    asp.net MVC中form提交和控制器接受form提交过来的数据 MVC中form提交和在控制器中怎样接受 1.cshtml页面form提交2.控制器处理表单提交数据4种方式方法1:使用传统的R ...

  5. jQuery学习之路（8）- 表单验证插件-Validation

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

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

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

  7. [jQuery学习系列五 ]5-Jquery学习五-表单验证

    前言最近总是有一个感觉,虽然这些东西都自己学习并一个案例一个案例的去验证过了.但是总觉得不写成博客记录下来这些都不是自己的东西(心理作用,哈哈).所以每当学习或者复习相关的知识我都喜欢记录下来,下面开 ...

  8. ace+validate表单验证（两种方法）

    //修改密码(直接在validate中验证提交) $("#changePassword").on(ace.click_event, function() { var html = ...

  9. JS表单提交的几种方式

    第一种方式 : 表单提交,在 form 标签中增加 onsubmit 事件来判断表单是否提交成功 <script type="text/javascript"> fun ...

随机推荐

  1. 以技术面试官的经验分享毕业生和初级程序员通过面试的技巧（Java后端方向）

    本来想分享毕业生和初级程序员如何进大公司的经验,但后来一想,人各有志,有程序员或许想进成长型或创业型公司或其它类型的公司,所以就干脆来分享些提升技能和通过面试的技巧,技巧我讲,公司你选,两厢便利. 毕 ...

  2. [AHOI2005]洗牌

    题目描述 为了表彰小联为Samuel星球的探险所做出的贡献,小联被邀请参加Samuel星球近距离载人探险活动. 由于Samuel星球相当遥远,科学家们要在飞船中度过相当长的一段时间,小联提议用扑克牌打 ...

  3. TopCoder SRM 558 Div 1 - Problem 1000 SurroundingGame

    传送门:https://284914869.github.io/AEoj/558.html 题目简述  一个人在一个n * m棋盘上玩游戏,想要占领一个格子有两个方法: 在这个格子放一个棋子.  这个 ...

  4. epoll源码分析(转)

    在create后会创建eventpoll对象保存在一个匿名fd的file struct的private指针中,然后进程睡在等待队列上面. 对于等待的fd,通过poll机制在准备好之后会调用相应的cal ...

  5. ●洛谷P1083 借教室

    题链: https://www.luogu.org/problemnew/show/P1083题解: 二分,差分 显然具有二分性: 如果只考虑1~p个人,就会在某一天无法满足, 那么显然只考虑1~[p ...

  6. empty()和size()的优劣

    通常下面代码: if(c.size() == 0) if(c.empty()) 我们会觉得它们是是等价的. 为何empty()比较好? 主要是他们之间的效率有一定差距: empty对任意的容器都是常数 ...

  7. scrapy常用命令（持续） | Commonly used Scrapy command list (con't)

    以下命令都是在CMD中运行,首先把路径定位到项目文件夹 ------------------------------------------------------------------------ ...

  8. 为什么Unix只允许对非目录文件实行勾链？

    Unix文件系统的目录结构中带有交叉勾链,用户可以用不同的文件路径名共享一个文件,即文件的勾链在用户看来是为了一个已存在的文件另起一个路径名.在Unix的多级目录结构中勾链的结果表现为一个文件由多个目 ...

  9. Error:Cannot build Artifact :war exploded because it is included into a circular depency

    找到项目的目录 查找artifacts文件夹 删掉不是你项目名称的那个 问题出现的原因是你该项目名字了 造成tomcat发布两个网页 发布两个网页不是什么大问题 但是这两玩意地址一样 争夺资源啊冲突之 ...

  10. Template Method 模板设计模式

    什么是模板设计模式 对于不了解的模板设计模式的来说,可以认为如同古代的造纸术一样,纸所以成型,取决于用了模板的形状,形状又由镂空的木板组成,而你想要造什么纸,又取决于你使用什么材料. 上面提到了两个关 ...