我的jQuery验证不能正常工作

时间:2013-10-26 10:40:45

标签: jquery jquery-validate

我刚读了jQuery Validation,我遇到了问题。单击“提交”按钮不会触发任何验证。我一直在寻找几个小时,但不幸的是,我找不到任何解决方案。

我的代码:

<!DOCTYPE html>
<html lang="en">
<head>
        <title> Test </title>

        <style>

                body {
                        max-width: 70em;
                        margin: auto;
                        padding: 0;
                }

                .container {
                        max-width: 50%;
                        margin: auto auto;
                        -webkit-border-radius: 5px;
                        -moz-border-radius: 5px;
                        border-radius: 5px;
                }

                input, button {
                        display: block;
                        margin: 0.5em auto;
                        height: 2em;
                        width: 90%;
                }

                button {
                        border: 0;
                        background-color: green;
                }

                .text-center {
                        text-align: center;
                }
        </style>

</head>

<body>

        <div class="container">
                <form method="POST" id="form">
                        <h2 class="text-center"> Register! </h2>
                        <label> Username </label>
                        <input type="text" name="username">
                        <label> Password </label>
                        <input type="password" name="password">
                        <label> Password Confirmation </label>
                        <input type="password" name="password_confirmation">
                        <label> Email </label>
                        <input type="password" name="password_confirmation">
                        <input type="submit" value="Submit">
                </form>
        </div>

        <script src="http://code.jquery.com/jquery-1.8.3.min.js" type="text/javascript"></script>
        <script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.10.0/jquery.validate.js" type="text/javascript"></script>

        <script>

        $(document).ready(function() {
                $("#form").validate({
                        rules: {
                                username: {
                                        required: true,
                                        range: [4, 15]
                                }

                                password: {
                                        required: true,
                                        minlength: 8
                                }

                                email: {
                                        required: true,
                                        email: true
                                }
                        }
                });
        });



        </script>
</body>
</html>

JSFiddle:http://jsfiddle.net/hPmec/

1 个答案:

答案 0 :(得分:3)

脚本中存在语法错误

$(document).ready(function () {
    $("#form").validate({
        rules: {
            username: {
                required: true,
                range: [4, 15]
            }, //missing ,

            password: {
                required: true,
                minlength: 8
            }, //missing ,

            email: {
                required: true,
                email: true
            }
        }
    });
});

演示:Fiddle