Question

我正在尝试向用户发送消息，如果他们无法输入值，则需要一个字段。我希望错误显示在字段本身，而不是页面顶部的全局错误消息。

如果我没有在表单中输入任何数据，它仍然允许提交。但是，如果我没有输入用户名，但是输入了不匹配的密码，则用户名字段会收到验证消息“密码不匹配”。

因此，在我看来，由于某种原因，我检查输入是否为null的代码未传递为True，因此该函数继续执行下一个条件。

为什么这个函数不能捕获空值？

<form action="/register" method="post">
    <div class="form-group">
        <input autocomplete="off" autofocus class="form-control" name="username" placeholder="Username" type="text"
               oninput="checkNull(this)" id="username">
    </div>
    <div class="form-group">
        <input class="form-control" name="password" placeholder="Password" type="password" oninput="checkNull(this)"
               id="password">
    </div>
    <div class="form-group">
        <input class="form-control" name="confirmPassword" placeholder="Confirm Password" type="password"
               oninput="check(this)" id="confirmPassword">
    </div>
    <script language='javascript' type='text/javascript'>
        function check(input) {
            if (input.value != document.getElementById('password').value) {
                input.setCustomValidity('Passwords do not match');
            } else {
                input.setCustomValidity('');
            }
        }
        if (input.value == "" || input.value == null) {
                input.setCustomValidity('This field is required');
            } 
            else {
                input.setCustomValidity('');
            }
    </script>
    <button class="btn btn-primary" type="submit">Register</button>
</form>

我已经尝试了一些其他的疑难解答。我将功能分开，一个用于检查密码是否匹配，一个用于检查无输入。我意识到，通过在相同的函数中调用它们，我将它们与密码进行了比较。

作为健全性检查，然后设置为检查特定的字符串“ foo”。传递“ foo”时，错误会按预期显示，因此我至少知道该函数已被调用。

然后我尝试使用“ ===”来比较值，而不是“ ==”，但是那也不起作用。

代码已更新以反映最新更改。

Answer 1

您正在调用检查方法 onchange ，如果您在用户名字段中未输入任何文本，则不会调用您的检查方法。因此，执行此操作的简单方法是在所有字段上添加必填属性。

如果要使用JS进行操作，请查看单击表单的“提交”按钮时触发的onsubmit方法。

此外，您应该具有三种不同的方法来验证每个字段。这将很难维护，并且您将通过多种检查来限制一种方法。

Answer 2

提交表单时，它没有调用check()函数。因此，如果您不触摸任何input，它们将不会得到验证。

您可以通过在onsubmit="return validate()"标签中添加<form />来解决此问题：

<form action="/register" method="post" onsubmit="return validate()">

您的验证功能可能很简单：

var isValid = true;

function validate() {
  isValid = true;
  document.querySelectorAll('.form-control').forEach(check);

  return isValid;
}

注意return关键字。 当返回值为false时，提交操作将被取消。 check()函数还应更改isValid变量：

function check(input) {
  if (input.value == "" || input.value == null) {
    input.setCustomValidity('This field is required');
    isValid = false;
  }
  else if (input.type == 'password' && input.value != document.getElementById('password').value) {
    input.setCustomValidity('Passwords do not match');
    isValid = false;
  }
  else {
    input.setCustomValidity('');
  }
}

此外，仅在验证密码输入时才应检查密码是否相同。您可以通过在密码验证中添加额外条件来完成此操作：input.type == 'password'

Answer 3

您在这里使用不推荐使用的技术。.切勿将函数直接内联（在html标记内）附加到表单元素上。

在检查键盘密码时，可以在jquery中使用类似的方法：

var pwInputs = $(this).find('input[type=password]');

$('input[type=password]').keyup(() => {
        pwarr = new Array();
        pwInputs.each(function() {
            pwarr.push($(this));
        });
        if (pwarr[0].val() != pwarr[1].val()) {
                // Do work
        }
        if (pwarr[0].val() == null || pwarr[0].val() == "" & pwarr[1].val() == null || pwarr[1].val() == "") {
                // Do Work
        }
});

您可以类似的方式使用jquery来检查提交的值。

$('#formid').on('submit', function() { // Do work })

不为空或为空的字段验证不会触发

3 个答案: