JQuery表单验证的方法和实例

jQuery Validate

方法详解：http://www.runoob.com/jquery/jquery-plugin-validate.html

jQuery Validate 插件为表单提供了强大的验证功能，让客户端表单验证变得更简单，同时提供了大量的定制选项，满足应用程序各种需求。该插件捆绑了一套有用的验证方法，包括 URL 和电子邮件验证，同时提供了一个用来编写用户自定义方法的 API。所有的捆绑方法默认使用英语作为错误信息，且已翻译成其他 37 种语言。

该插件是由 Jörn Zaefferer 编写和维护的，他是 jQuery 团队的一名成员，是 jQuery UI 团队的主要开发人员，是 QUnit 的维护人员。该插件在 2006 年 jQuery 早期的时候就已经开始出现，并一直更新至今。目前版本是 1.14.0。

访问 jQuery Validate 官网，下载最新版的 jQuery Validate 插件。

菜鸟教程提供的 1.14.0 版本下载地址：http://static.runoob.com/download/jquery-validation-1.14.0.zip

<div class="login_wrapper">
    <div class="login_header">
        <a href="h/" target="_blank" rel="external nofollow" ><img src="style/images/logo_white.png" width="285" height="62" alt=""/></a>

        <div id="cloud_s"><img src="style/images/cloud_s.png" width="81" height="52" alt="cloud"/></div>
        <div id="cloud_m"><img src="style/images/cloud_m.png" width="136" height="95" alt="cloud"/></div>
    </div>

    <input type="hidden" id="resubmitToken" value=""/>

    <div class="login_box">
        <form id="loginForm" action="index.html">
            <input type="text" id="email" name="email" value="" tabindex="1" placeholder="请输入登录邮箱地址"/>
            <input type="password" id="password" name="password" tabindex="2" placeholder="请输入密码"/>
            <span class="error" style="display:none;" id="beError"></span>
            <label class="fl" for="remember"><input type="checkbox" id="remember" value="" checked="checked"name="autoLogin"/>
                记住我</label>
            <a href="reset.html" target="_blank" rel="external nofollow"  class="fr" target="_blank">忘记密码？</a>

            <input type="submit" id="submitLogin" value="登     录"/>
            <!--<a style="color:#fff;" href="index.html" target="_blank" rel="external nofollow"  class="submitLogin" title="登     录"/>登     录</a>-->


            <input type="hidden" id="callback" name="callback" value=""/>
            <input type="hidden" id="authType" name="authType" value=""/>
            <input type="hidden" id="signature" name="signature" value=""/>
            <input type="hidden" id="timestamp" name="timestamp" value=""/>
        </form>
        <div class="login_right">
            <div>还没有帐号？</div>
            <a href="register.html" target="_blank" rel="external nofollow"  class="registor_now">立即注册</a>

            <div class="login_others">使用以下帐号直接登录:</div>
            <a href="h/ologin/auth/sina.html" target="_blank" rel="external nofollow"  target="_blank" class="icon_wb" title="使用新浪微博帐号登录"></a>
            <a href="h/ologin/auth/qq.html" target="_blank" rel="external nofollow"  class="icon_qq" target="_blank" title="使用腾讯QQ帐号登录"></a>
        </div>
    </div>
    <div class="login_box_btm"></div>
</div>

<script type="text/javascript">
    $(function () {
        //验证表单
        $("#loginForm").validate({
            /* onkeyup: false,
             focusCleanup:true, */
            rules: {
                email: {
                    required: true,
                    email: true
                },
                password: {
                    required: true
                }
            },
            messages: {
                email: {
                    required: "请输入登录邮箱地址",
                    email: "请输入有效的邮箱地址，如：[email protected]"
                },
                password: {
                    required: "请输入密码"
                }
            },
            submitHandler: function (form) {
                if ($('#remember').prop("checked")) {
                    $('#remember').val(1);
                } else {
                    $('#remember').val(null);
                }
                var email = $('#email').val();
                var password = $('#password').val();
                var remember = $('#remember').val();

                var callback = $('#callback').val();
                var authType = $('#authType').val();
                var signature = $('#signature').val();
                var timestamp = $('#timestamp').val();

                $(form).find(":submit").attr("disabled", true);
                $.ajax({
                    type: 'POST',
                    data: {
                        email: email,
                        password: password,
                        autoLogin: remember,
                        callback: callback,
                        authType: authType,
                        signature: signature,
                        timestamp: timestamp
                    },
                    url: ctx + '/user/login.json'
                }).done(function (result) {
                    if (result.success) {
                        if (result.content.loginToUrl) {
                            window.location.href = result.content.loginToUrl;
                        } else {
                            window.location.href = ctx + '/';
                        }
                    } else {
                        $('#beError').text(result.msg).show();
                    }
                    $(form).find(":submit").attr("disabled", false);
                });
            }
        });
    })
</script>