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、示例代码片段<input type="submit" onclick="checkform()" value="提交您的留言" class="sub" />
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.
Beeilen Sie sich nicht, den Code einzugeben, wenn Sie die Anforderungen erhalten. Bestätigen Sie zunächst die Wissenspunkte, die Sie verwenden müssen, klären Sie Ihre Ideen und haben Sie wahrscheinlich einen Plan im Kopf, insbesondere in der aktuellen Ära neuer Technologien und neuer Tricks Heute sollten wir uns immer darüber im Klaren sein, ob es sich um native JS-, JQuery- oder andere Front-End-Frameworks handelt. Nur eine solide JS-Grundlage kann zum Erfolg führen Welt.
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 mit function
b. Um Formularelemente auszuwählen, verwenden Sie document.getElementsByTagName('input')
c (Formularübermittlung verhindern, es darf nur übermittelt werden, wenn die Überprüfung erfolgreich ist), verwenden Sie return false;
d Das Skript löst die Formularübermittlung mit document.feedback_form.submit() aus. ;, feedback_form ist 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 onclick="function name"
zum Formular-Submit-Tag-Attribut hinzu 🎜a, Beispielcode-Snippet < ;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>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!
