社区
学习
工具库
AI工具
休闲
搜索
简体中文
目录
1、确定触发鼠标点击事件方式，如onclick，onsubmit，xxx.click(function(){})等等（诸多验证方式，需要你们日后慢慢发现，神奇的JS世界等着你）；
2、定义JS函数；
完整代码：
首页 后端开发 PHP7 PHP7留言板开发之JS验证

PHP7留言板开发之JS验证

coldplay.xixi
coldplay.xixi
Dec 22, 2020 am 09:29 AM
php7

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" />

完整代码：

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

<!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中文网其他相关文章！

本站声明
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序，用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

Video Face Swap

Video Face Swap

使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸！

显示更多

热门文章

如何修复KB5055612无法在Windows 10中安装？
4 周前 By DDD
<🎜>：种植花园 - 完整的突变指南
3 周前 By DDD
<🎜>：泡泡胶模拟器无穷大 - 如何获取和使用皇家钥匙
3 周前 By 尊渡假赌尊渡假赌尊渡假赌
北端：融合系统，解释
4 周前 By 尊渡假赌尊渡假赌尊渡假赌
Mandragora：巫婆树的耳语 - 如何解锁抓钩
3 周前 By 尊渡假赌尊渡假赌尊渡假赌
显示更多

热工具

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

SublimeText3汉化版

中文版，非常好用

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

显示更多

热门话题

Java教程
1669
14
CakePHP 教程
1428
52
Laravel 教程
1329
25
PHP教程
1273
29
C# 教程
1256
24
显示更多
Related knowledge
php7.0安装了插件还是显示未安装怎么办 php7.0安装了插件还是显示未安装怎么办 Apr 02, 2024 pm 07:39 PM

解决 PHP 7.0 中插件未显示已安装问题的方法：检查插件配置并启用插件。重新启动 PHP 以应用配置更改。检查插件文件权限，确保其正确。安装丢失的依赖项，以确保插件正常运行。如果其他步骤均失败，则重建 PHP。其他可能原因包括插件版本不兼容、加载错误版本或 PHP 配置问题。

php7.0怎么安装mongo扩展 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端口不好用怎么解决 php7检测tcp端口不好用怎么解决 Mar 22, 2023 am 09:30 AM

在php5中，我们可以使用fsockopen()函数来检测TCP端口。这个函数可以用来打开一个网络连接和进行一些网络通信。但是在php7中，fsockopen()函数可能会遇到一些问题，例如无法打开端口、无法连接到服务器等。为了解决这个问题，我们可以使用socket_create()函数和socket_connect()函数来检测TCP端口。

PHP 服务器环境常见问题指南：快速解决常见难题 PHP 服务器环境常见问题指南：快速解决常见难题 Apr 09, 2024 pm 01:33 PM

PHP服务器环境常见的解决方法包括：确保已安装正确的PHP版本和已复制相关文件到模块目录。临时或永久禁用SELinux。检查并配置PHP.ini，确保已添加必要的扩展和进行正确设置。启动或重启PHP-FPM服务。检查DNS设置是否存在解析问题。

如何在系统重启后自动设置unixsocket的权限？ 如何在系统重启后自动设置unixsocket的权限？ Mar 31, 2025 pm 11:54 PM

如何在系统重启后自动设置unixsocket的权限每次系统重启后，我们都需要执行以下命令来修改unixsocket的权限：sudo...

php7.0怎么安装部署 php7.0怎么安装部署 Nov 30, 2022 am 09:56 AM

php7.0安装部署的方法：1、到PHP官网下载与本机系统对应的安装版本；2、将下载的zip文件解压到指定目录；3、打开命令行窗口，在“E:\php7”目录下运行“php -v”命令即可。

在Docker环境中使用PECL安装扩展时为什么会报错？如何解决？ 在Docker环境中使用PECL安装扩展时为什么会报错？如何解决？ Apr 01, 2025 pm 03:06 PM

在Docker环境中使用PECL安装扩展时报错的原因及解决方法在使用Docker环境时，我们常常会遇到一些令人头疼的问�...

记录一次用strace诊断php占用系统资源过高的问题 记录一次用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-

See all articles