jQuery插件：Validation

最新推荐文章于 2024-09-14 16:44:21 发布

请不要叫我二师兄

最新推荐文章于 2024-09-14 16:44:21 发布

阅读量529

点赞数 1

分类专栏： JavaScript

本文链接：https://blog.csdn.net/weixin_42545594/article/details/85277130

版权

JavaScript 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

插件(Plugin)也称为扩展(Extension)，是一种遵循一定规范的应用程序接口编写出来的程序。

我们可以通过jQuery官方网站中来获取各种插件，网址为：https://plugins.jquery.com/ ，目前，jQuery官方已经项目托关于GitHub,，地址为： https://github.com/jquery-archive/plugins.jquery.com

下面将介绍几个常用的插件。

jQuery表单验证插件：Validation

jQuery 作为一个优秀的JavaScript库，提供了一个很好的表单验证插件：Validation， Validation插件为客户端提供了强大的验证功能。可以在jjQuery官网下载最新的validation plugin, 网址为： http://www.runoob.com/jquery/jquery-plugin-validate.html，目前最新的版本是1.19.0。

note:我们有多种方式在网页中添加jquery，可以使用以下方法：

从jQuery官网下载jQuery库： http://jquery.com/download/， jQuery库是一个JavaScript文件，可以是一个HTML的<script>标签来引用它。
从CDN中载入jQuery。如果你不希望下载jQuery，那么可以通过CDN（内容分发网络）来引用它。本文章中实例均采用菜鸟教程CDN库：<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">

作为一个标准的验证方法库，Validation拥有如下特点：

内置验证规则：拥有必填、数字、E-Mail、 URL以及信用卡号码等19种内置验证规则。
自定义验证规则：可以很方便的自定义验证规则。
简单强大的验证信息提示：默认了验证信息提示，并提供自定义覆盖默认提示信息的功能。
实时验证：可以通过keyup或blur事件触发验证，而不仅仅在表单提交时候验证。

默认提示信息：

messages: {
    required: "This field is required.",
    remote: "Please fix this field.",
    email: "Please enter a valid email address.",
    url: "Please enter a valid URL.",
    date: "Please enter a valid date.",
    dateISO: "Please enter a valid date ( ISO ).",
    number: "Please enter a valid number.",
    digits: "Please enter only digits.",
    creditcard: "Please enter a valid credit card number.",
    equalTo: "Please enter the same value again.",
    maxlength: $.validator.format( "Please enter no more than {0} characters." ),
    minlength: $.validator.format( "Please enter at least {0} characters." ),
    rangelength: $.validator.format( "Please enter a value between {0} and {1} characters long." ),
    range: $.validator.format( "Please enter a value between {0} and {1}." ),
    max: $.validator.format( "Please enter a value less than or equal to {0}." ),
    min: $.validator.format( "Please enter a value greater than or equal to {0}." )
}

Validation插件所有的捆绑方法默认使用英语作为错误提示信息，并且已经翻译成其他几十种语言，中文提示信息如下：

(function( factory ) {
    if ( typeof define === "function" && define.amd ) {
        define( ["jquery", "../jquery.validate"], factory );
    } else {
        factory( jQuery );
    }
}(function( $ ) {

/*
 * Translated default messages for the jQuery validation plugin.
 * Locale: ZH (Chinese, 中文 (Zhōngwén), 汉语, 漢語)
 */
$.extend($.validator.messages, {
    required: "这是必填字段",
    remote: "请修正此字段",
    email: "请输入有效的电子邮件地址",
    url: "请输入有效的网址",
    date: "请输入有效的日期",
    dateISO: "请输入有效的日期 (YYYY-MM-DD)",
    number: "请输入有效的数字",
    digits: "只能输入数字",
    creditcard: "请输入有效的信用卡号码",
    equalTo: "你的输入不相同",
    extension: "请输入有效的后缀",
    maxlength: $.validator.format("最多可以输入 {0} 个字符"),
    minlength: $.validator.format("最少要输入 {0} 个字符"),
    rangelength: $.validator.format("请输入长度在 {0} 到 {1} 之间的字符串"),
    range: $.validator.format("请输入范围在 {0} 到 {1} 之间的数值"),
    max: $.validator.format("请输入不大于 {0} 的数值"),
    min: $.validator.format("请输入不小于 {0} 的数值")
});

}));

你可以将该本地化信息文件： dist/localization/messages_zh.js 引入到页面：

Validation的使用：

引入jQuery库和Validation插件。
确定哪个表单需要被验证。
```
$("#commentForm").validate();
```
针对不同的字段，进行验证规则编码，设置字段相应的属性。

1. class="required"为必须填写，minlength="2"为最小长度为2

2. class="required email" 为必须填写和内容需要符合E-mail格式。

3. class="url"为url格式验证。

下面是一个带验证提示的实例：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="http://static.runoob.com/assets/jquery-validation-1.14.0/lib/jquery.js"></script>
    <script src="http://static.runoob.com/assets/jquery-validation-1.14.0/dist/jquery.validate.min.js"></script>
    <script src="http://static.runoob.com/assets/jquery-validation-1.14.0/dist/localization/messages_zh.js"></script>
    <style>
        * {
            font-family:Verdana;
            font-size:96%;
        }
        label {
            width:100px;
            float:left;
        }
        em {
            font-weight:bold;
            padding-left:10px;
            vertical-align:top;        
        }
        label.error {
            float:none;color:red;padding-left:10px; vertical-align:top;
        }
    </style>
    <script>
        $(document).ready(function () {
            $("#commentForm").validate();
        });
    </script>
</head>
<body>
    <form class="cmxform" id="commentForm" method="get" action="#">
        <fieldset>
            <legend>验证</legend>
            <p>
                <label for="cusername">姓名</label><em>*</em>
                <input id="cusername" name="username" class="required" minlength="2" size="25"/>
            </p>
            <p>
                <label for="cemail">电子邮件</label><em>*</em>
                <input id="cemail" name="email" class="required email" size="25"/>
            </p>
            <p>
                <label for="url">网址</label><em>*</em>
                <input id="curl" name="url" class="required url"  value=""/>
            </p>
            <p>
                <label for="comment">你的评论</label><em>*</em>
                <textarea id="ccomment" name="comment" class="required" cols="22"></textarea>
            </p>
            <p >
                <input class="submit" type="submit" value="提交hhah" />
            </p>
        </fieldset>
    </form>
</body>
</html>

效果如下：