美化之前的表單內容並對其進行校驗，讓我們一起來發現，Javascript在應用時，會有哪方面的不足，然後再想辦法解決。當然，我只是舉了一個常見的例子。開發的專案越多，你就會發現，原生Javascript存在的不足點，原生的HTML和CSS也有。
16.1 表單校驗表單驗證是HTML、CSS和Javascript最常見的組合應用，特別是在開發後臺管理系統時，用得更多。在提交資訊時，用Js對錶單內容進行校驗，是必不可少的一個環節，我們綜合了之前的相關例子，稍微最佳化一下。
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>表單驗證</title> <style> .btn-div { width: 250px; text-align: center; vertical-align: center; line-height: 30px; } .submit { background-color: #4CAF50; /* Green */ border: none; color: white; padding: 8px 32px; font-size: 16px; margin-top: 15px; } .reset { background-color: gray; color: white; border: none; padding: 8px 32px; font-size: 16px; margin-top: 15px; } .input { border: 1px solid darkcyan; line-height: 25px; width: 200px; color: #000; font-weight: bold; margin-top: 5px; } .margin { margin-top: 10px; margin-bottom: 10px; } </style> <script> function check() { let name = document.forms["form"]["name"].value; let gender = document.forms["form"]["gender"].value; let intro = document.forms["form"]["intro"].value; if (null == name || name.trim() == "") { alert("姓名不能為空，請輸入!"); return false; } if (null == gender || gender == "") { alert("性別不能為空，請選擇!"); return false; } if (null == intro || intro == "") { alert("個人簡介不能為空，請輸入!"); return false; } if (intro.length <= 10) { alert("個人簡介不能少於10個字，請補充完整!"); return false; } alert("恭喜你，提交成功!") } </script></head><body>個人資訊登記 <br/> <br/><form name="form" action="#" onsubmit="return check()" method="post"> 姓名：<input class="input" type="text" name="name"/><br/> 性別：<input type="radio" name="gender" value="male"/>男 <input type="radio" name="gender" value="female"/>女<br/> 興趣：<input type="checkbox" name="p" value="p"/>程式設計 <input type="checkbox" name="k" value="k"/>看書 <input type="checkbox" name="c" value="c"/>看電影 <input type="checkbox" name="l" value="l"/>看美女 <br/> 愛好： <select name="love"> <option value="x">下象棋</option> <option value="j">下軍旗</option> <option value="t">下跳棋</option> <option value="w">下圍棋</option> </select> <div class="margin">個人簡介</div> <textarea name="intro" rows="10" cols="35"></textarea><br/><br/> <div class="btn-div"> <button class="submit" type="submit"> 提交 </button> <button class="reset" type="reset"> 重置 </button> </div></form></body></html>輸出結果
在編寫Web的過程中，你會發現，起碼有兩方面的工作，會重複囉嗦，一個就是頁面佈局和風格，一個就是Javascript的應用，你看錶單驗證，就重複了好多程式碼。
為了減少HTML、CSS和Javascript的原生的低效率工作，一些技術大牛，行業老大，開發了可重複使用，提高工作效率的優秀框架。
16.2 優秀框架封裝了HTML和CSS的優秀框架，現在常用的主要是Bootstrap，它是Twitter推出的一個用於前端開發的開源工具包，是一個CSS/HTML框架。最新版本為4.0。
封裝了Javascript的優秀框架，有Vue.js、Angular和React.js。
Angular是一個包含了服務、控制器、模組、指令等豐富功能框架，它能夠實現更多更強大的功能。它擁有一套基於html的獨立規則，已經替代了html自身的屬性，它好像是“套”在html上。
Angular的特點是大而全，功能豐富，其優點便是其缺點。由於功能豐富，學習成本高了很多，我們平時開發的系統，其實不需要那麼多的功能的。所以，我們早就改用了輕量級的Vue.js。
React.js整體是函式式的思想，把元件設計成純元件，狀態和邏輯透過引數傳入，所以在react中，是單向資料流。在開發過程中，雙向資料流的需求更多，這也是我選擇Vue.js的原因。
Vue.js 是開源的JavaScript框架，能幫助開發者構建出美觀的 Web 介面。當和其它網路工具配合使用時，Vue.js 的優秀功能會得到大大加強。
#前端##HTML5##JavaScript##程式設計師##Web#