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" />################# 完整程式碼：###

nbsp;html>

    
        <meta>
        <title>留言板_科科分享</title>
        <!-- 2.新建css样式文件并根据效果图编写css代码 -->
        <link>
        <!-- 3.js表单验证 -->
        <script>
            function checkform(){
                var nickname = document.getElementsByTagName(&#39;input&#39;)[0].value; // 获取用户输入的姓名
                var tel = document.getElementsByTagName(&#39;input&#39;)[1].value; // 获取用户输入的联系方式
                var content = document.getElementsByTagName(&#39;textarea&#39;)[0].value; // 获取用户输入的留言内容
                // 如果没有输入姓名 则提示
                if(nickname == &#39;&#39;){
                    alert(&#39;请输入您的姓名&#39;);
                    document.getElementsByTagName(&#39;input&#39;)[0].focus(); // 将光标定位到姓名输入框
                    return false; // 阻止冒泡 输入姓名后才能通过
                }
                // 如果没有输入联系方式 则提示
                if(tel == &#39;&#39;){
                    alert(&#39;请输入您的联系方式&#39;);
                    document.getElementsByTagName(&#39;input&#39;)[1].focus(); // 将光标定位到联系方式输入框
                    return false;  // 阻止冒泡 输入联系方式才能通过
                }
                // 如果没有输入留言内容 则提示
                if(content == &#39;&#39;){
                    alert(&#39;请输入您的联系方式&#39;);
                    document.getElementsByTagName(&#39;textarea&#39;)[0].focus(); // 将光标定位到留言内容输入框
                    return false;  // 阻止冒泡 输入留言内容才能通过
                }
                document.feedback_form.submit(); // 提交用户数据到后端action中的地址
            }
        </script>
    
    
        <!-- 工作区，呈现给用户看的 -->
        <!-- 1.开始搭建脚手架 -->
        <p>
            </p><p>
                </p><h3 id="留言板">留言板</h3>
                <h5 id="FEEDBACK">FEEDBACK</h5>
            
            <p>
                </p>

                    

                                                                       

                                                          

                           ###實踐，實踐，實踐。重要的事情喊三次！ ！ ！ ######好啦，原生JS驗證我們的留言板就到這裡，如你有其他驗證方式或有什麼疑惑，歡迎在留言區塗鴉！ ~###

以上是PHP7留言板開發之JS驗證的詳細內容。更多資訊請關注PHP中文網其他相關文章！