JS-Verifizierung für die PHP7-Messageboard-Entwicklung
PHP7-TutorialDie Spalte stellt die JS-Verifizierung vor, die bei der Message-Board-Entwicklung verwendet wird
Empfohlen (kostenlos): PHP7-Tutorial
JS-Schlüsselwörter in diesem Abschnitt sind: function code>, <code>onsubmit, onclick, document.getElementsByTagName (diese werden häufig in der Front-End-Entwicklung verwendet und müssen daher beherrscht werden) function、onsubmit、onclick、document.getElementsByTagName（这些在前端开发中是常用的，所以必须掌握）
根据步骤一的页面基础上加入JS验证表单事件，提升用户体验，也确保后端接收到的用户提交的数据是预定的。
拿到需求的时候不要急着敲代码，首先确认一下需要用的到知识点，理清思路，脑子里大概有个方案，特别是当下新技术天天新花样的时代，我们更应该思路要时刻保持清晰，不管是原生的js还是jquery或者是其他前端框架，万变不离其宗，只有稳固的js基础，方能走天下。
下面原生JS验证留言板表单的时候也是有多种方法可以实现的，这里用的是其中一个常用的，你能发现其他方法吗，可以在评论区分享个大家，好东西，就是要分享的！~
方法：
-
1、确定触发鼠标点击事件方式，如
onclick，onsubmit，xxx.click(function(){})等等（诸多验证方式，需要你们日后慢慢发现，神奇的JS世界等着你）；我给留言板submit按钮添加了
onclick事件，为了触发checkform函数激活表单验证；然后又给了form标签添加了onsubmit="return false;"属性，为了阻止form表默认的提交事件（阻止事件冒泡）；具体看代码并进行实践试试看~
a、示例代码片段 -
2、定义JS函数；
a、函数命名以
function开头
b、选中表单元素用document.getElementsByTagName('input')
c、阻止冒泡（阻止表单提交，验证成功才能提交）用return false;
d、脚本触发表单提交用document.feedback_form.submit();，feedback_form为form表单的name名称 -
3、submit标签中绑定鼠标点击事件触发我们定义的JS函数，如表单submit标签属性加入
onclick="函数名"a、示例代码片段
Gemäß Schritt eins werden Ereignisse des JS-Verifizierungsformulars zur Seite hinzugefügt, um die Benutzererfahrung zu verbessern und sicherzustellen, dass die vom Backend empfangenen vom Benutzer übermittelten Daten geplant werden.<input type="submit" onclick="checkform()" value="提交您的留言" class="sub" />
Es gibt viele Möglichkeiten, die native JS-Überprüfung des Message-Board-Formulars zu implementieren. Eine der am häufigsten verwendeten Methoden finden Sie hier im Kommentarbereich möchte es teilen! ~
Methode:
-
1 Bestimmen Sie, wie das Mausklickereignis ausgelöst werden soll, z. B.
onclick,onsubmit,xxx .click( function(){})und so weiter (viele Verifizierungsmethoden, die Sie in Zukunft langsam entdecken müssen, die magische JS-Welt wartet auf Sie);Ich habe
🎜hinzugefügt Klicken Sie auf die Schaltfläche „Senden“ des Message-Board-Ereignisses, um die Funktion „checkform“ auszulösen, um die Formularvalidierung zu aktivieren Das Attribut wurde zum Formular-Tag hinzugefügt, um zu verhindern, dass die Formulartabelle standardmäßig ein Ereignis sendet (verhindern Sie, dass das Ereignis sprudelt); schauen Sie sich den Code speziell an und probieren Sie es in der Praxis aus~
a. form name="feedback_form" action="/#" method="post" onsubmit="return false;"> -
2. JS-Funktion definieren;
🎜a . Der Funktionsname beginnt mitfunction
b. Um Formularelemente auszuwählen, verwenden Siedocument.getElementsByTagName('input')
c (Formularübermittlung verhindern, es darf nur übermittelt werden, wenn die Überprüfung erfolgreich ist), verwenden Siereturn false;
d Das Skript löst die Formularübermittlung mitdocument.feedback_form.submit() aus. ;,feedback_formist der Name des Formulars form🎜🎜 -
3. Binden Sie das Mausklickereignis an das Submit-Tag, um die von uns definierte JS-Funktion auszulösen , fügen Sie
zum Formular-Submit-Tag-Attribut hinzu 🎜a, Beispielcode-Snippetonclick="function name"< ;input type="submit" onclick="checkform()" value="Senden Sie Ihre Nachricht" class="sub" />🎜🎜🎜🎜🎜Vollständiger Code: 🎜🎜Üben, üben, üben . Schreie dreimal Wichtiges! ! ! 🎜🎜Okay, unser Message Board für die native JS-Verifizierung ist hier. Wenn Sie andere Verifizierungsmethoden haben oder Zweifel haben, können Sie gerne im Kommentarbereich kritzeln! ~🎜<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>留言板_科科分享</title> <!-- 2.新建css样式文件并根据效果图编写css代码 --> <link rel="stylesheet" href="feedback.css"> <!-- 3.js表单验证 --> <script type="text/javascript"> function checkform(){ var nickname = document.getElementsByTagName('input')[0].value; // 获取用户输入的姓名 var tel = document.getElementsByTagName('input')[1].value; // 获取用户输入的联系方式 var content = document.getElementsByTagName('textarea')[0].value; // 获取用户输入的留言内容 // 如果没有输入姓名 则提示 if(nickname == ''){ alert('请输入您的姓名'); document.getElementsByTagName('input')[0].focus(); // 将光标定位到姓名输入框 return false; // 阻止冒泡 输入姓名后才能通过 } // 如果没有输入联系方式 则提示 if(tel == ''){ alert('请输入您的联系方式'); document.getElementsByTagName('input')[1].focus(); // 将光标定位到联系方式输入框 return false; // 阻止冒泡 输入联系方式才能通过 } // 如果没有输入留言内容 则提示 if(content == ''){ alert('请输入您的联系方式'); document.getElementsByTagName('textarea')[0].focus(); // 将光标定位到留言内容输入框 return false; // 阻止冒泡 输入留言内容才能通过 } document.feedback_form.submit(); // 提交用户数据到后端action中的地址 } </script> </head> <body> <!-- 工作区，呈现给用户看的 --> <!-- 1.开始搭建脚手架 --> <p class="container_box"> <p class="up"> <h3 class="title">留言板</h3> <h5 class="subtitle">FEEDBACK</h5> </p> <p class="down"> <form name="feedback_form" action="/#" method="post" onsubmit="return false;"> <p class="input"> <input type="text" class="fl" name="name" placeholder="输入您的姓名" /> <input type="text" class="fr" name="tel" placeholder="输入您的联系方式" /> </p> <textarea class="content" cols="30" rows="10" name="nr"></textarea> <input type="submit" onclick="checkform()" value="提交您的留言" class="sub" /> </form> </p> </p> </body> </html>Nach dem Login kopieren
Das obige ist der detaillierte Inhalt vonJS-Verifizierung für die PHP7-Messageboard-Entwicklung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Heiße KI -Werkzeuge
Undresser.AI Undress
KI-gestützte App zum Erstellen realistischer Aktfotos
AI Clothes Remover
Online-KI-Tool zum Entfernen von Kleidung aus Fotos.
Undress AI Tool
Ausziehbilder kostenlos
Clothoff.io
KI-Kleiderentferner
AI Hentai Generator
Erstellen Sie kostenlos Ai Hentai.
Heißer Artikel
Heiße Werkzeuge
Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor
SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen
Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung
Dreamweaver CS6
Visuelle Webentwicklungstools
SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)
Heiße Themen
1378
52
So lösen Sie das Problem, wenn PHP7 erkennt, dass der TCP-Port nicht funktioniert
Mar 22, 2023 am 09:30 AM
In PHP5 können wir die Funktion fsockopen() verwenden, um den TCP-Port zu erkennen. Mit dieser Funktion können Sie eine Netzwerkverbindung herstellen und eine Netzwerkkommunikation durchführen. In PHP7 kann die Funktion fsockopen() jedoch auf einige Probleme stoßen, z. B. dass der Port nicht geöffnet werden kann, keine Verbindung zum Server hergestellt werden kann usw. Um dieses Problem zu lösen, können wir die Funktionen socket_create() und socket_connect() verwenden, um den TCP-Port zu erkennen.
Was soll ich tun, wenn das Plug-in in php7.0 installiert ist, aber immer noch angezeigt wird, dass es nicht installiert ist?
Apr 02, 2024 pm 07:39 PM
So beheben Sie das Problem, dass das Plugin in PHP 7.0 nicht installiert ist: Überprüfen Sie die Plugin-Konfiguration und aktivieren Sie das Plugin. Starten Sie PHP neu, um die Konfigurationsänderungen zu übernehmen. Überprüfen Sie die Berechtigungen der Plugin-Datei, um sicherzustellen, dass sie korrekt sind. Installieren Sie fehlende Abhängigkeiten, um sicherzustellen, dass das Plugin ordnungsgemäß funktioniert. Wenn alle anderen Schritte fehlschlagen, erstellen Sie PHP neu. Weitere mögliche Ursachen sind inkompatible Plugin-Versionen, das Laden der falschen Version oder PHP-Konfigurationsprobleme.
So installieren Sie die Mongo-Erweiterung in PHP7.0
Nov 21, 2022 am 10:25 AM
So installieren Sie die Mongo-Erweiterung in PHP7.0: 1. Erstellen Sie die Mongodb-Benutzergruppe und den Mongodb-Benutzer. 2. Laden Sie das Mongodb-Quellcodepaket herunter und platzieren Sie das Quellcodepaket im Verzeichnis „/usr/local/src/“. Geben Sie das Verzeichnis „src/“ ein. 4. Entpacken Sie das Quellcodepaket. 6. Kopieren Sie die Dateien in das Verzeichnis „mongodb/“.
FAQ-Leitfaden zur PHP-Serverumgebung: Häufige Probleme schnell lösen
Apr 09, 2024 pm 01:33 PM
Zu den gängigen Lösungen für PHP-Serverumgebungen gehört die Sicherstellung, dass die richtige PHP-Version installiert ist und relevante Dateien in das Modulverzeichnis kopiert wurden. Deaktivieren Sie SELinux vorübergehend oder dauerhaft. Überprüfen und konfigurieren Sie PHP.ini, um sicherzustellen, dass die erforderlichen Erweiterungen hinzugefügt und korrekt eingerichtet wurden. Starten oder starten Sie den PHP-FPM-Dienst neu. Überprüfen Sie die DNS-Einstellungen auf Auflösungsprobleme.
So installieren und implementieren Sie PHP7.0
Nov 30, 2022 am 09:56 AM
So installieren und implementieren Sie PHP7.0: 1. Gehen Sie zur offiziellen PHP-Website, um die dem lokalen System entsprechende Installationsversion herunterzuladen. 2. Extrahieren Sie die heruntergeladene ZIP-Datei in das angegebene Verzeichnis. 3. Öffnen Sie das Befehlszeilenfenster und gehen Sie zu das Verzeichnis „E:\php7“ Führen Sie einfach den Befehl „php -v“ aus.
Wie setze ich nach dem Neustart des Systems automatisch Berechtigungen von Unixsocket fest?
Mar 31, 2025 pm 11:54 PM
So setzen Sie die Berechtigungen von Unixsocket automatisch nach dem Neustart des Systems. Jedes Mal, wenn das System neu startet, müssen wir den folgenden Befehl ausführen, um die Berechtigungen von Unixsocket: sudo ...
Was ist besser, PHP8 oder PHP7?
Nov 16, 2023 pm 03:09 PM
Im Vergleich zu PHP7 bietet PHP8 einige Vorteile und Verbesserungen in Bezug auf Leistung, neue Funktionen und Syntaxverbesserungen, Typsystem, Fehlerbehandlung und Erweiterungen. Die Wahl der zu verwendenden Version hängt jedoch von Ihren spezifischen Anforderungen und Projektumständen ab. Detaillierte Einführung: 1. Leistungsverbesserung: PHP8 führt den Just-in-Time-Compiler (JIT) ein, der die Ausführungsgeschwindigkeit des Codes verbessern kann. 2. Neue Funktionen und Syntaxverbesserungen. PHP8 unterstützt die Deklaration benannter Parameter und optionaler Parameter. Durch die flexiblere Gestaltung von Funktionen werden anonyme Klassen, Typdeklarationen von Eigenschaften usw. eingeführt.
Warum tritt bei der Installation einer Erweiterung mit PECL in einer Docker -Umgebung ein Fehler auf? Wie löst ich es?
Apr 01, 2025 pm 03:06 PM
Ursachen und Lösungen für Fehler Bei der Verwendung von PECL zur Installation von Erweiterungen in der Docker -Umgebung, wenn die Docker -Umgebung verwendet wird, begegnen wir häufig auf einige Kopfschmerzen ...
