jQuery插件——Validation的使用

来源：互联网发布：找客源软件编辑：程序博客网时间：2024/06/06 18:15

插件（plugin）也成为扩展（Extension），是一种遵循一定规范的应用程序接口编写出来的程序。

最新最全的插件可以从Jquery官方网站的插件板块中获取，网站网址为http://plugins.jquery.com/

（由于垃圾邮件、不规范的插件、数据备份、版本维护以及对目前插件站点功能的不满足等多种原因，jQuery官方已经讲项目托管与Github，网址为https://github.com/jquery/plugins.jquery.com）

1、Validation

Validation是一个优秀的表单验证插件，Validation拥有一下优点：

1.1、内置验证规则：拥有必读、数字、E-mail、URL和信用卡号码为19类内置验证规则。

1.2、自定义验证规则：可以方便地自定义验证规则。

1.3、简单强大的验证信息提示：默认验证信息提示，也提供了自定义验证信息覆盖默认提示信息的功能。

1.4、实时验证：可以同归keyup或blur时间触发验证，而不是仅仅表单提交的时候验证。

Validation下载地址：http://bassistance.de/jquery-plugins/jquery-plugin-validation/

简单例子：

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>jQuery插件的应用</title>    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>    <script src="https://cdn.bootcss.com/jquery-validate/1.16.0/jquery.validate.js"></script>    <style type="text/css">        *{            font-family: Verdana;            font-size: 96%;        }        lable{            width: 10em;            float: left;            text-align: center;        }        lable.error{            float: none;            color: red;            padding-left: 5em;            vertical-align: top;        }        p{            clear: both;        }        .main{            margin:0 auto;            /*border: 1px solid darkgray;*/            height: 250px;            width: 600px;        }        .submit{            margin-left: 12em;        }        em{            font-weight: bold;            padding-right: 1em;            vertical-align: middle;            color: red;        }    </style>    <script type="text/javascript">        $(function () {            $("#commentForm").validate();        })    </script></head><body>   <div class="main">       <form action="#" class="cxmform" id="commentForm" method="get">           <fieldset>               <legend>一个简单的验证带验证提示的评论例子</legend>               <p>                   <lable for="cursername">姓名：</lable><em>*</em>                   <input type="text" id="cursername" name="username" size = "25" class="required" minlength="2">               </p>               <p>                   <lable for="cemail">电子邮件：</lable><em>*</em>                   <input type="text" id="cemail" name="email" size = "25" class="required email" >               </p>               <p>                   <lable for="curl">网址：</lable><em>&nbsp;</em>                   <input type="text" id="curl" name="url" size = "25" class="url" value="">               </p>               <p>                   <lable for="ccomment">你的评论：</lable><em>*</em>                   <textarea type="text" id="ccomment" name="comment" cols="22" class="required" ></textarea>               </p>               <p>                   <input type="submit" class="submit" value="提交">               </p>           </fieldset>       </form>   </div></body></html>

运行结果：

上诉代码完成了以下验证：

（1）对姓名的必填和长度至少是两位的验证

（2）对“电子邮件”的必填和是否为e-mail格式验证

（3）对“网址”是否为url的验证

（4）对“你的评论”的必填验证

（5）实现实时验证，不是只在点击“提交”按钮时才验证

可以看出通过几个简单的步骤就可以讲一个普通的表单改造为可以进行Validation验证的表单：

1、引入jQuery库和Validation插件

<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>        <script src="https://cdn.bootcss.com/jquery-validate/1.16.0/jquery.validate.js"></script>

2、确定那个表单需要被验证：

$("#commentForm").validate();

3、针对不同的字段，进行验证规则编写，设置字段相应的属性

class = "required"为必填，minlength = "2"为最小长度为2

class = "required email" 为必填且填写内容需要符合e-mail格式

class = "url"为url格式验证

不同的验证写法

在上述例子中，开发者必须把required、url、email写到class属性中，才能够实现必填、地址格式、电子邮件格式的验证，把minlength属性值设置为2才能完成最少长度为2的验证，虽然class和minlength都是属于W3C规范，但对于开发者来说，时而将验证相关的信息写在class属性里，时而写在minlength属性里实在是麻烦，Validation充分考虑考虑到这一点，开发者可以把所有的验证相关的信息写到class属性中方便管理，为了实现这个功能，需要一下几个步骤：

1、引入一个新的jQuery插件-----jquery.metadata.js

（jquery.metadata.js插件是一个支持固定格式解析的jQuery插件，Validation插件将其很好地融入到验证规则编码中）

<script src="lib/jquery.metadata.js"></script>

2、修改调用的验证方法

$("#commentForm").validate();

改为：

$("#commentForm").validate({meta : "validate"});

3、将验证规则全部写到class属性中

 //省略其他代码<p>    <lable for="cursername">姓名：</lable><em>*</em>    <input type="text" id="cursername" name="username" size = "25"           class="{validate:{required:true,minlength:2}}" ></p><p>    <lable for="cemail">电子邮件：</lable><em>*</em>    <input type="text" id="cemail" name="email" size = "25"           class="{validate:{required:true,email:true}}" ></p><p>    <lable for="curl">网址：</lable><em>&nbsp;</em>    <input type="text" id="curl" name="url" size = "25"           class="{validate:{url:true}}" value=""></p><p>    <lable for="ccomment">你的评论：</lable><em>*</em>    <textarea type="text" id="ccomment" name="comment" cols="22"              class="{validate:{required:true}}" ></textarea></p>//省略其他代码

实现行为和结构分离：

（一种与HTML元素属性没有直接关联，而是通过name属性来关联字段和验证规则的验证写法）

1、首先移除字段中的class属性：

//省略其他代码<p>    <lable for="cursername">姓名：</lable><em>*</em>    <input type="text" id="cursername" name="username" size = "25"></p><p>    <lable for="cemail">电子邮件：</lable><em>*</em>    <input type="text" id="cemail" name="email" size = "25"></p><p>    <lable for="curl">网址：</lable><em>&nbsp;</em>    <input type="text" id="curl" name="url" size = "25"></p><p>    <lable for="ccomment">你的评论：</lable><em>*</em>    <textarea type="text" id="ccomment" name="comment" cols="22"></textarea></p>//省略其他代码

2、然后加上以下jQuery代码：

<script type="text/javascript">    $(function () {        $("#commentForm").validate({            rules: {                username: {                    required: true,                    minlength: 2                },                email: {                    required:true,                    email:true                },                url:"url",                comment:"require"            }        });    });</script>

把提示语言改为中文（原来是英文的），只需要引入Validation提供的中文验证信息库即可：

<script src="lib/jquery.validate.messages_cn.js"></script>

自定义验证信息：

<p>    <lable for="cursername">姓名：</lable><em>*</em>    <input type="text" id="cursername" name="username" size = "25"           class="{validate:{required:true,minlength:2,           messages:{           required:'please enter your name!',           minlength:'miss length is 2'           }}}" ></p><p>    <lable for="cemail">电子邮件：</lable><em>*</em>    <input type="text" id="cemail" name="email" size = "25"           class="{validate:{required:true,email:true,                     required:'please enter your email!',                     email:'e-mail geshi'                     }}}" ></p><p>    <lable for="curl">网址：</lable><em>&nbsp;</em>    <input type="text" id="curl" name="url" size = "25"           class="{validate:{url:true,messages:{              url:'please enter your e-mail!'           }}}" value=""></p><p>    <lable for="ccomment">你的评论：</lable><em>*</em>    <textarea type="text" id="ccomment" name="comment" cols="22"              class="{validate:{required:true,message:{              required:'please enter your idea!'              }}}" ></textarea></p>
自定义验证信息并且美化：

1、在jQuery代码中增加以下代码：

$("#commentForm").validate({    rules: {        username: {            required: true,            minlength: 2        },        email: {            required:true,            email:true        },        url:"url",        comment:"require",        errorElement:"em",        success:function (label) {            //label指向上面那个错误提示信息标签em            label.text(" ").addClass("success");//清空错误提示信息并且加上自定义的success类        }    }});
2、在css代码中增加以下代码，以便和errorElement相关联

em.error{    background: url("imges/unchecked.gif") no-repeat 0px 0px ;    padding-left: 16px;}em.success{    background: url("imges/checked.gif") no-repeat 0px 0px ;    padding-left: 16px;}
自定义验证规则：

1、添加“验证码”的html代码

<p>    <lable for="cvalcode">验证码：</lable><em>*</em>    <input  id="cvalcode" name="valcode" size = "25" value="" />7+9=?</p>

2、实现验证“验证码”的功能，需要以下步骤：

   2.1 自定义一个验证规则

       jquery代码：

        $(function () {            $.validator.addMethod(                "formule",//验证方法名                function (value,element,param) {//验证规则                    return value == eval(param);                },                '请输入数学公式计算后的结果'  //验证提示信息            );
   2.1调用验证规则:在rules中加入valcode:{formula:"7+9"}，其中“7+9”这个字符串可以通过其他手段获得，例如通过获取页面某个元素的text()
或Ajax()来获得，这里为了简化就简单写成“7+9”：
            $("#commentForm").validate({                rules: {                    username: {                        required: true,                        minlength: 2                    },                    email: {                        required:true,                        email:true                    },                    url:"url",                    comment:"require",                    valcode:{formule:"7+9"}                }            });        });
结果：

阅读全文

0 0