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

下面来介绍“Validation”这个优秀的表单验证插件：

· 内置验证规则：拥有必填，数字，E-mail，URL和信用卡号码等19种等内置验证规则

· 自定义验证规则：可以很方便的自定义验证规则

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

· 实时验证：可以通过keyup和blur事件触发验证，而不仅在表单提交的时候验证

下面展示一段代码：

<form class="cmxform" id="commentForm" method="post" action="#">

        <fieldset>  

            <legend>一个简单的验证带验证的提示的评论例子</legend>

            <p>

                <label for="cusername">姓名</label>

                <em>：</em>

                <input id="cusername" name="username" size="25" class="required" minlength="2" />

            </p>

            <p>

                <label for="cemail">电子邮件</label>

                <em>：</em>

                <input id="cemail" name="email" size="25" class="required email">

            </p>

            <p>

                <label for="curl">网址</label>

                <em>：</em>

                <input id="curl" name="url" size="25" class="url" value="">

            </p>

            <p>

                <label for="ccomment">你的评论</label>

                <em>：</em>

                <textarea id="ccomment" name="comment" cols="25" class="required"></textarea>

            </p>

            <p>+

                <input class="submit" type="submit" value="提交">

            </p>

    </form>

    </fieldset>

    <script src="//libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>

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

    <script>

        $(document).ready(function () {

            $('#commentForm').validate();  //确定id为"commentForm"的表单被验证

        });

    </script>

在这段代码中<input>中的

class="required" 为必需填写
minlength="2"为最小长度为2
class="required email"为必须填写和必须符合E-mail格式
class="url"为url的格式验证

运行效果图：

image.png

任务完成了但是问题来了：class 嵌在标签当中，意味着验证功能和HTML结构没有分离，下面介绍另一种方法通过name属性可以解决此问题
首先去除input标签中的class属性，然后加入下面的代码：

<script>

        $(document).ready(function () {

            $('#commentForm').validate({

                rules: {

                    username: {

                        required: true,

                        minlength: 2

                    },

                    email: {

                        required: true,

                        email: true

                    },

                    url: "url",

                    comment: "required"

                }

            });

        });

    </script>

修改后的效果和之前的一摸一样

本文由职坐标整理并发布，了解更多内容，请关注职坐标WEB前端jQuery频道！