JavaScript를 사용하여 두 가지 텍스트 필드 유효성 검사

등록 양식을 작성 중입니다. 사용자가 자신의 이메일을 입력 할 수있는 두 개의 필드가 있습니다 (하나는 이메일, 두 번째 필드는 이메일 다시 입력). 두 필드의 유효성을 검사하여 일치하는지 확인하려고합니다. 내가 한 일은 사용자가 패스워드 필드로 이동할 때 onfocus가 validate 함수를 호출하고 두 필드가 일치하는지 확인하는 것입니다. 오류가 있으면 다른 텍스트 필드에 오류가 표시됩니다. 문제는 코드가 작동하지 않는다는 것입니다! 몇 가지 문제가 있습니다JavaScript를 사용하여 두 가지 텍스트 필드 유효성 검사

<html> 
    <head> 
    <script> 
     var fieldalias="Email address field" 
     function verify(element1, element2){ 
     var passed=false 
     if (element1.value==''){ 
      document.f1.emailerror.value='Fill out the first email field'; 
      element1.focus() 
     } 
     else if (element2.value==''){ 
      document.f1.emailerror.value='Fill out the second email field'; 
      element2.focus() 
     } 
     else if (element1.value!=element2.value){ 
      document.f1.emailerror.value='The two emails are not matching'; 
      element1.select() 
     } 
     else 
      passed=true 
     return passed 
     } 
    </script> 
    </head> 
    <body> 
    <p>Username: <br/> 
     <input class="tb10" type="text" name="username" /> 
    </p><br/> 
    <p>Email: <br/> 
     <input class="tb10" type="text" name="email1" /> 
    </p> 
    <p>Re-Enter Email: <br/> 
     <input class="tb10" type="text" name="email2" /> 
     <input id="emerror" type="text" readonly name="emailerror"/> 
    </p><br/> 
    <p>Password: <br/> 
     <input class="tb10" type="password" name="password1" onfocus="verify(this.email1,this.email2)";/> 
    </p> 
    </body> 
</html>

출처

2012-06-16 Nasser

왜 암호 필드에'onfocus'를 사용합니까? 전자 메일 필드에서'onblur'를 사용하지 않는 이유는 무엇입니까? 이 방법을 사용하면 암호 필드를 클릭하여 활성화 할 코드를 입력 할 필요가 없습니다. –

: 여기

는 코드입니다. 첫 번째는 당신이 당신의 함수를 호출하는 방식에 있습니다

onfocus="verify(this.email1,this.email2)";

this 해당 이벤트가 속한 분야됩니다에, 즉, 그것은 email1 및 email2 속성을하지 않도록 초점을 얻는 일.

document.f1.emailerror

을하지만 당신의 HTML에는 f1 형태가 없다 :

둘째, 함수 내 말 (. 참고 또한이 외부 따옴표를 세미콜론 필요하지 않습니다).

onfocus="verify(document.f1.email1,document.f1.email2)"

데모 : http://jsfiddle.net/jJ3YT/

참고 :

그런 다음 다음과 같이 작동합니다, 당신의 필드 주위에 양식 요소를 추가 그것을 이름 f1을주고, 인라인 onfocus를 업데이트하는 경우 I 돈 여기에 찍은 접근 방식을 정말로지지하지 않습니다. 만약 나라면, 전자 우편 필드에서 흐려짐에 대한 유효성 검증을 넣고, 메시지를 표시하고, 첫 번째 필드로 다시 집중시키지 마십시오. 그런 다음 양식이 실제로 제출 될 때 문제가 여전히 남아 있으면 어쩌면 문제 영역으로 다시 집중해야합니다. 하지만 어쨌든 당신이하려고하는 것을 거의 다 가지고 있습니다 ...

출처

2012-06-16 05:54:00 nnnnnn

부팅 할 때 작동하는 바이올린으로 매우 철저하고 이해하기 쉬운 대답으로 펀치에 맞을 항상 즐거움. =) –

고마워요. 이제 오류 메시지가 표시되는 텍스트 필드를 숨기려고합니다. 나는 약간의 변화를했으나 효과가 없었다. 이 링크의 코드 http://jsfiddle.net/jJ3YT/1/ – Nasser

새로운 문제는 문서가 실행되기 전에 스크립트가 실행되기 때문에'var h = document.f1.emailerror;'행이 _ 존재한다는 것입니다. 구문 분석은 'h'가 실제로 해당 필드를 참조하지 않으며 스타일을 설정하는 데 사용할 수 없음을 의미합니다. 그 줄을 함수 내부로 옮기면 다음과 같이 작동합니다. http://jsfiddle.net/jJ3YT/2/ – nnnnnn

JavaScript를 사용하여 두 가지 텍스트 필드 유효성 검사

답변

관련 문제