PHP7留言板開發之JS驗證
PHP7教學欄位介紹留言板開發用到的JS驗證
推薦（免費）：PHP7教學
本節JS關鍵字有：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" />################# 完整程式碼：###
<!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>以上是PHP7留言板開發之JS驗證的詳細內容。更多資訊請關注PHP中文網其他相關文章！
熱AI工具
Undresser.AI Undress
人工智慧驅動的應用程序，用於創建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Undress AI Tool
免費脫衣圖片
Clothoff.io
AI脫衣器
Video Face Swap
使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！
熱門文章
熱工具
記事本++7.3.1
好用且免費的程式碼編輯器
SublimeText3漢化版
中文版，非常好用
禪工作室 13.0.1
強大的PHP整合開發環境
Dreamweaver CS6
視覺化網頁開發工具
SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)
php7.0安裝了插件還是顯示未安裝怎麼辦
Apr 02, 2024 pm 07:39 PM
解決 PHP 7.0 中插件未顯示已安裝問題的方法：檢查插件配置並啟用插件。重新啟動 PHP 以套用配置變更。檢查插件檔案權限，確保其正確。安裝遺失的依賴項，以確保插件正常運作。如果其他步驟都失敗，則重建 PHP。其他可能原因包括外掛程式版本不相容、載入錯誤版本或 PHP 配置問題。
php7.0怎麼安裝mongo擴展
Nov 21, 2022 am 10:25 AM
php7.0安裝mongo擴充的方法：1、建立mongodb使用者群組和使用者；2、下載mongodb原始碼包，並將原始碼包放到“/usr/local/src/”目錄下；3、進入“src/”目錄；4、解壓縮原始碼包；5、建立mongodb檔案目錄；6、將檔案複製到「mongodb/」目錄；7、建立mongodb設定檔並修改設定即可。
php7檢測tcp埠不好用怎麼解決
Mar 22, 2023 am 09:30 AM
在php5中，我們可以使用fsockopen()函數來偵測TCP埠。這個函數可以用來開啟一個網路連接和進行一些網路通訊。但是在php7中，fsockopen()函數可能會遇到一些問題，例如無法開啟連接埠、無法連接到伺服器等。為了解決這個問題，我們可以使用socket_create()函數和socket_connect()函數來偵測TCP埠。
PHP 伺服器環境常見問題指南：快速解決常見難題
Apr 09, 2024 pm 01:33 PM
PHP伺服器環境常見的解決方法包括：確保已安裝正確的PHP版本和已複製相關檔案到模組目錄。暫時或永久停用SELinux。檢查並配置PHP.ini，確保已新增必要的擴充功能和進行正確設定。啟動或重新啟動PHP-FPM服務。檢查DNS設定是否有解析問題。
php7.0怎麼安裝部署
Nov 30, 2022 am 09:56 AM
php7.0安裝部署的方法：1、到PHP官網下載與本機系統對應的安裝版本；2、將下載的zip檔案解壓縮到指定目錄；3、開啟命令列窗口，在「E:\php7」目錄下運行“php -v”命令即可。
如何在系統重啟後自動設置unixsocket的權限？
Mar 31, 2025 pm 11:54 PM
如何在系統重啟後自動設置unixsocket的權限每次系統重啟後，我們都需要執行以下命令來修改unixsocket的權限：sudo...
在Docker環境中使用PECL安裝擴展時為什麼會報錯？如何解決？
Apr 01, 2025 pm 03:06 PM
在Docker環境中使用PECL安裝擴展時報錯的原因及解決方法在使用Docker環境時，我們常常會遇到一些令人頭疼的問�...
記錄一次用strace診斷php佔用系統資源過高的問題
May 03, 2024 pm 04:31 PM
本機環境：redhat6.7系統。 nginx1.12.1，php7.1.0，程式碼使用yii2框架問題：本地的web站需要用到elasticsearch服務。當php使用本機伺服器搭建的elasticsearch時，本地的負載都是正常。當我使用aws的elasticsearchservice服務時，本地伺服器出現負載經常過高的情況。查看nginx和php日誌，發現沒有異常。系統的並發連線數也不高。這時候想到我們老闆跟我講的一個strace診斷工具。偵錯過程：找一個php的子程序idstrace-
