使用AJAX向用户显示样式化的验证消息

我是AJAX和jQuery的新手，只是为了测试我创建了这个简单的代码。当用户输入他们的名及其姓它会显示一个消息，说Thanks for entering everything correctly!在偏蓝颜色，而当用户忘记输入自己的名及其姓它会显示错误上面写着You didn't entered anything在红颜色或类似的东西，是的，我知道这听起来很愚蠢，但这只是测试......因此，这里是我的代码：使用AJAX向用户显示样式化的验证消息

change_name.php：

function displayError($error) 
{ 
    // Display a div with a class of error, We style it using CSS 
    echo "<div class='error'>$error</div><br>"; 
} 

function displayMessage($message) 
{ 
    // Display a div with a class of message, We style it using CSS 
    echo "<div class='message'>$message</div> <br>"; 
} 


if (isset($_POST['first_name']) && isset($_POST['last_name'])) { 
    if (empty($_POST['first_name']) && empty($_POST['last_name'])) { 
     displayError('You didn\'t entered anything!'); 
    } else if (empty($_POST['first_name'])) { 
     displayError('You didn\'t entered your first name!'); 
    } else if (empty($_POST['last_name'])) { 
     displayError('You didn\'t entered your last name!'); 
    } else { 
     displayMessage('Thanks for entering everything correctly!'); 
    } 
}

的JavaScript：

$(document).ready(function(){ 
    $('#nameChange').on('submit', function (e) { 

     $.ajax({ 
      type: 'POST', 
      url: 'ajax/change_name.php', 
      data: $(this).serialize(), 
      success: function(data) { 
       $('.result').empty().append(data); 
      } 
     }); 

     e.preventDefault(); 
    }); 
});

的index.php

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <title>jQuery AJAX</title> 

    <style> 
     .message { 
      font-family: sans-serif; 
      color: #00AAE9; 
      font-size: 16px; 
     } 

     .error { 
      font-family: sans-serif; 
      color: #E70000; 
      font-size: 16px; 
     } 
    </style> 
</head> 
<body> 

    <form action="ajax/change_name.php" method="POST" id="nameChange"> 

     Result: <div class="result"></div> 


     <label for="first_name">First Name:</label> 
     <input type="text" name="first_name" id="first_name"> 
     <br> 

     <label for="last_name">Last Name:</label> 
     <input type="text" name="last_name" id="last_name">   
     <br> 

     <input type="submit" name="change_name" value="Change" id="change_name"> 
    </form> 


    <script src="//code.jquery.com/jquery-1.11.0.min.js"></script> 
    <script src="js/init.js"></script> 
</body> 
</html>

我的问题是：显示一个<div>然后向它添加一个类是一个好习惯，那么你可以使用CSS来设置它的样式吗？有没有更好的方法来做到这一点？你不能只返回一个JSON响应，并使用JavaScript访问它？

谢谢！

来源

2014-08-27 Akar

在我看来，最好是只检索文本和结果（错误或成功），并在接收元素上使用'.addClass（'success/fail'）'等类改变类，而不是下载带有类的新元素。 – 2014-08-27 17:51:53

谢谢，就像我说过的我一般对jQuery和JavaScript不熟悉，你能告诉我怎么知道它是成功还是失败？ – Akar 2014-08-27 17:53:53

有一个完整的插件为jquery，将做你的验证，它很容易学习，没有理由重新创建轮... – Jim 2014-08-27 18:01:12

我这样做是因为我需要从服务器TRUE/FALSE结果每一种情况下，伴随着一些信息：

PHP

// $_POST values are just examples 
if ($_SERVER["REQUEST"]=="POST") { 
    if (empty($_POST["username"]) || strlen($_POST["username"])<3) { 
     echo json_encode(array("result"=>FALSE,"class"=>"fail","message"=>"Your username can't be empty or less than 3 characters")); 
     return; 
    } 
    ... 
    echo json_encode(array("result"=>TRUE,"class"=>"success","message"=>"Success"); 
    return; 
}

$.ajax({ 
    type: 'POST', 
    url: 'ajax/change_name.php', 
    data: $(this).serialize(), 
    dataType: "JSON",   <---- 
    success: function(data) { 
     $('.result').removeClass().addClass("."+data["class"]).html(data["message"]); 
    }             --^   ------^ 
});

这可能看起来有点难看:)但

来源

2014-08-27 18:02:17

它完美的作品！我把它清理了一下。并且你并不真正需要'''在data ['class]'前面，所以不是'addClass（'。'+ data ['class']）'它应该是'addClass（data ['class ']）'，谢谢！ – Akar 2014-08-27 18:17:33

啊，是的，我的坏.. :) – 2014-08-27 18:19:38

使用AJAX向用户显示样式化的验证消息

回答

相关问题