[英]JQuery Register Form Validation
我的網站基本都有以下注冊表:
演示: 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>
對於Jquery驗證,您需要設置data-val=true
和data-val-required='Some required error message
。 另外,jQuery不引人注目的插件使事情工作更加順暢。
我建議您調查一下您的代碼中是否存在邏輯錯誤。 例如,如果您遇到驗證錯誤,則$("#submit").click
應該返回false。
至於與數據庫的集成,您將需要一個php處理程序,並將使用jquery的ajax函數$.ajax(
將要首先驗證的字段發送到php處理程序。
您還可以在此時提交表單並在服務器端執行驗證,您應該執行任何操作,因為任何人都可以修改您的表單驗證方法,甚至在其瀏覽器上禁用javascript並仍然提交無效數據。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.