Heim > Artikel > Backend-Entwicklung > JS-Verifizierung für die PHP7-Messageboard-Entwicklung
JS-Verifizierung für die PHP7-Messageboard-Entwicklung
- coldplay.xixinach vorne
- 2020-12-22 09:29:411722Durchsuche
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: 🎜<!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>🎜Ü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! ~🎜
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!