客户端 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>