开发者社区> 郭璞> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

JQuery插件使用之Validation 快速完成表单验证的几种方式

简介: JQuery的Validation插件可以到http://plugins.jquery.com/上去下载。今天来分享一下,关于这个插件的使用。 简易使用 这第一种方式可谓是傻瓜式的使用,我们只需要按照validation定义好的规则就可以了。
+关注继续查看

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>
  • 注意: 使用空格分隔验证字段

使用Validation插件进行表单验证


以上就是关于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>

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

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
推荐40个简单的 jQuery 导航插件和教程【下篇】
  在这篇文章中,我为大家收集了40款非常棒的 jQuery 导航插件和教程。导航作为网站重要的组成部分,能够帮助用户找到他们想要的内容,因此导航设计的好坏决定了用户能够在你的网站停留更长的时间,浏览更多的内容。
660 0
精心挑选的12款优秀 jQuery 手风琴效果插件和教程
  当你想在有限的页面空间内展示多个内容片段的时候,手风琴(Accordion)效果就显得非常有用,它可以帮助你以对用户非常友好的方式实现多个内容片段之间的切换。借助流行的 jQuery 框架,只需很少的代码就可以实现精美的手风琴效果,帮助你的网站吸引更多用户的眼球。
1156 0
分享精心挑选的12款优秀 jQuery Ajax 分页插件和教程
在这篇文章中,我为大家收集了20个基于 jQuery 框架的 Ajax 分页插件,这些插件都提供了详细的使用教程和演示。Ajax 技术的出现使得 Web 项目的用户体验有了极大的提高,如今借助优秀的 jQuery 框架很容易实现各种基于 Ajax 技术实现的功能。
1103 0
精心挑选的12款优秀 jQuery Ajax 分页插件和教程
  在这篇文章中,我为大家收集了12个基于 jQuery 框架的 Ajax 分页插件,这些插件都提供了详细的使用教程和演示。Ajax 技术的出现使得 Web 项目的用户体验有了极大的提高,如今借助优秀的 jQuery 框架很容易实现各种基于 Ajax 技术实现的功能。
1066 0
精心挑选的15款优秀 jQuery 文本特效插件和教程
  今天这篇文章向大家分享15款精心挑选的优秀 jQuery 文本特效插件,都带有详细的使用教程。jQuery 是最流行和使用最广泛的 JavaScript 框架,它简化了 HTML 文档遍历,事件处理,动画以及Ajax交互,帮助 Web 开发人员更快速的实现各种精美的界面效果。
1078 0
40个新鲜出炉的 jQuery 插件和免费教程【上篇】
  作为最流行的 JavaScript 库,jQuery 拥有丰富的插件,能够帮助开发者简单快速的实现各种功能。但对于 Web 开发人员来说,他们需要掌握编写插件的方法,这样在工作中才能游刃有余。今天这篇文章收集了40个非常棒的 jQuery 插件及其制作教程,这些插件能够为你将来的项目增添各种很炫功能和效果,同时通过详细的制作教程帮助你更加深入的掌握 jQuery 库的使用。
963 0
8个很棒的 jQuery 倒计时插件和教程
jQuery 是最流行也是使用最广泛的 JavaScript 框架,它简化了 HTML 文档操作,事件处理,动画效果和 Ajax 交互。下面向大家分享8个优秀的 jQuery倒计时插件和教程。 jQuery Countdown spriteTimer php ajax/jque...
808 0
10个实用的jQuery交互/通信插件和教程
在网站或应用程序中添加交互或通信功能,可以为用户带来非常棒的使用体验。本文整理了10个非常实用的jQuery插件和教程,可以帮助你在网站或应用中整合交互或通信功能,如新闻预览、显示最近日志的小部件、友情链接侧边栏等。
1013 0
20+ 个很棒的 jQuery 文件上传插件或教程
文件上传是网站很常见的功能之一,通过使用 jQuery 可以让上传过程更加人性化,更好的用户体验。本文介绍20个jQuery的文件上传插件,其中有一些是教程。 1. Plupload Plupload 是一个Web浏览器上的界面友好的文件上传模块,可显示上传进度、图像自动缩略和上传分块。
1098 0
40款非常棒的 jQuery 插件和制作教程(系列二)
  jQuery 在现在的 Web 开发项目中扮演着重要角色,jQuery 让网站有更好的可用性和用户体验,让访问者对网站留下非常好的印象。jQuery 以其插件众多、独特、轻量以及支持大规模的网站开发闻名。
982 0
+关注
郭璞
一切就交给时间,它会给我答案。
文章
问答
文章排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载