网站开发常用jQuery插件总结(四）验证插件validation

在网站开发过程中，有时我们需要验证用户输入的信息是否符合我们的要求，所以我们会对用户提交的数据进行验证。验证分两次进行，一次是在客户端，一次是在服务端。客户端的验证可以提升用户的体验。

jquery验证插件有很多，实现的功能也基本相同。本文介绍的只是jquery验证插件中的一种jquery.validate

1.jquery.validate插件功能

简单实现客户端信息验证，过滤不符合要求的信息

2.jquery.validate官方地址

官方地址：http://jqueryvalidation.org/,有详细的插件使用说明

官方demo：http://jquery.bassistance.de/validate/demo/

3.jquery.validate使用方法

1.引用js

<script type="text/javascript" src="jquery.js"></script>

<script type="text/javascript" src="jquery.validate.js"></script>

2.css样式，可自定义，简单的只需要添加error样式，也可使用官方demo中的样式。

.error{

    color:red;

    margin-left:8px;

}

3.js代码

$(document).ready(function() {

    // validate signup form on keyup and submit

    var validator = $("#signupform").validate({

        rules: {

            firstname: "required",

            username: {

                required: true,

                minlength: 2

            },

            password: {

                required: true,

                minlength: 5

            },

            password_confirm: {

                required: true,

                minlength: 5,

                equalTo: "#password"

            },

            email: {

                required: true,

                email: true,

            },

            dateformat: "required",

            terms: "required"

        },

        messages: {

            firstname: "姓名不能为空",

            username: {

                required: "用户名不能为空",

                minlength: jQuery.format("用户名只少由 {0} 字符组成")

            },

            password: {

                required: "密码不能为空",

                minlength: jQuery.format("密码只少由 {0} 字符组成")

            },

            password_confirm: {

                required: "确认密码不能为空",

                minlength: jQuery.format("确认密码只少由 {0} 字符组成"),

                equalTo: "秘密与确认密码不一致"

            },

            email: {

                required: "邮箱不能为空",

                email: "邮箱格式不正确"

            },

            dateformat: "请选择性别",

            terms: " "

        },

        // the errorPlacement has to take the table layout into account

        errorPlacement: function(error, element) {

            if ( element.is(":radio") )

                error.appendTo( element.parent().next().next());

            else if ( element.is(":checkbox") )

                error.appendTo ( element.next());

            else

                error.appendTo( element.parent().next());

        },

        // specifying a submitHandler prevents the default submit, good for the demo

        submitHandler: function() {

            alert("submitted!");

        },

        // set this class to error-labels to indicate valid fields

        success: function(label) {

            // set   as text for IE

            label.html(" ").addClass("checked");

        },

        highlight: function(element, errorClass) {

            $(element).parent().next().find("." + errorClass).removeClass("checked");

        }

    });

});

以上的代码只使用了插件提供的属性和方法。也可以自定义验证方法。如

$.validator.addMethod("checkUserName", function(value) {

        //value为验证的值，对应于元素id

    //方法代码

}, '用户名格式不正确');

使用自定义方法也非常简单，只需要 元素id:”checkUserName”

4.使用的html

<form id="signupform" autocomplete="off" method="get" action="">

      <table>

      <tr>

        <td class="label"><label id="lfirstname" for="firstname">姓名</label></td>

        <td class="field"><input id="firstname" name="firstname" type="text" value="" maxlength="100" /></td>

        <td class="status"></td>

      </tr>

      <tr>

        <td class="label"><label id="lusername" for="username">用户名</label></td>

        <td class="field"><input id="username" name="username" type="text" value="" maxlength="50" /></td>

        <td class="status"></td>

      </tr>

      <tr>

        <td class="label"><label id="lpassword" for="password">密码</label></td>

        <td class="field"><input id="password" name="password" type="password" maxlength="50" value="" /></td>

        <td class="status"></td>

      </tr>

      <tr>

        <td class="label"><label id="lpassword_confirm" for="password_confirm">确认密码</label></td>

        <td class="field"><input id="password_confirm" name="password_confirm" type="password" maxlength="50" value="" /></td>

        <td class="status"></td>

      </tr>

      <tr>

        <td class="label"><label id="lemail" for="email">邮箱</label></td>

        <td class="field"><input id="email" name="email" type="text" value="" maxlength="150" /></td>

        <td class="status"></td>

      </tr>

                  <tr>

        <td class="label"><label>性别</label></td>

        <td class="field" colspan="2" style="vertical-align: top; padding-top: 2px;">

        <table>

        <tbody>



        <tr>

            <td style="padding-right: 5px;">

                <input id="sex_men" name="dateformat" type="radio" value="0" />

                <label id="lbl_sex_men" for="dateformat_eu">男</label>

            </td>

            <td style="padding-left: 5px;">

                <input id="sex_women" name="dateformat" type="radio" value="1"  />

                <label id="lbl_sex_women" for="dateformat_am">女</label>

            </td>

            <td>

            </td>

        </tr>

        </tbody>

        </table>

        </td>

      </tr>



      <tr>

        <td class="label">&nbsp;</td>

        <td class="field" colspan="2">

            <div id="termswrap">

                <input id="terms" type="checkbox" name="terms" />

                <label id="lterms" for="terms">以阅读并同意网站条款.</label>

            </div> <!-- /termswrap -->

        </td>

      </tr>

      <tr>

        <td class="label"></td>

        <td class="field" colspan="2">

        <input id="signupsubmit" name="signup" type="submit" value="注册" />

        </td>

      </tr>



      </table>

</form>

效果演示：验证插件 validate 测试