Question

我有一个带有姓名和电子邮件地址的表单。如果用户在字段中输入任何内容，即使是一个字符，我希望在表单右侧显示一个简单的图标。如果该字段中存在任何内容，我希望显示成功图标。如果用户在没有输入的情况下前进到下一个字段，我希望显示失败图标。有谁知道一些超级简单的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。如果该字段尚未填写，则value将为false。然后相应地更改图标的src属性。

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

您可能想要添加更复杂的支票 - 例如如果value只包含空格。

Answer 2

1）首先，安装jquery并将其包含在您的网站上。缩小它很小，它允许更容易的JavaScript。

2）我假设的html是：

＆lt; input type =“text”name =“name”id =“edit-name”class ='text-field'/＆gt;

＆lt; img src ='something'id ='edit-name-succeed'style =“display：none;” /＆GT;
＆lt; img src ='something'id ='edit-name-fail'style =“display：none;” /＆GT;
＆lt; input type =“text”name =“email”id =“edit-email'class ='text-field'/＆gt;

＆lt; img src ='something'id ='edit-email-succeed'style =“display：none;” /＆GT;
＆lt; img src ='something'id ='edit-email-fail'style =“display：none;” /＆GT;

3）我的javascript将是：


$('input.text-field').change(function() {     
  if ($(this).text()) {  
    $('#' + $(this).attr('id') + '-fail').hide();  
    $('#' + $(this).attr('id') + '-succeed').show();
  }   
});  
$('input.text-field').blur(function() {
  if (!($(this).text())) {  
    $('#' + $(this).attr('id') + '-fail').show();  
    $('#' + $(this).attr('id') + '-succeed').hide();    
  } 
});

最简单的javascript表单验证问题

2 个答案: