Heim > Web-Frontend > js-Tutorial > Beispielcode für die Webproduktionsüberprüfungscodefunktion

Beispielcode für die Webproduktionsüberprüfungscodefunktion

怪我咯
Freigeben: 2017-07-13 15:19:05
Original
1861 Leute haben es durchsucht

Bestätigungscode (CAPTCHA) ist die Abkürzung für „Completely Automated Public Turing test to tell Computers and Humans Apart“. Es handelt sich ebenfalls um ein öffentliches, vollautomatisches Programm für Menschen. Es kann Folgendes verhindern: böswilliges Knacken von Passwörtern, Ticketbetrug, Forenflutung und verhindert effektiv, dass ein Hacker ein bestimmtes Programm nutzt, um einen bestimmten registrierten Benutzer brutal zu zwingen, sich kontinuierlich anzumelden. Tatsächlich ist die Verwendung von Bestätigungscodes eine gängige Methode für viele Websites Jetzt verwenden wir diese Funktion auf relativ einfache Weise. Diese Frage kann von einem Computer generiert und beurteilt werden, aber nur ein Mensch kann sie beantworten. Da Computer keine CAPTCHA-Fragen beantworten können, kann der Benutzer, der die Fragen beantwortet, als Mensch betrachtet werden

Das Folgende ist ein Beispielcode zur Einführung der Web-Bestätigungscode-Funktion anhand eines Beispielcodes. Interessierte Freunde können einen Blick darauf werfen

Implementierungseffekt:

Implementierungsprinzip:

Verifizierungscode generieren, der vom bereitgestellt wird Hintergrund Schnittstelle, jedes Mal, wenn das Front-End ein Bestätigungscode-Bild generiert und das Bestätigungscode-Bild an den Client gesendet wird

Bestätigungscode--Zeichenfolge Speichern Sie ihn in der Sitzung des Backends und warten Sie, bis das Frontend die Geschäftsschnittstelle erneut anfordert, und vergleichen Sie ihn mit der Bestätigungscode-Zeichenfolge in der Sitzung.

Implementierungsidee:

1. Erstens stellt das Back-End eine Schnittstelle bereit, die Verifizierungscodebilder erzeugen kann

2. Das Front-End legt das src-Attribut über img fest, eine Schnittstelle zum Anfordern der Generierung eines Bestätigungscodes.

3. Legen Sie ein Klickereignis für img fest. Jedes Mal, wenn Sie auf img klicken, wird der src-Wert geändert und src wird erneut angefordert.

4. Überprüfen Sie beim Ausführen von Seitenschnittstellenvorgängen, ob die Der eingegebene Bestätigungscode ist korrekt.

Implementierungscode:

Frontend:

HTML:

<p class="centent-top" style=""> 
   <p class="centent-left"><span>*</span>验证码:</p> 
   <input type="text" class="verification-code-input"> 
   <p class="verification-code"><img id="yzm" src="/SchoolRoll/accuser/code/check"></p> 
   <p class="change"><span>看不清?</span><span style="color:#37CAF2;cursor: pointer;" id="changeImgCode">换一张</span></p> 
  </p>
Nach dem Login kopieren

js:

var yzm =document.getElementById("yzm"); 
 var changeImgCode =document.getElementById("changeImgCode"); 
 yzm.onclick=function () { 
  changPin(); 
 } 
 changeImgCode.onclick=function () { 
  changPin(); 
 } 
 // 换验证码 
 function changPin() { 
  $("#yzm").attr("src", "/SchoolRoll/accuser/code/check?time=" + Math.random()); 
 }
Nach dem Login kopieren

Das obige ist der detaillierte Inhalt vonBeispielcode für die Webproduktionsüberprüfungscodefunktion. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage