사용자가 입력하면 JavaScript 로그인 양식이 제출되지 않습니다

https://stackoverflow.com/questions/239082

04-07-2019
|

문제

사이트에 대한 간단한 JavaScript 로그인을 작업 중이며 다음과 같습니다.

<form id="loginwindow">
<strong>Login to view!</strong>
<p><strong>User ID:</strong>
  <input type="text" name="text2">
</p>
<p><strong>Password:</strong>
<input type="password" name="text1"><br>
  <input type="button" value="Check In" name="Submit" onclick=javascript:validate(text2.value,"username",text1.value,"password") />
</p>

</form>
<script language = "javascript">

function validate(text1,text2,text3,text4)
{
 if (text1==text2 && text3==text4)
 load('album.html');
 else 
 {
  load('failure.html');
 }
}
function load(url)
{
 location.href=url;
}
</script>

... 한 가지를 제외하고는 효과가 있습니다 : 양식을 제출하기 위해 Enter를 치는 것은 아무것도하지 않습니다. "Onclick"을 사용한 원인이라는 느낌이 들지만 대신 무엇을 사용해야할지 잘 모르겠습니다. 생각?

그래, 그래서 나는 이것이 보안에 얼마나 어렴풋한 지 잘 알고있다. 그것은 특히 최고 비밀이 아니기 때문에 큰 문제는 아니지만 코드로 당신의 생각에 대해 자세히 설명 할 수 있다면, 나는 당신의 아이디어를보고 싶습니다. 내가 나열된 코드는 문자 그대로이 시점에서 작업하는 전부이므로 필요한 경우 처음부터 시작할 수 있습니다.

해결책

여기에서 한 번에 논의되는 몇 가지 주제가 있습니다. 명확히 해보자.

1. 즉각적인 우려 :

(Enter가 누르면 입력 버튼이 작동하지 않는 이유는 무엇입니까?)

사용 제출하다 버튼 유형.

<input type="submit".../>

..대신에

<input type="button".../>

당신의 문제는 실제로 사용한 것과 관련이 없습니다. onclick 기인하다. 대신, 당신은 당신이 사용했기 때문에 원하는 행동을 얻지 못합니다. 단추 입력 유형은 단순히 제출 버튼과 같은 방식으로 작동하지 않습니다.

HTML 및 XHTML에는 특정 요소에 대한 기본 동작이 있습니다. 양식의 입력 버튼은 종종 "제출"유형입니다. 대부분의 브라우저에서 "제출"버튼 기본적으로 화재 Enter가 집중 요소에서 눌렀을 때 같은 형태 요소로. "버튼"입력 유형은 그렇지 않습니다. 해당 기본 동작을 활용하려면 입력 유형을 "제출"하도록 변경할 수 있습니다.

예를 들어:

<form action="/post.php" method="post">
    <!-- 
    ...
    -->
    <input type="submit" value="go"/>
</form>

2. 보안 문제 :

@ady 보안 문제를 언급했습니다. 수행과 관련된 전체 보안 문제가 있습니다. JavaScript에 로그인하십시오. 이것들은 아마도 외부에있을 것입니다 이 질문의 영역, 특히, 특히 당신이 그것에 대해 특별히 걱정하지 않는다고 지시했고, 로그인 방법이 실제로 위치를 설정했다는 사실이 새로운 HTML 페이지로 설정되었다는 사실 (실제 보안 메커니즘이 없을 것임을 나타냅니다. 제자리에).

그것을 막는 대신 여기에 있습니다 관련 주제에 대한 링크 그렇다면 누구나 그 질문에 직접 관심이 있다면.

3. 기타 문제 :

여기에 있습니다 빠른 청소 몇 가지 모범 사례를 따르는 코드의. 사람들이 언급 한 보안 문제를 다루지 않습니다. 대신, 나는 단순히 그것을 포함시킨다 건강한 습관을 보여줍니다. 내가 왜 무언가를 썼는지에 대한 구체적인 질문이 있다면 자유롭게 물어보십시오. 또한, 관련 주제를 위해 스택을 찾아보십시오 (귀하의 질문이 이미 여기에서 논의되었을 수 있습니다).

주목해야 할 중요한 것은입니다 이벤트 속성 제거 HTML에서 (onclick = "", onsubmit = ""또는 onkeypress = ""). 이들은 JavaScript에 속하며 JavaScript 이벤트를 마크 업에서 유지하는 모범 사례로 간주됩니다.

<form action="#" method="post" id="loginwindow">
    <h3>Login to view!</h3>
    <label>User ID: <input type="text" id="userid"></label>
    <label>Password: <input type="password" id="pass"></label>
    <input type="submit" value="Check In" />
</form>

<script type="text/javascript">
window.onload = function () {
    var loginForm = document.getElementById('loginwindow');
    if ( loginwindow ) {
        loginwindow.onsubmit = function () {

            var userid = document.getElementById('userid');
            var pass = document.getElementById('pass');

            // Make sure javascript found the nodes:
            if (!userid || !pass ) {
                return false;
            }

            // Actually check values, however you'd like this to be done:
            if (pass.value !== "secret")  {
                location.href = 'failure.html';
            }

            location.href = 'album.html';
            return false;
        };
    }
};
</script>

다른 팁

대신에u003Cinput type="button"> , 사용u003Cinput type="submit"> . 유효성 검사 코드를 양식 OnSubmit 핸들러에 넣을 수 있습니다.

u003Cform id="loginwindow" onsubmit="validate(...)">

제출 양식이 아니기 때문에 사용자가 입력 할 때 트리거 할 이벤트가 없습니다. 위의 양식 제출 옵션에 대한 대안은 입력 양식에 대한 이벤트 리스너를 추가하여 사용자가 Enter를 눌렀는지 감지하는 것입니다.

<input type="password" name="text1" onkeypress="detectKey(event)">

스크립트를 HTML 문서에 직접 넣으십시오. 사용하려는 기능으로 OnClick 값을 변경하십시오. HTML의 스크립트는 사용자가 입력하거나 제출 버튼을 누르면 제출할 때 양식에 제출하도록 지시합니다.

 <form id="Form-v2" action="#">

<input type="text" name="search_field"  placeholder="Enter a movie" value="" 
id="search_field" title="Enter a movie here" class="blink search-field"  />
<input type="submit" onclick="" value="GO!" class="search-button" />        
 </form>

    <script>
    //submit the form
    $( "#Form-v2" ).submit(function( event ) {
      event.preventDefault();
    });
         </script>

아마 당신은 이것을 시도 할 수 있습니다 :

<form id="loginwindow" onsubmit='validate(text2.value,"username",text1.value,"password")'>
<strong>Login to view!</strong>
<p><strong>User ID:</strong>
   <input type="text" name="text2">
</p>
<p><strong>Password:</strong>
<input type="password" name="text1"><br>
   <input type="submit" value="Check In"/>
</p>

</form>

다른 사람들이 지적했듯이 솔루션에는 다른 문제가 있습니다. 그러나 이것은 당신의 질문에 대답해야합니다.

분명히 이것은 모든 사람이 잠깐 동안 깨질 수 있기 때문에 너무 안전하지 않습니다 ...

-JS-Logins를 수행하는 의사 안전 방법 만 다음과 같습니다.

<form action="http://www.mySite.com/" method="post" onsubmit="this.action+=this.theName.value+this.thePassword.value;">
  Name: <input type="text" name="theName"><br>
  Password: <input type="password" name="thePassword"><br>
  <input type="submit" value="Login now">
</form>

내 생각 = 거대한 보안 구멍. 누구나 사용자 이름과 비밀번호를 볼 수 있습니다.

귀하의 질문에 더 관련성이 있습니다 : - 두 가지 이벤트가 발생합니다.

사용자는 버튼을 클릭합니다.
사용자 누름이 입력됩니다.

Enter 키는 양식을 제출하지만 버튼을 클릭하지 않습니다.

양식의 onsubmit 메소드에 코드를 배치하여 양식이 제출 될 때 코드가 실행됩니다. 제출할 버튼의 입력 유형을 변경하면 버튼이 Enter 버튼과 같은 방식으로 양식을 제출합니다.

그러면 두 이벤트 모두에 대한 코드가 실행됩니다.

라이센스 : CC-BY-SA ~와 함께 속성

제휴하지 않습니다 StackOverflow