2012-04-23 6 views
0

좋아요. 사용자의 입력을 확인하고 규칙과 일치하는지 확인하고 "xxx is not"라는 텍스트 필드 옆에 즉시 오류 메시지를 표시하는 JavaScript 코드를 만드는 것이 좋습니다. 유효한 항목 "JS의 인스턴트 유효화

예를 들어, 첫 번째 문자가 대문자 여야하고 그 뒤에 번호가 있어야하고 어떤 특수 문자도 가질 수없는 규칙 인 경우.

사용자가 "13da2343 *"과 같이 입력하면 "잘못된 항목, 첫 번째 문자는 대문자 여야하며 특수 문자는 잘못된 항목이어야합니다." 텍스트 필드 바로 옆에 표시되어야합니다.

나 자신을 위해 이것을 시작하는 방법에 대한 단서가 없습니다. 이것은 내가 지금까지 내 웹 사이트에이 전체 코드 나 자바 스크립트

편집

에 새로운 오전, 도와주세요. 나는 입력 된 특정 문자가 유효하지 않으며 텍스트 필드 옆에 그 문자가 있다고 말하는 방법을 모른다. 2

<!DOCTYPE html> 
<html> 
<head> 


<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
<title> THING </title> 
<meta name="Author" content="Dhruvin Desai" /> 
<link rel="stylesheet" type="text/css" href="style.css" /> 

<script type='text/javascript'>//<![CDATA[ 
window.onload=function(){ 
document.forms[0].addEventListener('submit', function(event) { 
    event.preventDefault(); 
    var input = document.getElementsByName('a')[0]; 

    if (~input.value.search(input.getAttribute('pattern'))) { 
     alert('Is valid!'); 
    } else { 
     alert('It's invalid...'); 
    } 
}); 
}//]]> 

</script> 

</head> 

<body> 
<div id="wrapper"> 
    <div id="response"> 
    <form id="form" action="#" > 
    <fieldset> 
    <LEGEND><br>THING</br></LEGEND> 

    <!-- Input Fields --> 

    <label for="name"> Username </label> 
    <input type="text" name="a" value="" id="name" autofocus="autofocus" autocomplete="off" required="required" placeholder="Username" pattern="^[A-Z][A-Za-z]{0,11}$" onkeyup="check(this)" /> 
    <span id="confirmMessage" class="confirmMessage"></span> 

    <input type="submit" value="Submit" class="submit" /> 

    </fieldset> 
    </form> 
</div> 

</body> 

편집은 내가 첫 번째 편지에 대해 원하는 대문자를,하지만 작동 허용하는 새 스크립트를 추가했다.

<!DOCTYPE html> 
<html> 
<head> 


<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
<title> IT 202 - Assignment 3 </title> 
<meta name="Author" content="Dhruvin Desai" /> 
<link rel="stylesheet" type="text/css" href="style.css" /> 

</head> 
<body> 

<div id="wrapper"> 
    <div id="response"> 
    <form id="form" action="insert_form.php"> 
    <fieldset> 
    <LEGEND><br>Assignment 3</br></LEGEND> 

    <!-- Input Fields --> 

    <label for="name"> Username </label> 
    <input name="name" id="name" autofocus="autofocus" autocomplete="off" required="required" placeholder="Username" onkeyup="check(this.value)" /> 

    <input type="submit" value="Submit" class="submit" /> 

    </fieldset> 
    </form> 
</div> 
<script type="text/javascript"> 

function check(string) 
{ 
    loop: for (i = 0; i < string.length; i++) 
    { 
     var res = string.substring(i, i + 1).match(/[A-Z][A-Za-z]{0,11}/); 

     if (!res) 
     { 
      alert("Error on position " + (i + 1) + ":\n This character is no Letter: "+string.substring(i, i + 1)); 
      break loop; 
     } 


    } 

} 
    </script> 
</body> 

답변

0

당신은 pattern 속성을 사용하고 정규식 표현을 전달할 수를 확인 정규식을 사용할 수 있습니다. 오래된 브라우저의 경우 h5f 또는 webshim과 같은 폴리 필러를 사용할 수 있습니다.

+0

것은 오류 메시지가 텍스트 필드 바로 옆에 (예 : 입력 한 것처럼) 표시되도록하여 사용자가 입력 한 내용이 잘못되었음을 알고 있기를 원합니다. – shade917

+0

webshims에는이 기회를 줄 수있는 정보 변경 및 유효 변경 이벤트가 있습니다. – Flops

0

이러한 유형의 "실시간"유효성 검사는 일반적으로 각 키 누르기에서 실행 및 재설정되는 타이머로 수행됩니다. 사용자의 마지막 키를 누를 때부터 타이머가 만료되면 유효성 검사가 시작됩니다.

250ms 지연이 제대로 작동합니다. 자바 스크립트가 처음이라면 window.setTimeoutwindow.clearTimeout을 공부해야합니다.

의사 코드 (그렇지 않으면 내가 당신을 위해 모든 일을하고있을 것이다) : 실제 검증 자체에 대한

 
when key pressed: 
    if existing timeout: 
     cancel existing timeout 

    fire new timeout 

when timeout expired: 
    do validation 

    if validation failed: 
     set error message 
     show error message 
    else: 
     hide error message 

을 단순히 검증을 직접 수행하는 몇 가지 코드를 추가하거나 할 수있는 검증 경우 정규 표현식에 합당한 경우 정규 표현식을 사용할 수 있습니다. 이를 위해 RegExp 개체를 연구해야합니다.

필드 옆에 오류 메시지를 표시하려면 한 가지 방법으로 오류 컨테이너를 마크 업에 포함시키고 처음에는 숨기십시오. 오류가 발생하면 내용을 채우고 컨테이너를 표시합니다. 이 작업을 수행하기에 충분한 CSS를 알고 있어야합니다.

0

한 가지 방법은 양식 필드에 주기적으로 확인하는 양식에 '청취자'를 추가하는 것입니다. 나는 이것을 this jsfiddle에서 해 보았습니다.

+0

모든 코드를 복사하여 브라우저에서 테스트하려고하면 JavaScript 코드가 작동하지 않습니다. – shade917