客戶端JavaScript字段驗證

Question

我有一個特殊的場景，我需要在客戶端驗證方面提供一些幫助。

我有一些需要的輸入字段（不需要HTML），但是使用名為“requiredInput”的類將它們標識為必需，並在用戶單擊提交按鈕時在服務器端進行評估。

但是，我希望在用戶離開該字段時驗證客戶端的輸入字段，並禁用提交，直到填寫所有必填字段。

為了完全處理這個客戶端而不是等待服務器端提交來執行驗證，我該如何處理這種情況？

<input type="text" name="lastName" id="lastName" class="requiredInput" tabindex="3">

注意：我不想在提交時執行驗證，我想驗證onblur並禁用提交，直到填寫所有必填字段。

Answer 1

你有很多JS驗證包，你可以在互聯網上找到它們。

現在我認為最好的之一是ParsleyJS 。 您可以使用少量內置（以及一些額外）驗證器，這些驗證器在客戶端完美運行。 Ypou可以設計一次。 如果您不想將整個表單發送到服務器，還可以對遠程驗證字段進行驗證。

Answer 2

如果你不是一個純粹的js解決方案，並希望完全控制什么是有效的，你可能想要做這樣的事情：

創建一個validateInput()函數，該函數獲取所有輸入字段，檢查它們是否具有內容（以及您可能要執行的任何其他檢查），並繼續啟用提交按鈕（如果一切都符合預期）。 將該函數附加到每個輸入字段的onblur事件。

function validateInput(){
  let validInput = true;
  let field1Content = document.getElementById('field1').value;
  let field2Content = document.getElementById('field2').value;
  if(field1Content.length === 0 || field2Content === 0)
      validInput = false;

  if(validInput)
    //enable submit button
}

Answer 3

如果您有Jquery，可以輕松完成此操作，請嘗試以下操作

<input type="text" name="lastName" id="txtbox1" class="requiredInput clsValidate" tabindex="3">
<input type="text" name="lastName" id="txtbox2" class="requiredInput clsValidate" tabindex="3">
<input type="text" name="lastName" id="txtbox3" class="requiredInput clsValidate" tabindex="3">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<script type="text/javascript">
       $(document).ready(function () {
    ValidateInput();
});

$(document).on('change', 'input.clsValidate[type=text]', function () {
    ValidateInput();
});

function ValidateInput() {
    var cnt = 0;
    $('input.clsValidate[type=text]').each(function (i, obj) {
        if ($(this).val().trim().length <= 0) {
            cnt++;
        }
        if (cnt > 0) {
            $('#btnsubmit').attr('disabled', 'disabled')
        } else {
            $('#btnsubmit').removeAttr('disabled');
        }
    });
}
</script>