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>
实践，实践，实践。重要的事情喊三遍！！！
好啦，原生JS验证我们的留言板就到这里，如你有其他验证方式或者有什么疑惑，欢迎在评论区涂鸦！~
以上是PHP7留言板开发之JS验证的详细内容。更多信息请关注PHP中文网其他相关文章！
php7检测tcp端口不好用怎么解决Mar 22, 2023 am 09:30 AM在php5中，我们可以使用fsockopen()函数来检测TCP端口。这个函数可以用来打开一个网络连接和进行一些网络通信。但是在php7中，fsockopen()函数可能会遇到一些问题，例如无法打开端口、无法连接到服务器等。为了解决这个问题，我们可以使用socket_create()函数和socket_connect()函数来检测TCP端口。
php7.0怎么安装mongo扩展Nov 21, 2022 am 10:25 AMphp7.0安装mongo扩展的方法：1、创建mongodb用户组和用户；2、下载mongodb源码包，并将源码包放到“/usr/local/src/”目录下；3、进入“src/”目录；4、解压源码包；5、创建mongodb文件目录；6、将文件复制到“mongodb/”目录；7、创建mongodb配置文件并修改配置即可。
php7.0安装了插件还是显示未安装怎么办Apr 02, 2024 pm 07:39 PM解决 PHP 7.0 中插件未显示已安装问题的方法：检查插件配置并启用插件。重新启动 PHP 以应用配置更改。检查插件文件权限，确保其正确。安装丢失的依赖项，以确保插件正常运行。如果其他步骤均失败，则重建 PHP。其他可能原因包括插件版本不兼容、加载错误版本或 PHP 配置问题。
php8和php7哪个好Nov 16, 2023 pm 03:09 PMPHP8相较于PHP7在性能、新特性和语法改进、类型系统、错误处理和扩展等方面都有一些优势和改进。然而，选择使用哪个版本要根据具体的需求和项目情况来决定。详细介绍：1、性能提升，PHP8引入了Just-in-Time(JIT)编译器，可以提高代码的执行速度；2、新特性和语法改进，PHP8支持命名参数和可选参数的声明，使得函数调用更加灵活;引入了匿名类、属性的类型声明等等。
PHP 服务器环境常见问题指南：快速解决常见难题Apr 09, 2024 pm 01:33 PMPHP服务器环境常见的解决方法包括：确保已安装正确的PHP版本和已复制相关文件到模块目录。临时或永久禁用SELinux。检查并配置PHP.ini，确保已添加必要的扩展和进行正确设置。启动或重启PHP-FPM服务。检查DNS设置是否存在解析问题。
php7.0怎么安装部署Nov 30, 2022 am 09:56 AMphp7.0安装部署的方法：1、到PHP官网下载与本机系统对应的安装版本；2、将下载的zip文件解压到指定目录；3、打开命令行窗口，在“E:\php7”目录下运行“php -v”命令即可。
php7怎么下载与安装（教程分享）Mar 23, 2023 pm 02:11 PM随着互联网技术的发展，计算机编程语言也随之不断发展和更新。PHP作为一种广泛应用于Web开发领域的编程语言，在多年的发展中经历了多个版本的更新，而最新版的PHP7又在性能和稳定性上有了巨大提升。为了能更好地应用PHP编程语言，这篇文章将介绍PHP7的下载和安装教程，供初学者参考。
记录一次用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-
热AI工具
Undresser.AI Undress
人工智能驱动的应用程序，用于创建逼真的裸体照片
AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。
Undress AI Tool
免费脱衣服图片
Clothoff.io
AI脱衣机
AI Hentai Generator
免费生成ai无尽的。
热门文章
热工具
EditPlus 中文破解版
体积小，语法高亮，不支持代码提示功能
Dreamweaver Mac版
视觉化网页开发工具
ZendStudio 13.5.1 Mac
功能强大的PHP集成开发环境
SublimeText3 Mac版
神级代码编辑软件(SublimeText3)
mPDF
mPDF是一个PHP库，可以从UTF-8编码的HTML生成PDF文件。原作者Ian Back编写mPDF以从他的网站上“即时”输出PDF文件，并处理不同的语言。与原始脚本如HTML2FPDF相比，它的速度较慢，并且在使用Unicode字体时生成的文件较大，但支持CSS样式等，并进行了大量增强。支持几乎所有语言，包括RTL（阿拉伯语和希伯来语）和CJK（中日韩）。支持嵌套的块级元素（如P、DIV），
