HTML5表單驗證機制：在服務器端驗證後設置無效

Question

好的，標題太奇怪了，我當然應該告訴發生了什麼:)。我正在創建一個HTML5表單。我希望使用HTML5新技術和CSS3新僞類（當然我記得關於服務器端驗證）完全驗證該表單。我舉一個例子：

HTML：

<input type="email" value=""> 

CSS：

input:invalid {color: #fff; box-shadow: 0 0 5px #f00;} 

大家都知道：好驗證是一個嚴格的用戶的瀏覽器，並在同服務器。所以，如果我允許用​​戶只輸入電子郵件號碼，並且服務器將接受字母，這是一個錯誤。如果用戶可以輸入數字，服務器將不會接受，這是一個錯誤。

什麼問題？我要求用戶發送電子郵件。用戶輸入asd @ asd這是一個完全驗證電子郵件的HTML5命名法（asd可以是本地主機，因此不需要點）。這就是爲什麼輸入被驗證，並且一切正常。現在，我將這封電子郵件發送到我的PHP腳本中，這個腳本要求更高。例如，它：

PHP

function Validate($mail) { 
    $validate = true; 

    // Parse mail 
    if (!filter_var($mail, FILTER_VALIDATE_EMAIL)) $validate = false; 

    // Check DNS RR 
    $host = explode('@',$mail); 
    $host = array_pop($host); 
    if ($host == '') $validate = false; 
    else if (!checkdnsrr($host,'MX')) $validate = false; 

    return $validate; 
} 

所以當然電子郵件ASD ASD @未通過此驗證。

是否有任何機制允許我建議瀏覽器返回這封電子郵件仍然不好，但使用HTML5方法？

更確切地說，我在首次檢查POST數據時編寫了一個PHP表單類，然後渲染表單。所以如果缺少某些東西，我可以渲染表單，但使用發送的POST數據，不要忘記輸入值。這是做這種事的常用方法。

因此，我在PHP知道電子郵件無效但HTML5認爲它是有效的之後呈現輸入電子郵件。更多代碼（真片段，以顯示你的想法...）：

$email = isset($_POST['email']) ? $_POST['email'] : ''; 
if (Validate($email)) { 
    // do whatever You want with the form 
    header("Location: /success-congratulations-great-form-hoooray"); 
} 
else { 
    echo "<form>..."; 
    echo "<input type="email" value=\"$email\">"; // this $email is important here! 
    echo "<input type=\"submit\" ... /> 
    echo "</form>"; 
} 

是否有機會建議瀏覽器這個輸入無效？只有在驗證錯誤的情況下，我纔想到回顯某種<script>。但我卡在這裏。

我覺得這個問題，例如和答案將是有用的，是要讓符合standarts形式很多很多人，但錯過了一些東西......

THX您的答覆和最誠摯的問候！

UPDATE 真的沒有想法我怎麼能做到這一點？我正在考慮開始賞金:)。

Answer 1

好吧，我已經回答了我自己的問題。多麼自私的事情。如果PHP回報無效，那麼我們就可以重複

echo '<input name="mail" .... data-validate="This email address does not exist" />'; 

然後畢竟包含JavaScript，來檢查，如果輸入有其自己的數據驗證屬性。如果是的話，設置自定義有效性消息（在文件就緒），例如：

$(document).ready(function() { 
    var elements = $('input[data-validate]'); 
    for (var i = 0; i < elements.length; i++) { 
     var error = $(elements[i]).attr('data-validate'); 
     elements[i].setCustomValidity(error); 
     $(elements[i]).removeAttr('data-validate'); 
    } 
}); 

在這種情況下，我們可以使用HTML5驗證機制後的PHP驗證返回錯誤。和php一樣的錯誤會返回給用戶。 什麼是一個偉大而明智的解決方案!!!! 如果輸入不正確，您可以輸入幾個不同的消息。例如「域名不存在」，「郵件沒有收到@！」等等......

希望它可以幫助別人......您對這種解決方案有什麼看法？ 我會等待評論，如果有人給我+1，我會將它標記爲已回答......因爲我對回答自己感到奇怪。

UPDATE 事情並不像我想的那麼容易。這不是一個100％的好答案，但是，這是一個好主意:)。問題是，設置自定義有效性後，表單不能再提交。所以Javascript也應該觸發提交點擊功能，然後將所有自定義有效性重置爲init狀態。

真正的答案

所以......這不是一個好主意，這樣做的方式。讓standarts趕上現實，讓等待時間，當瀏覽器真正檢查電子郵件的一致性。直到這一次，你可以在瀏覽器端進行驗證，並將主要的強大驗證留給服務器端。如果出現問題，請使用您自己的錯誤報告機制，並且不要嘗試使用jquery將它們從PHP反射回html5。由於這太複雜了，不值得你的時間:)。如果有人有另一個想法，或知道如何做到這一點，請寫另一個答案。我會閱讀它，並將其標記爲已解決。直到那個時候，我認爲在經過幾天的研究之後，我的「做另一種方式」的答案已經足夠好了。

簡而言之：讓html5驗證你的表單和html5一樣好，如果強大的服務器端驗證拒絕這個表單，那麼就提供一個很好的信息，哪裏出錯了，以及用戶應該改進什麼來驗證。

Thx你都爲你的答案，最好的問候。

Answer 2

一段時間以前，當我嘗試使用正則表達式驗證電子郵件時，我遇到了與電子郵件驗證相同的問題。我搜查了網絡，發現這個功能....

function validateMail($email) { 
    $isValid = true; 
    $atIndex = strrpos($email, "@"); 
    if (is_bool($atIndex) && !$atIndex) { 
     return false; 
    } 
    else { 
     $domain = substr($email, $atIndex+1); 
     $local = substr($email, 0, $atIndex); 
     $localLen = strlen($local); 
     $domainLen = strlen($domain); 
     if ($localLen < 1 || $localLen > 64) { 
      return false; 
     } 
     else if ($domainLen < 1 || $domainLen > 255) { 
      return false; 
     } 
     else if ($local[0] == '.' || $local[$localLen-1] == '.') { 
      return false; 
     } 
     else if (preg_match('/\\.\\./', $local)) { 
      return false; 
     } 
     else if (!preg_match('/^[A-Za-z0-9\\-\\.]+$/', $domain)) { 
      return false; 
     } 
     else if (preg_match('/\\.\\./', $domain)) { 
      return false; 
     } 
     else if(!preg_match('/^(\\\\.|[A-Za-z0-9!#%&`_=\\/$\'*+?^{}|~.-])+$/', 
         str_replace("\\\\","",$local))) { 
      if (!preg_match('/^"(\\\\"|[^"])+"$/', str_replace("\\\\","",$local))) { 
       return false; 
      } 
     } 
     if ($isValid && !(checkdnsrr($domain,"MX") || checkdnsrr($domain,"A"))) { 
      return false; 
     } 
    } 

    return $isValid; 
} 

在文章中說它的功能是基於RFC-5322標準的。它從來沒有讓我失望。