溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶(hù)服務(wù)條款》

PHP7留言板開(kāi)發(fā)之JS驗(yàn)證的使用示例

發(fā)布時(shí)間：2020-12-23 09:44:46 來(lái)源：億速云 閱讀：199 作者：小新 欄目：編程語(yǔ)言

小編給大家分享一下PHP7留言板開(kāi)發(fā)之JS驗(yàn)證的使用示例，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

本節(jié)JS關(guān)鍵詞有：function、onsubmit、onclick、document.getElementsByTagName（這些在前端開(kāi)發(fā)中是常用的，所以必須掌握）

根據(jù)步驟一的頁(yè)面基礎(chǔ)上加入JS驗(yàn)證表單事件，提升用戶(hù)體驗(yàn)，也確保后端接收到的用戶(hù)提交的數(shù)據(jù)是預(yù)定的。

拿到需求的時(shí)候不要急著敲代碼，首先確認(rèn)一下需要用的到知識(shí)點(diǎn)，理清思路，腦子里大概有個(gè)方案，特別是當(dāng)下新技術(shù)天天新花樣的時(shí)代，我們更應(yīng)該思路要時(shí)刻保持清晰，不管是原生的js還是jquery或者是其他前端框架，萬(wàn)變不離其宗，只有穩(wěn)固的js基礎(chǔ)，方能走天下。

下面原生JS驗(yàn)證留言板表單的時(shí)候也是有多種方法可以實(shí)現(xiàn)的，這里用的是其中一個(gè)常用的，你能發(fā)現(xiàn)其他方法嗎，可以在評(píng)論區(qū)分享個(gè)大家，好東西，就是要分享的！~

方法：

  • 1、確定觸發(fā)鼠標(biāo)點(diǎn)擊事件方式，如onclick，onsubmit，xxx.click(function(){})等等（諸多驗(yàn)證方式，需要你們?nèi)蘸舐l(fā)現(xiàn)，神奇的JS世界等著你）；

    我給留言板submit按鈕添加了onclick事件，為了觸發(fā)checkform函數(shù)激活表單驗(yàn)證；然后又給了form標(biāo)簽添加了onsubmit="return false;"屬性，為了阻止form表默認(rèn)的提交事件（阻止事件冒泡）；具體看代碼并進(jìn)行實(shí)踐試試看~
    a、示例代碼片段<form name="feedback_form" action="/#" method="post" onsubmit="return false;">

  • 2、定義JS函數(shù)；

    a、函數(shù)命名以function開(kāi)頭
    b、選中表單元素用document.getElementsByTagName('input')
    c、阻止冒泡（阻止表單提交，驗(yàn)證成功才能提交）用return false;
    d、腳本觸發(fā)表單提交用document.feedback_form.submit();，feedback_form為form表單的name名稱(chēng)

  • 3、submit標(biāo)簽中綁定鼠標(biāo)點(diǎn)擊事件觸發(fā)我們定義的JS函數(shù)，如表單submit標(biāo)簽屬性加入onclick="函數(shù)名"

    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樣式文件并根據(jù)效果圖編寫(xiě)css代碼 -->
        <link rel="stylesheet" href="feedback.css">
        <!-- 3.js表單驗(yàn)證 -->
        <script type="text/javascript">
            function checkform(){
                var nickname = document.getElementsByTagName('input')[0].value; // 獲取用戶(hù)輸入的姓名
                var tel = document.getElementsByTagName('input')[1].value; // 獲取用戶(hù)輸入的聯(lián)系方式
                var content = document.getElementsByTagName('textarea')[0].value; // 獲取用戶(hù)輸入的留言?xún)?nèi)容
                // 如果沒(méi)有輸入姓名 則提示
                if(nickname == ''){
                    alert('請(qǐng)輸入您的姓名');
                    document.getElementsByTagName('input')[0].focus(); // 將光標(biāo)定位到姓名輸入框
                    return false; // 阻止冒泡 輸入姓名后才能通過(guò)
                }
                // 如果沒(méi)有輸入聯(lián)系方式 則提示
                if(tel == ''){
                    alert('請(qǐng)輸入您的聯(lián)系方式');
                    document.getElementsByTagName('input')[1].focus(); // 將光標(biāo)定位到聯(lián)系方式輸入框
                    return false;  // 阻止冒泡 輸入聯(lián)系方式才能通過(guò)
                }
                // 如果沒(méi)有輸入留言?xún)?nèi)容 則提示
                if(content == ''){
                    alert('請(qǐng)輸入您的聯(lián)系方式');
                    document.getElementsByTagName('textarea')[0].focus(); // 將光標(biāo)定位到留言?xún)?nèi)容輸入框
                    return false;  // 阻止冒泡 輸入留言?xún)?nèi)容才能通過(guò)
                }
                document.feedback_form.submit(); // 提交用戶(hù)數(shù)據(jù)到后端action中的地址
            }
        </script>
    </head>
    <body>
        <!-- 工作區(qū)，呈現(xiàn)給用戶(hù)看的 -->
        <!-- 1.開(kāi)始搭建腳手架 -->
        <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="輸入您的聯(lián)系方式" />
                    </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留言板開(kāi)發(fā)之JS驗(yàn)證的使用示例”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！

向AI問(wèn)一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手