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

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

站在用户的角度思考问题，与客户深入沟通，找到广宗网站设计与广宗网站推广的解决方案，凭借多年的经验，让设计与互联网技术结合，创造个性化、用户体验好的作品，建站类型包括：成都做网站、成都网站设计、企业官网、英文网站、手机端网站、网站推广、空间域名、网页空间、企业邮箱。业务覆盖广宗地区。

本节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、示例代码片段

---

完整代码：

    
        
        
        
        
        
        
            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中的地址
            }
        
    
    
        
        
        
            
                留言板
                FEEDBACK
            

            
                
                    
                         
                        
                    

                    
                    
                
            

        

    

以上是“PHP7留言板开发之JS验证的使用示例”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注创新互联行业资讯频道！

分享名称：PHP7留言板开发之JS验证的使用示例
URL分享：http://bjjierui.cn/article/pghegp.html