温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

PHP7留言板开发之JS验证的使用示例

发布时间:2020-12-23 09:44:46 来源:亿速云 阅读:200 作者:小新 栏目:编程语言

小编给大家分享一下PHP7留言板开发之JS验证的使用示例,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!

本节JS关键词有:functiononsubmitonclickdocument.getElementsByTagName(这些在前端开发中是常用的,所以必须掌握)

根据步骤一的页面基础上加入JS验证表单事件,提升用户体验,也确保后端接收到的用户提交的数据是预定的。

拿到需求的时候不要急着敲代码,首先确认一下需要用的到知识点,理清思路,脑子里大概有个方案,特别是当下新技术天天新花样的时代,我们更应该思路要时刻保持清晰,不管是原生的js还是jquery或者是其他前端框架,万变不离其宗,只有稳固的js基础,方能走天下。

下面原生JS验证留言板表单的时候也是有多种方法可以实现的,这里用的是其中一个常用的,你能发现其他方法吗,可以在评论区分享个大家,好东西,就是要分享的!~

方法:

  • 1、确定触发鼠标点击事件方式,如onclickonsubmitxxx.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">
                <h4 class="title">留言板</h4>
                <h6 class="subtitle">FEEDBACK</h6>
            </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验证的使用示例”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注亿速云行业资讯频道!

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI