表单验证集自定义有效性

Question

我在玩表单验证。 我已经构建了一个简单的验证码字段，我想通过javascript进行检查。

在这一点上，它是静态的。我需要添加一个事件侦听器，但不知道如何添加。

希望，你能帮上忙。

.HTML

<form>
<input type="text" id="field_robot" name="">
<input type="submit" id="submit" name="submit">
</form>

.JS

var val = document.getElementById('field_robot').value;
var field = document.getElementById('field_robot');
field.addEventListener('input', function(){
if (val != '42') {
field.setCustomValidity('invalid');
} 
}); 

Answer 1

问题是您在事件侦听器之外声明val。因此，输入后永远不会刷新您的值。您需要在事件侦听器中检索字段的值。

请参阅下面的代码片段：

var field = document.getElementById('field_robot');
field.addEventListener('input', function() {
var val = document.getElementById('field_robot').value;
if (val != '42') {
field.setCustomValidity('invalid');
} else {
event.target.setCustomValidity('');
}
});

<form id="myForm">
<input type="text" id="field_robot" name="">
<input type="submit" id="submit" name="submit">
</form>

现在，您可以更进一步，使用侦听器提供的event对象和一个将事件和布尔条件作为参数的fieldValidator函数，将侦听器用于多个输入字段。

请参阅其他片段：

var field = document.getElementById('field_robot');
field.addEventListener('input', function(event) {
fieldValidator(event, (field.value == '42'));
});
function fieldValidator(event, condition) {
var val = event.target.value;
if (!condition) {
event.target.setCustomValidity('invalid');
} else {
event.target.setCustomValidity('');
}
}

<form id="myForm">
<input type="text" id="field_robot" name="">
<input type="submit" id="submit" name="submit">
</form>

Answer 2

所以现在它运行良好。

var field = document.getElementById('field_robot');
field.addEventListener('change', function() {
var val = document.getElementById('field_robot').value;
if (val != '42') {
field.setCustomValidity('invalid');
} else {
field.setCustomValidity('');
};
});