本節(jié)JS關(guān)鍵詞有：function、onsubmit述寡、onclick、document.getElementsByTagName（這些在前端開發(fā)中是常用的，所以必須掌握）
根據(jù)步驟一的頁面基礎(chǔ)上加入JS驗證表單事件天吓，提升用戶體驗，也確保后端接收到的用戶提交的數(shù)據(jù)是預(yù)定的峦椰。
拿到需求的時候不要急著敲代碼龄寞，首先確認一下需要用的到知識點，理清思路汤功，腦子里大概有個方案物邑，特別是當下新技術(shù)天天新花樣的時代，我們更應(yīng)該思路要時刻保持清晰滔金，不管是原生的js還是jquery或者是其他前端框架色解，萬變不離其宗，只有穩(wěn)固的js基礎(chǔ)鹦蠕，方能走天下冒签。
下面原生JS驗證留言板表單的時候也是有多種方法可以實現(xiàn)的，這里用的是其中一個常用的钟病，你能發(fā)現(xiàn)其他方法嗎萧恕，可以在評論區(qū)分享個大家，好東西肠阱，就是要分享的票唆！~
方法：
-
1、確定觸發(fā)鼠標點擊事件方式屹徘，如
onclick走趋，onsubmit，xxx.click(function(){})等等（諸多驗證方式噪伊，需要你們?nèi)蘸舐l(fā)現(xiàn)簿煌，神奇的JS世界等著你）氮唯；我給留言板submit按鈕添加了
onclick事件，為了觸發(fā)checkform函數(shù)激活表單驗證姨伟；然后又給了form標簽添加了onsubmit="return false;"屬性惩琉，為了阻止form表默認的提交事件（阻止事件冒泡）；具體看代碼并進行實踐試試看~
a夺荒、示例代碼片段<form name="feedback_form" action="/#" method="post" onsubmit="return false;"> -
2瞒渠、定義JS函數(shù)；
a技扼、函數(shù)命名以
function開頭
b伍玖、選中表單元素用document.getElementsByTagName('input')
c、阻止冒泡（阻止表單提交剿吻，驗證成功才能提交）用return false;
d窍箍、腳本觸發(fā)表單提交用document.feedback_form.submit();，feedback_form為form表單的name名稱 -
3和橙、submit標簽中綁定鼠標點擊事件觸發(fā)我們定義的JS函數(shù)仔燕，如表單submit標簽屬性加入
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ù)效果圖編寫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; // 獲取用戶輸入的聯(lián)系方式
var content = document.getElementsByTagName('textarea')[0].value; // 獲取用戶輸入的留言內(nèi)容
// 如果沒有輸入姓名 則提示
if(nickname == ''){
alert('請輸入您的姓名');
document.getElementsByTagName('input')[0].focus(); // 將光標定位到姓名輸入框
return false; // 阻止冒泡 輸入姓名后才能通過
}
// 如果沒有輸入聯(lián)系方式 則提示
if(tel == ''){
alert('請輸入您的聯(lián)系方式');
document.getElementsByTagName('input')[1].focus(); // 將光標定位到聯(lián)系方式輸入框
return false; // 阻止冒泡 輸入聯(lián)系方式才能通過
}
// 如果沒有輸入留言內(nèi)容 則提示
if(content == ''){
alert('請輸入您的聯(lián)系方式');
document.getElementsByTagName('textarea')[0].focus(); // 將光標定位到留言內(nèi)容輸入框
return false; // 阻止冒泡 輸入留言內(nèi)容才能通過
}
document.feedback_form.submit(); // 提交用戶數(shù)據(jù)到后端action中的地址
}
</script>
</head>
<body>
<!-- 工作區(qū)魔招，呈現(xiàn)給用戶看的 -->
<!-- 1.開始搭建腳手架 -->
<div class="container_box">
<div class="up">
<h3 class="title">留言板</h3>
<h5 class="subtitle">FEEDBACK</h5>
</div>
<div class="down">
<form name="feedback_form" action="/#" method="post" onsubmit="return false;">
<div class="input">
<input type="text" class="fl" name="name" placeholder="輸入您的姓名" />
<input type="text" class="fr" name="tel" placeholder="輸入您的聯(lián)系方式" />
</div>
<textarea class="content" cols="30" rows="10" name="nr"></textarea>
<input type="submit" onclick="checkform()" value="提交您的留言" class="sub" />
</form>
</div>
</div>
</body>
</html>
實踐晰搀，實踐，實踐办斑。重要的事情喊三遍Ｍ馑 ！乡翅！
好啦鳞疲，原生JS驗證我們的留言板就到這里，如你有其他驗證方式或者有什么疑惑蠕蚜，歡迎在評論區(qū)涂鴉尚洽！~
