جافا سكريبت نموذج تسجيل الدخول لا تقدم عندما ينقر المستخدم إدخال

StackOverflow https://stackoverflow.com/questions/239082

سؤال

أنا أعمل على جافا سكريبت بسيط الدخول على الموقع و قد حان حتى مع هذا:

<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>

...التي تعمل باستثناء شيء واحد:ضرب أدخل إلى تقديم النموذج لا تفعل أي شيء.لدي شعور انه يسبب لقد استعملت "onclick" ولكن لست متأكدا ما تستخدم بدلا من ذلك.الأفكار ؟


حسنا نعم لذلك أنا أعلم جيدا كم هو ضعيف هذا هو الأمن الحكيم.ليس من أجل أي شيء خاصة سرية ، حتى انها ليست مشكلة كبيرة ، ولكن إذا يا رفاق يمكن أن توضح أفكارك مع التعليمات البرمجية, أنا أحب أن أرى الأفكار الخاصة بك.مدونة أنا المذكورة حرفيا كل أنا أعمل مع في هذه النقطة, لذلك أنا يمكن أن تبدأ من الصفر إذا لزم الأمر.

هل كانت مفيدة؟

المحلول

هناك العديد من المواضيع التي نوقشت في مرة واحدة هنا.دعونا نحاول توضيح.

1.الخاصة بك على الفور القلق:

(لماذا لا زر الإدخال في العمل عندما أدخل الضغط?)

استخدام تقدم زر نوع.

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

..بدلا من

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

مشكلتك ليس لديه أي شيء للقيام مع وجود تستخدم onclick السمة.بدلا من ذلك كنت لا تحصل على السلوك تريد لأنك قد استخدمت زر نوع الإدخال الذي ببساطة لا تتصرف بنفس الطريقة التي تقدم أزرار القيام به.

في HTML و XHTML, هناك السلوك الافتراضي لبعض العناصر.أزرار الإدخال على أشكال غالبا ما تكون من نوع "إرسال".في معظم المتصفحات, "إرسال" أزرار النار بشكل افتراضي عندما أدخل الضغط من تركز عنصر في نفس شكل عنصر."زر" إدخال نوع لا.إذا كنت ترغب في الاستفادة من هذا السلوك الافتراضي, يمكنك تغيير نوع الإدخال إلى "إرسال".

على سبيل المثال:

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

2.المخاوف الأمنية:

@آدي ذكر مصدر قلق أمني.وهناك دلو كامل من المخاوف الأمنية المرتبطة بعمل تسجيل الدخول في جافا سكريبت.هذه هي على الأرجح خارج المجال هذا السؤال, وخاصة منذ كنت قد أشرت إلى أنك لا تشعر بالقلق بشكل خاص عن ذلك ، حقيقة أن تسجيل الدخول الخاصة بك طريقة كانت في الواقع مجرد تحديد موقع.href جديد صفحة html (مشيرا إلى أن ربما كنت لا تملك أي آلية أمنية في المكان).

بدلا من drudging هذا, هنا روابط مواضيع ذات صلة حتى, إذا كان أي شخص مهتم في هذه الأسئلة مباشرة.

3.قضايا أخرى:

هنا تنظيف سريع من الكود الذي يلي بعض أفضل الممارسات.فإنه لا يعالج مصدر قلق أمني أن الناس قد ذكرت.بدلا من ذلك, أنا بما في ذلك ببساطة توضيح بعض العادات الصحية.إذا كان لديك أسئلة محددة حول السبب في أنني قد كتبت شيئا ما بطريقة معينة, لا تتردد في السؤال.أيضا ، تصفح كومة مواضيع ذات صلة (السؤال قد سبق مناقشتها هنا).

الشيء الرئيسي إلى إشعار إزالة سمات الحدث (onclick="", onsubmit="" أو onkeypress="") من HTML.الذين ينتمون في جافا سكريبت و هو يعتبر أفضل الممارسات للحفاظ على جافا سكريبت الأحداث من العلامات.

<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>

نصائح أخرى

وبدلا من <إدخال نوع = "الزر">، استخدم <إدخال نوع = "إرسال">. يمكنك وضع كود التحقق من الصحة في النموذج الخاص بك معالج onsubmit:

<شكل معرف = "loginwindow" onsubmit = "التحقق من صحة (...)">

وذلك لأنه ليس تقديم النموذج، لذلك ليس هناك حدث يمكن تشغيلها عندما تدخل يضغط المستخدم. بديل إلى النموذج أعلاه تقدم من شأنه أن الخيارات ستكون إضافة المستمع الحدث للنموذج المدخلات لكشف إذا كان المستخدم الضغط على دخول.

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

ووضع السيناريو مباشرة في المستند 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>

وكما أشار آخرون إلى أن هناك مشاكل أخرى مع الحل الخاص بك. ولكن هذا يجب أن الإجابة على سؤالك.

وبالتأكيد هذا غير آمن أيضا، حيث يمكن لأي شخص أن الكراك في الثانية ...

و- سوى طريقة وشبه آمن للقيام شبيبة تسجيلات هي مثل:

<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>

فكرتي = ضخمة ثغرة أمنية.يمكن لأي شخص عرض اسم المستخدم وكلمة المرور.

أكثر أهمية على سؤالك:- لديك اثنين من الأحداث يحدث.

  1. ينقر المستخدم على زر.
  2. المستخدم بالضغط على enter.

أدخل مفتاح النموذج, ولكن لا تقم بالنقر فوق الزر.

من خلال وضع الكود الخاص بك في onsubmit طريقة شكل رمز تشغيل عندما يتم إرسال النموذج.عن طريق تغيير نوع الإدخال على زر إرسال, سوف الزر إرسال النموذج بنفس الطريقة التي أدخل زر.

التعليمات البرمجية الخاصة بك ثم تشغيل كلا الحدثين.

مرخصة بموجب: CC-BY-SA مع الإسناد
لا تنتمي إلى StackOverflow
scroll top