PHP7留言板开发之JS验证-9543建站博客

广告：宝塔Linux面板高效运维的服务器管理软件点击【 https://www.bt.cn/p/uNLv1L 】立即购买

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、示例代码片段<form name="feedback_form" action="/#" method="post" onsubmit="return false;">

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验证的详细内容，更多请关注9543建站博客其它相关文章！

广告：SSL证书一年128.66元起，点击购买~~~