對於#JavaScript#語言來說，更多的是前端操作，最初的功能也是為了表單的前端驗證而出現的，因此，表單驗證是JavaScript的鼻祖功能。
我們可以將在C#後端開發中使用的一些表單驗證技巧用在JavaScript表單驗證中。語言不同，但原理都是一樣的。
目標：練習JavaScript給文本框賦值和取值，並進行非空判斷。
一、【項目案例】
登錄是項目中常見的效果，比如上淘寶網購物，登錄QQ，都要先登錄，才能獲取用戶信息，那麼我首先來實現登錄時如何獲取用戶信息。
二、【效果圖】
用戶信息註冊頁面圖1
在此圖中，是一個只有用戶名和密碼的用戶信息註冊頁面，這是一個最為簡單的註冊頁面，這裡我們所做的工作就是對用戶名和密碼執行非空驗證。
非空驗證是為了保證禁止將空數據保存到資料庫中，起到一個數據完整性的作用。
三、【HTML代碼】
Html表單代碼如下：
<body><h3>用戶信息註冊</h3>用戶名：<input id="txtName" type="text" /><p />密 碼：<input id="txtPwd" type="password" /><p /><input id="Submit1" type="submit" onclick="getData()" value="提交" /><input id="Reset1" type="reset" onclick="clearData()" value="清空" /></body>
此HTML代碼說明如下：
每個表單標記必須具有id屬性，且要唯一，因為這是獲取標記的唯一標識。Input標記中，type屬性值為text表示一個單行文本框。Type屬性的值為password，表示一個密碼框。將表單提交到伺服器上，input的類型必須是submit，表示提交按鈕。如查要清空表單數據，可以使用type=「reset」的重置按鈕。有了Html表單，現在就可以編寫JavaScript代碼實現非空驗證了。
四、【JavaScript代碼】
JavaScript代碼如下：
<script>//獲取值function getData() {//獲取用戶名var name = document.getElementById("txtName").value;//獲取密碼var age = document.getElementById("txtPwd").value;//非空判斷if (name != "" && age != "") {window.alert("用戶名是：" + name + "，密碼是：" + age);}else{window.alert("用戶名或密碼不可為空。");}}//清空數據。function clearData() {//獲取用戶名document.getElementById("txtName").value = "";//獲取密碼document.getElementById("txtPwd").value = "";}</script>
此段JavaScript代碼說明如下：
使用了getElementById()方法根據Id值獲取了用戶名和密碼框對象。使用value屬性獲取用戶名和密碼值。使用if語句判斷用戶名和密碼是否為空值。在clearData()函數中，對用戶名和密碼框做清空數據處理。最後將編寫好的2個函數掛接到按鈕上。上面完成的Html+JavaScript完整代碼如下圖所示：
JS非空驗證圖2
五、【運行結果】
在瀏覽器裡運行一下上面的代碼，結果如下：
非空驗證失敗圖3
在圖3中，當文本框的值為空時，會彈出一個提示信息，提示用戶名或密碼不可為空。
如果輸入正確的值，則會將值輸出：
非空驗證成功圖4
在圖4中，非空驗證通過了，通過後得到了用戶名和密碼值，然後顯示在警告框中。
這裡只是一個簡單的表單驗證，對於複雜的表單頁面，驗證邏輯也會複雜，常見的表單驗證有：手機號、郵箱地址、數字、密碼、用戶名等。
還有一種驗證叫做正則表達式驗證，這個驗證更為靈活，只需要定義一種匹配模式，然後將輸入的值在模式中匹配即可，匹配到了就表示驗證成功。
雖然在Html頁面上使用JavaScript可以實現前端的驗證，但是這種驗證不是絕對安全的，如果用戶將自己瀏覽器的JavaScript代碼禁用了，則JavaScript驗證就會失效，因此，還是有必須做服務端器驗證的。
最保險的驗證是客戶端+伺服器端雙重驗證，這樣就能保證數據完全給驗證到了。