가장 간단한 javascript 양식 검증 질문

Question

이름과 이메일 주소가있는 양식이 있습니다. 사용자가 필드에 아무 것도 입력하지 않으면 양식의 오른쪽에 간단한 아이콘이 나타납니다. 필드에있는 것이 있으면 성공 아이콘을 표시합니다. 사용자가 입력하지 않고 다음 필드로 진행하면 실패 아이콘이 나타납니다. 누구든지이 일을 위해 몇 가지 슈퍼 간단한 자바 스크립트를 알고 있습니까? Im 찾는 것은 너무 진보적이고 풍부한 기능입니다.

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를 설치하고 사이트에 포함하십시오. 소형으로 축소되었으며 훨씬 더 쉽게 자바 스크립트를 사용할 수 있습니다.

2) 내 가정 HTML은 다음과 같습니다

< 입력 유형 = "텍스트"이름 = "이름"ID = "편집 이름"클래스 = '텍스트 필드'/>
<의 img SRC = ' something 'id ='edit-name-succeed 'style = "display : none;" />
< img src = 'something'id = 'edit-name-fail'style = "display : none;" />
< 입력 유형 = "텍스트"이름 = "이메일"id = "편집 - 전자 메일"클래스 = '텍스트 필드'/>
< img src = 'something'id = '편집 - 이메일 - 스타일 =; ": 없음 표시;"/>

3) 내 자바 스크립트는 것 "표시 없음"/>
< IMG SRC = '뭔가'ID = 스타일을 '편집 - 이메일은-실패하지' 가? 를 작동하는 방법

$('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();  
    } 
});