非空或空的字段验证不会触发。
我试图向用户发送消息，如果他们不能输入一个值，就需要一个字段。我希望将错误显示在字段本身，而不是显示在页面顶部的全局错误消息。
如果我没有在表单中输入任何数据，它仍然允许提交。但是，如果我没有输入用户名，但输入了不匹配的密码，用户名字段将收到验证消息“密码不匹配”。
因此，在我看来，由于某种原因，我检查输入是否为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“时，错误会如期而至地显示，所以我知道至少函数正在被调用。
然后，我尝试使用"===“来比较值，而不是"=="，但这也不起作用。
更新代码以反映最近的更改。
回答 3
Stack Overflow用户
发布于 2019-05-06 19:16:02
当提交表单时，它不会调用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'
Stack Overflow用户
发布于 2019-05-06 18:59:26
您正在调用您的check方法onchange，如果您没有在username字段中输入任何文本，您的check方法将不会被调用。因此，这样做的简单方法是在所有字段中添加必需的属性。
如果要使用JS进行操作，请查看在单击表单的submit按钮时触发的提交方法。
另外，您应该有三种不同的方法来验证每个字段。这将是很难维护和你将压缩一个方法与各种检查。
Stack Overflow用户
发布于 2019-05-06 18:59:59
你在这里使用的是不推荐的技术。永远不要将函数以行方式附加到表单元素(在html标记中)。
当涉及到在keyup上检查密码时，您可以在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在submit上检查值。
$('#formid').on('submit', function() { // Do work })https://stackoverflow.com/questions/56010770
复制相似问题
腾讯云开发者
