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>

客户端JavaScript字段验证

3 个答案: