javascript - 有史以来最简单的 JavaScript 表单验证问题

Question

我有一个包含姓名和电子邮件地址的表格。如果用户在字段中键入任何内容，甚至是一个字符，我希望在表单右侧出现一个简单的图标。如果该字段中存在任何内容，我希望出现成功图标。如果用户在没有输入的情况下前进到下一个字段，我希望出现失败图标。有谁知道一些 super 简单的 javascript 来做到这一点？我发现的一切都太先进了，功能也太丰富了。

Answer 1

怎么样:

var field = document.getElementById('myFormField');
var icon = document.getElementById('myIcon');

field.onchange = function(){
    icon.src = this.value ? 'success.png' : 'fail.png';
};

(我还没有测试过)

基本上，它表示:每当用户更改文本字段时，检查该字段的值。如果该字段尚未填写，则 value 将为 false。然后相应地更改图标的 src 属性。

对于其他类型的表单字段(例如选择)，您可能需要与 value 不同的属性。但是如果你使用 jQuery，你可以简单地使用 .val() .

您可能想要添加更复杂的检查 - 例如如果 value 仅包含空格。