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 = /^((([az]|\\d|[!#\\$%&'\\*\\+\\-\\/=\\?\\^_`{\\|}~]|[\ -\퟿\豈-\﷏\ﷰ-\￯])+(\\.([az]|\\d|[!#\\$%&'\\*\\+\\-\\/=\\?\\^_`{\\|}~]|[\ -\퟿\豈-\﷏\ﷰ-\￯])+)*)|((\\x22)((((\\x20|\\x09)*(\\x0d\\x0a))?(\\x20|\\x09)+)?(([\\x01-\\x08\\x0b\\x0c\\x0e-\\x1f\\x7f]|\\x21|[\\x23-\\x5b]|[\\x5d-\\x7e]|[\ -\퟿\豈-\﷏\ﷰ-\￯])|(\\\\([\\x01-\\x09\\x0b\\x0c\\x0d-\\x7f]|[\ -\퟿\豈-\﷏\ﷰ-\￯]))))*(((\\x20|\\x09)*(\\x0d\\x0a))?(\\x20|\\x09)+)?(\\x22)))@((([az]|\\d|[\ -\퟿\豈-\﷏\ﷰ-\￯])|(([az]|\\d|[\ -\퟿\豈-\﷏\ﷰ-\￯])([az]|\\d|-|\\.|_|~|[\ -\퟿\豈-\﷏\ﷰ-\￯])*([az]|\\d|[\ -\퟿\豈-\﷏\ﷰ-\￯])))\\.)+(([az]|[\ -\퟿\豈-\﷏\ﷰ-\￯])|(([az]|[\ -\퟿\豈-\﷏\ﷰ-\￯])([az]|\\d|-|\\.|_|~|[\ -\퟿\豈-\﷏\ﷰ-\￯])*([az]|[\ -\퟿\豈-\﷏\ﷰ-\￯])))\\.?$/; 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不引人注目的插件使事情工作更加顺畅。

我建议您调查一下您的代码中是否存在逻辑错误。 例如，如果您遇到验证错误，则$("#submit").click应该返回false。

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

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