我的最后一个问题不清楚,所以我把所有的澄清都贴在这里。在下面的代码中,我想使用jQuery显示注册表单错误的错误消息。这里的问题是,这段代码只是将数据插入数据库,而不检查任何错误或显示错误消息,并重定向到登录页面。那么我哪里错了呢?
现在我已经更新了我的代码,数据没有提交,除非所有的条件都满足了我想要的,但错误显示在点击提交按钮,register.php
页面被重新加载,现在它只显示错误消息,没有注册表单,就像没有使用jQuery一样。我不希望页面被重新加载它应该显示错误信息在那里。
<?php
if(isset($_POST['reg'])){
$fn = ucfirst($_POST['fname']);
$ln = ucfirst($_POST['lname']);
$un = $_POST['username'];
$em = $_POST['email'];
$pswd = $_POST['password'];
$pswd2 = $_POST['password2'];
$sql=$db->prepare("SELECT username FROM users WHERE username=:username");
$sql->execute(array(':username'=>$un));
$row = $sql->fetch(PDO::FETCH_ASSOC);
$db_username = $row['username'];
$usernames = $db_username;
$data = array();
if( isset($fn) && isset($ln) ) {
if( $fn != "" && $ln!="" && $fn == $ln ) {
$data["flname"] = "cntbempty";
}
}
if( isset($un) ) {
if $un == $usernames ) {
$data["username"] = "inuse";
}
}
if( isset($pswd) && isset($pswd2) ) {
if( $pswd2 != "" && $pswd != $pswd2 ) {
$data["password"] = "missmatch";
}
}
if( isset( $em ) ) {
if( $em != "" && !preg_match( "/^([a-zA-Z0-9])+([a-zA-Z0-9'._-])*@([a-zA-Z0-9_-])+([a-zA-Z0-9'._-]+)+$/", $_POST["email"] ) ) {
$data["email"] = "notvalid";
}
}
if(!empty($data))
{
echo json_encode($data);
die;
}
else{
$pswd = password_hash($pswd, PASSWORD_DEFAULT);
$pswd2 = password_hash($pswd2, PASSWORD_DEFAULT);
$stmt = $db->prepare("INSERT INTO users (username,first_name,last_name,email,password,password2,) VALUES (:username,:first_name,:last_name,:email,:password,:password2,)");
$stmt->execute( array(':username'=>$un,':first_name'=>$fn,':last_name'=>$ln,':email'=>$em,':password'=>$pswd,':password2'=>$pswd2));
}
if ($stmt->rowCount() == 1) {
header("Location: login.php");
}
else {
echo "error";
}
}
?>
jquery
代码
$(document).ready(function(){
$("form.register").change(function() {
$.post("register.php", $("form.register").serialize(), function( data ) {
if( data.flname == "cntbempty" )
$("p#name_error").slideDown();
else
$("p#name_error").hide();
if( data.username == "inuse" )
$("p#username_error").slideDown();
else
$("p#username_error").hide();
if( data.password == "missmatch" )
$("p#password_error").slideDown();
else
$("p#password_error").hide();
if( data.email == "notvalid" )
$("p#email_error").slideDown();
else
$("p#email_error").hide();
}, "json");
});
});
您需要修复一些东西。
- 首先,处理注册过程的文件不应该与表单相同。
- 这纯粹是为了处理数据,所以它不能直接使用
header("Location: login.php")
重定向浏览器。这部分应该由你的javascript代码来处理。 - 你还需要告诉浏览器所提供的内容是JSON。
- 你还需要防止表单直接提交
请看下面更新后的代码。
创建一个名为:registrationHandler.php
<?php
if(isset($_POST['reg'])){
$fn = ucfirst($_POST['fname']);
$ln = ucfirst($_POST['lname']);
$un = $_POST['username'];
$em = $_POST['email'];
$pswd = $_POST['password'];
$pswd2 = $_POST['password2'];
$sql=$db->prepare("SELECT username FROM users WHERE username=:username");
$sql->execute(array(':username'=>$un));
$row = $sql->fetch(PDO::FETCH_ASSOC);
$db_username = $row['username'];
$usernames = $db_username;
$data = array();
if( isset($fn) && isset($ln) ) {
if( $fn != "" && $ln!="" && $fn == $ln ) {
$data["flname"] = "cntbempty";
}
}
if( isset($un) ) {
if $un == $usernames ) {
$data["username"] = "inuse";
}
}
if( isset($pswd) && isset($pswd2) ) {
if( $pswd2 != "" && $pswd != $pswd2 ) {
$data["password"] = "missmatch";
}
}
if( isset( $em ) ) {
if( $em != "" && !preg_match( "/^([a-zA-Z0-9])+([a-zA-Z0-9'._-])*@([a-zA-Z0-9_-])+([a-zA-Z0-9'._-]+)+$/", $_POST["email"] ) ) {
$data["email"] = "notvalid";
}
}
if(!empty($data))
{
header('Content-Type: application/json');
echo json_encode($data);
die;
}
else{
$pswd = password_hash($pswd, PASSWORD_DEFAULT);
$pswd2 = password_hash($pswd2, PASSWORD_DEFAULT);
$stmt = $db->prepare("INSERT INTO users (username,first_name,last_name,email,password,password2,) VALUES (:username,:first_name,:last_name,:email,:password,:password2,)");
$stmt->execute( array(':username'=>$un,':first_name'=>$fn,':last_name'=>$ln,':email'=>$em,':password'=>$pswd,':password2'=>$pswd2));
}
//! Send Success Status to browser for it to understand
if ($stmt->rowCount() == 1) {
$data['success'] = true;
}
else {
$data['success'] = false;
}
header('Content-Type: application/json');
echo json_encode($data);
}
?>
Javascript代码:
$(document).ready(function(){
$("form.register").submit(function(e) {
e.preventDefault();
$.post("registrationHandler.php", $("form.register").serialize(), function( data ) {
if( data.flname == "cntbempty" )
$("p#name_error").slideDown();
else
$("p#name_error").hide();
if( data.username == "inuse" )
$("p#username_error").slideDown();
else
$("p#username_error").hide();
if( data.password == "missmatch" )
$("p#password_error").slideDown();
else
$("p#password_error").hide();
if( data.email == "notvalid" )
$("p#email_error").slideDown();
else
$("p#email_error").hide();
if(data.success) {
// registration succesful. Redirect
window.location = "login.php";
}
else {
// Some database error?
}
}, "json");
});
});
您在这里的问题,正如@Novocaine提到的,是您让脚本在用错误填充$data
后继续。
对我来说,最简单的事情就是初始化你的$data
作为一个空数组,然后只有在确实有错误的情况下才填充它。
//changing the init of the $data array
$data = array();
if( isset($fn) && isset($ln) ) {
if( $fn != "" && $ln!="" && $fn == $ln ) {
$data["flname"] = "cntbempty";
}
}
/* List of all your validation tests */
//Now your test if you have any errors in your $data
if(!empty($data))
{
echo json_encode($data);
die;
}
//And only after if the condition is not met, you can insert and redirect
/* Rest of your code here */
您还需要在jQuery代码中添加一个条件,用于检查data.flname
和其他字段是否已定义。
//example
if( data.flname && data.flname == "cntbempty" )
$("p#name_error").slideDown();
在echo json_encode($data);
之前添加header('Content-Type: application/json');
$(document).ready(function(){
$("form.register").submit(function(e) {
e.preventDefault();
$.post("register.php", $("form.register").serialize(), function( data ) {
if(data.length == 0){
window.location.href= "login.php";
}
if( data.flname == "cntbempty" )
$("p#name_error").slideDown();
else
$("p#name_error").hide();
if( data.username == "inuse" )
$("p#username_error").slideDown();
else
$("p#username_error").hide();
if( data.password == "missmatch" )
$("p#password_error").slideDown();
else
$("p#password_error").hide();
if( data.email == "notvalid" )
$("p#email_error").slideDown();
else
$("p#email_error").hide();
}, "json");
});
});
将header("Location: login.php");
替换为echo(json_encode(array()))
按照下面的方法重新编写代码并尝试一下。
<?php
if(isset($_POST['reg'])){
$fn = ucfirst($_POST['fname']);
$ln = ucfirst($_POST['lname']);
$un = $_POST['username'];
$em = $_POST['email'];
$pswd = $_POST['password'];
$pswd2 = $_POST['password2'];
$sql=$db->prepare("SELECT username FROM users WHERE username=:username");
$sql->execute(array(':username'=>$un));
$row = $sql->fetch(PDO::FETCH_ASSOC);
$db_username = $row['username'];
$usernames = $db_username;
//$data = array();
$data = 0;
if( isset($fn) && isset($ln) ) {
if( $fn != "" && $ln!="" && $fn == $ln ) {
// $data["flname"] = "cntbempty";
$data = 2;
}
}
if( isset($un) ) {
if $un == $usernames ) {
// $data["username"] = "inuse";
$data = 3;
}
}
if( isset($pswd) && isset($pswd2) ) {
if( $pswd2 != "" && $pswd != $pswd2 ) {
// $data["password"] = "missmatch";
$data = 4;
}
}
if( isset( $em ) ) {
if( $em != "" && !preg_match( "/^([a-zA-Z0-9])+([a-zA-Z0-9'._-])*@([a-zA-Z0-9_-])+([a-zA-Z0-9'._-]+)+$/", $_POST["email"] ) ) {
// $data["email"] = "notvalid";
$data = 5;
}
}
/* if(!empty($data))
{
header('Content-Type: application/json');
echo json_encode($data);
die;
}
else{ */
$pswd = password_hash($pswd, PASSWORD_DEFAULT);
$pswd2 = password_hash($pswd2, PASSWORD_DEFAULT);
$stmt = $db->prepare("INSERT INTO users (username,first_name,last_name,email,password,password2,) VALUES (:username,:first_name,:last_name,:email,:password,:password2,)");
$stmt->execute( array(':username'=>$un,':first_name'=>$fn,':last_name'=>$ln,':email'=>$em,':password'=>$pswd,':password2'=>$pswd2));
// }
//! Send Success Status to browser for it to understand
if ($stmt->rowCount() == 1) {
// $data['success'] = true;
$data = 1;
}
else {
// $data['success'] = false;
$data = -1;
}
// header('Content-Type: application/json');
// echo json_encode($data);
echo $data;
}
?>
和jquery脚本
$(document).ready(function(){
$("form.register").change(function() {
var data = new FormData(this);
$.ajax({
type:"post",
url: register.php,
data:data,
mimeType:"multipart/form-data",
contentType: false,
cashe: false,
processData: false,
error:function(data){
alert ("An Error has Occured...");
return false;
},
beforeSend: function() {
$('#Loading').html('<img src="images/page-loader.gif" /> Processing</div>');
},
success: function(html){
switch($html){
case 1:
alert("success");
window.location.href="" /* your redirect page*/;
break;
case 2:
$("#error").html('Field cannot be Empty !!!');
break;
case 3:
/* so on...*/
break;
case 4:
break;
case 5:
break;
}
}
});
});
});
在传递给服务器之前在浏览器上验证必需的字段。然后,您只需验证所选择的用户名未被使用。并且用户不必等待回发来获得验证的结果。
function isValidEmailAddress(emailAddress) {
var pattern = new RegExp(/^(['w-'.]+@(['w-]+'.)+['w-]{2,4})?$/);
return pattern.test(emailAddress);
}
$(function(){
$('form.register').submit(function(e){
e.preventDefault();
var errors = false;
if($('#fname').val().length == 0){
$('p#name_error').slideDown();
errors = true;
}else{
$('p#name_error').slideUp();
}
if($('#lname').val().length == 0){
$('p#name_error').slideDown();
errors = true;
}else{
$('p#name_error').slideUp();
}
if($('#username').val().length == 0){
$('p#username_error').slideDown();
errors = true;
}else{
$('p#username_error').slideUp();
}
if(!isValidEmailAddress($('#email').val())){
$("p#email_error").slideDown();
errors = true;
}else{
$("p#email_error").hide();
}
if($('#password').val().length == 0){
$("p#password_error").slideDown();
errors = true;
}else{
$("p#password_error").hide();
}
if($('#password2').val().length == 0){
$("p#password_error").slideDown();
errors = true;
}else{
$("p#password_error").hide();
}
if($('#password').val() != $('#password2').val()){
$("p#password_error").slideDown();
errors = true;
}else{
$("p#password_error").hide();
}
if(errors){
return;
}
$.post("register.php", $("form.register").serialize(), function( data ) {
if(data.length == 0){
window.location.href= "login.php";
}
if( data == "inuse" ){
$("p#username_error").slideDown();
}
}
});
});
PHP: <?php
if(isset($_POST['reg'])){
$fn = ucfirst($_POST['fname']);
$ln = ucfirst($_POST['lname']);
$un = $_POST['username'];
$em = $_POST['email'];
$pswd = $_POST['password'];
$pswd2 = $_POST['password2'];
$sql=$db->prepare("SELECT username FROM users WHERE username=:username");
$sql->execute(array(':username'=>$un));
$row = $sql->fetch(PDO::FETCH_ASSOC);
$db_username = $row['username'];
$usernames = $db_username;
$data = "";
if $un == $usernames ) {
$data = "inuse";
}
if(strlen($data) == 0){
$pswd = password_hash($pswd, PASSWORD_DEFAULT);
$pswd2 = password_hash($pswd2, PASSWORD_DEFAULT);
$stmt = $db->prepare("INSERT INTO users (username,first_name,last_name,email,password,password2,) VALUES (:username,:first_name,:last_name,:email,:password,:password2,)");
$stmt->execute( array(':username'=>$un,':first_name'=>$fn,':last_name'=>$ln,':email'=>$em,':password'=>$pswd,':password2'=>$pswd2));
}
echo data;
}
?>
试试这个
<script>
// When the browser is ready...
$(function() {
$("#your form ID").validate({
// Specify the validation rules
rules: {
fname:"required",
lname: "required",
username: "required",
email: "required",
password: "required"
}
});
$('#your form ID').submit(function(e){
e.preventDefault();
var $form = $(this);
if(! $form.valid()) return false;
var data = $( "#your form ID" ).serialize();
$.ajax({
type:"POST",
url:"",
data:data,
success:function(data)
{
console.log(data);
}
});
});
});
</script>
更多内容请阅读本教程http://w3code.in/2015/10/submit-a-form-with-ajax-after-jquery-validation-is-successful/
.html文件
请添加不同的错误字段,显示错误,并给他们id:
#nameerr,#emailerr,,#passerr,#confirmpasserr
. css文件
在这个css文件中,我们把所有的错误id可见性隐藏起来,如果你愿意,也可以使用display。
#nameerr,#emailerr,#passerr,#confirmpasserr{
color: red;
background-color:#FFB2B2;
visibility : hidden;
font-weight:bold;
font-size: 12px;
box-shadow: 0 0 5px rgba(255, 0, 0, 1);
}
.js文件
当你使用submit时,如果特定的需求没有被填满,那么它会显示错误!!
$(document).ready(function()
{
$('#submit').click(function()
{
var uname = $('#name').val();
if($('#name').val().match('[a-zA-Z]+''.?')) {
$("#nameerr").css("visibility", "hidden");
}
else {
$("#nameerr").text("Name is InValid");
$("#nameerr").css("visibility", "visible");
return false;
}
}
);
$('#submit').click(function()
{
var email = $('#email').val();
if($('#email').val().match('[A-Z0-9a-z._%+-]+@[A-Za-z0-9.-]+''.[A-Za-z]{2,6}')) {
$("#emailerr").css("visibility", "hidden");
}
else
{
$("#emailerr").text("Email Address is InValid.");
$("#emailerr").css("visibility", "visible");
return false;
}
}
);
$('#submit').click(function()
{
var email = $('#pass').val();
if($('#pass').val().length<5) {
$("#passerr").text("Minimum length should be 5");
$("#passerr").css("visibility", "visible");
return false;
}
else {
$("#passerr").css("visibility", "hidden");
}
}
);
$('#submit').click(function(){
var confirmpass = $('#confirmpassword').val();
if($('#password').val() != $('#confirmpassword').val()) {
$("#confirmpasserr").text("Password doesnt match");
$("#confirmpasserr").css("visibility", "visible");
return false;
}
else {
$("#confirmpasserr").css("visibility", "hidden");
}
});
$('#email').on("blur", function()
{
if($('#err').val.match($msg)) {
$("#err").text($msg);
$("#err").css("visibility", "visible");
}
else {
$("#err").css("visibility", "hidden");
}
}
);
}
);