JQuery注册表单验证

Question

我有一个网站的登记表，其中基本包括：

• 名字
• 姓氏
• 出生日期
• 电子邮件
• 用户名
• 密码
• 确认密码，我可以做一个脚本，以验证是否每一种情况的表格是否已填写和电子邮件，如果它是一个有效的电子邮件地址。现在我被困在如何验证全名(将像这样: Name+LastName)，电子邮件和用户名是否存在于数据库中。我试过用jquery.validate插件，但没能工作。

演示：https://jsfiddle.net/2y1bry24/4/

​

/*** Sign Up ***/

$(document).ready(function () {
    $flag = 1;
    /***** Personal Data Validation ****/
    $("#name").focusout(function () {
        if ($(this).val() == '') {
            $(this).css("border-color", "#cd2d00");
            $('#submit').attr('disabled', true);
            $("#error_name").text("* You have to enter your first name!");
        } else {
            $(this).css("border-color", "#2eb82e");
            $('#submit').attr('disabled', false);
            $("#error_name").text("");

        }
    });
    $("#lastname").focusout(function () {
        if ($(this).val() == '') {
            $(this).css("border-color", "#cd2d00");
            $('#submit').attr('disabled', true);
            $("#error_lastname").text("* You have to enter your last name!");
        } else {
            $(this).css("border-color", "#2eb82e");
            $('#submit').attr('disabled', false);
            $("#error_lastname").text("");
        }
    });
    $("#dob").focusout(function () {
        if ($(this).val() == '') {
            $(this).css("border-color", "#cd2d00");
            $('#submit').attr('disabled', true);
            $("#error_dob").text("* You have to enter your Date of Birth!");
        } else {
            $(this).css("border-color", "#2eb82e");
            $('#submit').attr('disabled', false);
            $("#error_dob").text("");
        }
    });

    /***** Email Validation ****/

    function validateEmail(sEmail) {
        var filter = /^((([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)*)|((\x22)((((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(([\x01-\x08\x0b\x0c\x0e-\x1f\x7f]|\x21|[\x23-\x5b]|[\x5d-\x7e]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(\\([\x01-\x09\x0b\x0c\x0d-\x7f]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))))*(((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(\x22)))@((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?$/;
        if (filter.test(sEmail)) {
            return true;
        } else {
            return false;
        }
    }
    $("#email").focusout(function () {
        var sEmail = $('#email').val();
        if ($.trim(sEmail).length == 0) {
            $(this).css("border-color", "#cd2d00");
            $('#submit').attr('disabled', true);
            $("#error_email").text("Please enter valid email address");

            e.preventDefault();
        }
        if (validateEmail(sEmail)) {
            $(this).css("border-color", "#2eb82e");
            $('#submit').attr('disabled', false);
            $("#error_email").text("");;
        } else {
            $(this).css("border-color", "#cd2d00");
            $('#submit').attr('disabled', true);
            $("#error_email").text("Invalid email address");
            e.preventDefault();
        }
    });
    /***** Login Data Validation ****/


    $("#username").focusout(function () {
        if ($(this).val() == '') {
            $(this).css("border-color", "#cd2d00");
            $('#submit').attr('disabled', true);
            $("#error_username").text("* You have to enter your Username!");
        } else {
            $(this).css("border-color", "#2eb82e");
            $('#submit').attr('disabled', false);
            $("#error_username").text("");
        }
    });
    $("#password").focusout(function () {
        if ($(this).val() == '') {
            $(this).css("border-color", "#cd2d00");
            $('#submit').attr('disabled', true);
            $("#error_password").text("* You have to enter your Password!");
        } else {
            $(this).css("border-color", "#2eb82e");
            $('#submit').attr('disabled', false);
            $("#error_password").text("");
        }
    });
    $("#confirm").focusout(function () {
        if ($("#confirm").val() !== $("#password").val()) {
            $("#confirm").css("border-color", "#cd2d00");
            $('#submit').attr('disabled', true);
            $("#error_confirm").text("Passwords Do not match!");
        } else {
            $(this).css("border-color", "#2eb82e");
            $('#submit').attr('disabled', false);
            $("#error_confirm").text("");
        }
    });

    /***+* Submit Validation ****/
    $("#submit").click(function () {
        if ($("#name").val() == '') {
            $("#name").css("border-color", "#cd2d00");
            $('#submit').attr('disabled', true);
            $("#error_name").text("* You have to enter your first name!");
        }
        if ($("#lastname").val() == '') {
            $("#lastname").css("border-color", "#cd2d00");
            $('#submit').attr('disabled', true);
            $("#error_lastname").text("* You have to enter your Last name!");
        }
        if ($("#dob").val() == '') {
            $("#dob").css("border-color", "#cd2d00");
            $('#submit').attr('disabled', true);
            $("#error_dob").text("* You have to enter your Date of Birth!");
        }
        if ($("#email").val() == '') {
            $("#email").css("border-color", "#FF0000");
            $('#submit').attr('disabled', true);
            $("#error_email").text("* You have to enter your Email  !");
        }
        if ($("#username").val() == '') {
            $("#username").css("border-color", "#cd2d00");
            $('#submit').attr('disabled', true);
            $("#error_username").text("* You have to enter your Username!");
        }
        if ($("#password").val() == '') {
            $("#password").css("border-color", "#cd2d00");
            $('#submit').attr('disabled', true);
            $("#error_password").text("Enter a Password");
        }
        if ($("#confirm").val() == '') {
            $("#confirm").css("border-color", "#cd2d00");
            $('#submit').attr('disabled', true);
            $("#error_confirm").text("Confirm Password");
        }

    });


});

/*** Sign-up ***/

#playground-container {
    height: 500px;
    overflow: hidden !important;
    -webkit-overflow-scrolling: touch;
}

body,
html {
    
    background-repeat: repeat-y;
    background: url(https://i.ytimg.com/vi/4kfXjatgeEU/maxresdefault.jpg);
    font-family: 'Oxygen', sans-serif;
    background-size: cover;
}

.main {
    margin: 50px 15px;
}

h1.title {
    font-size: 50px;
    font-family: 'Passion One', cursive;
    font-weight: 400;
}

hr {
    width: 10%;
    color: #fff;
}

.form-group {
    margin-bottom: 15px;
}

label {
    margin-bottom: 15px;
}

input,
input::-webkit-input-placeholder {
    font-size: 11px;
    padding-top: 3px;
}

.main-login {
    background-color: #fff;
    /* shadows and rounded borders */
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
    border-radius: 2px;
    -moz-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
    -webkit-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
    box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
}

.form-control {
    height: auto!important;
    padding: 8px 12px !important;
}

.input-group {
    -webkit-box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.21)!important;
    -moz-box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.21)!important;
    box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.21)!important;
}

#button {
    border: 1px solid #ccc;
    margin-top: 28px;
    padding: 6px 12px;
    color: #666;
    text-shadow: 0 1px #fff;
    cursor: pointer;
    -moz-border-radius: 3px 3px;
    -webkit-border-radius: 3px 3px;
    border-radius: 3px 3px;
    -moz-box-shadow: 0 1px #fff inset, 0 1px #ddd;
    -webkit-box-shadow: 0 1px #fff inset, 0 1px #ddd;
    box-shadow: 0 1px #fff inset, 0 1px #ddd;
    background: #f5f5f5;
    background: -moz-linear-gradient(top, #f5f5f5 0%, #eeeeee 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #f5f5f5), color-stop(100%, #eeeeee));
    background: -webkit-linear-gradient(top, #f5f5f5 0%, #eeeeee 100%);
    background: -o-linear-gradient(top, #f5f5f5 0%, #eeeeee 100%);
    background: -ms-linear-gradient(top, #f5f5f5 0%, #eeeeee 100%);
    background: linear-gradient(top, #f5f5f5 0%, #eeeeee 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f5f5f5', endColorstr='#eeeeee', GradientType=0);
}

.main-center {
    margin-top: 30px;
    margin: 0 auto;
    max-width: 400px;
    padding: 10px 40px;
    background: #588ba7;
    color: #FFF;
    text-shadow: none;
    -webkit-box-shadow: 0px 3px 5px 0px rgba(0, 0, 0, 0.31);
    -moz-box-shadow: 0px 3px 5px 0px rgba(0, 0, 0, 0.31);
    box-shadow: 0px 3px 5px 0px rgba(0, 0, 0, 0.31);
}

span.input-group-addon i {
    color: #009edf;
    font-size: 17px;
}

.login-button {
    margin-top: 5px;
}

.login-register {
    font-size: 11px;
    text-align: center;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/jquery.validate.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<body>
    <div class="container">
        <div class="row main">
            <div class="main-login main-center">
                <h5>Registrieren</h5>
                <form id="register_form" name="register_form" method="post" action="index.php">
                    <div class="form-group">
                        <label for="name" class="cols-sm-2 control-label">Vorname</label>
                        <div class="cols-sm-10">
                            <div class="input-group">
                                <span class="input-group-addon"><i class="fa fa-user fa" aria-hidden="true"></i></span>
                                <input type="text" class="form-control" name="name" id="name" placeholder="Dein Vorname" data-validation="required" />
                            </div>
                        </div>
                        <span id="error_name" class="text-danger"></span>
                    </div>
                    <div class="form-group">
                        <label for="lastname" class="cols-sm-2 control-label">Nachname</label>
                        <div class="cols-sm-10">
                            <div class="input-group">
                                <span class="input-group-addon"><i class="fa fa-user fa" aria-hidden="true"></i></span>
                                <input type="text" class="form-control" name="lastname" id="lastname" placeholder="Dein Nachname" data-validation="required" />
                            </div>
                        </div>
                        <span id="error_lastname" class="text-danger"></span>
                    </div>
                    <div class="form-group">
                        <label for="dob" class="cols-sm-2 control-label">Geburtstag</label>
                        <div class="input-group">
                            <span class="input-group-addon"><i class="fa fa-calendar fa" aria-hidden="true"></i></span>
                            <input type="date" class="form-control" name="dob" id="dob" data-validation="required">
                        </div>
                        <span id="error_dob" class="text-danger"></span>
                    </div>
                    <div class="form-group">
                        <label for="email" class="cols-sm-2 control-label">Email</label>
                        <div class="cols-sm-10">
                            <div class="input-group">
                                <span class="input-group-addon"><i class="fa fa-envelope fa" aria-hidden="true"></i></span>
                                <input type="text" class="form-control" name="email" id="email" placeholder="Dein Email" data-validation="required" />
                            </div>
                        </div>
                        <span id="error_email" class="text-danger"></span>
                    </div>

                    <div class="form-group">
                        <label for="username" name="username" class="cols-sm-2 control-label username">Benutzername</label>
                        <div class="cols-sm-10">
                            <div class="input-group">
                                <span class="input-group-addon"><i class="fa fa-users fa" aria-hidden="true"></i></span>
                                <input type="text" class="form-control" name="username" id="username" placeholder="Benutzername" data-validation="required" />
                            </div>
                        </div>
                        <span id="error_username" class="text-danger"></span>
                    </div>

                    <div class="form-group">
                        <label for="password" class="cols-sm-2 control-label">Passwort</label>
                        <div class="cols-sm-10">
                            <div class="input-group">
                                <span class="input-group-addon"><i class="fa fa-lock fa-lg" aria-hidden="true"></i></span>
                                <input type="password" class="form-control" name="password" id="password" placeholder="Passwort" data-validation="required" />
                            </div>
                        </div>
                        <span id="error_password" class="text-danger"></span>
                    </div>

                    <div class="form-group">
                        <label for="confirm" class="cols-sm-2 control-label">Bestätigen</label>
                        <div class="cols-sm-10">
                            <div class="input-group">
                                <span class="input-group-addon"><i class="fa fa-lock fa-lg" aria-hidden="true"></i></span>
                                <input type="password" class="form-control" name="confirm" id="confirm" placeholder="Passwort" data-validation="required" />
                            </div>
                        </div>
                        <span id="error_confirm" class="text-danger"></span>
                    </div>

                    <div class="form-group ">
                    <input type="submit" value="Submit" id="submit" class="btn btn-secondary center"/>
                    </div>

                </form>
            </div>
        </div>
    </div>

   

</body>

​

Answer 1

对于Jquery验证，需要设置data-val=true和data-val-required='Some required error message。此外，jquery不显眼的插件使事情的工作更加顺畅。

我建议查看一下，因为on代码有逻辑错误。例如，如果您有验证错误，您的$("#submit").click应该返回false。

至于与数据库的集成，您将需要一个php处理程序，并且将使用jquery的ajax函数$.ajax(将要首先验证的字段发送给php处理程序。

您还可以在此时提交表单并在服务器端执行验证，这应该是任何人都应该做的，因为任何人都可以修改表单验证方法，甚至可以在浏览器上禁用javascript并提交无效数据。