JavaScript進階（四）form表單校驗
阿新 • • 發佈：2018-11-24
前言
本章將學習表單的校驗，作為一個前面學習的總結！
方法
1.概念
我們知道，在學習HTML的時候，我們做了一個非常醜陋的表單，裡面有文字框、單選鈕、複選框等一系列表單元素。這些都是隨便填寫的，沒有加任何的校驗。也就是說正常情況下我們需要對錶單進行校驗，確保使用者輸入正確！
2.具體思路
1）回顧一下簡單的form表單的寫法
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>form表單的學習</title> </head> <body> <form action="#" method="post"> <h5>註冊資訊</h5> 使用者名稱：<input type="text" name="username" id="username" value=""/><br/> 性 別：<input type="radio" name="sex" value="男" checked="checked"/>男<input type="radio" name="sex" value="女"/>女<br/> 愛 好:<input type="checkbox" name="hobby" value="足球" />足球<input type="checkbox" name="hobby" value="游泳"/>游泳 <input type="checkbox" name="hobby" value="棋牌" />棋牌<br/> 畢業院校：<select name="school" id="school"> <option value="--請選擇--">--請選擇--</option> <option value="清華大學">清華大學</option> <option value="北京大學">北京大學</option> <option value="挖掘機技術學院">挖掘機技術學院</option> </select><br/> 個人簡介：<textarea rows="3" cols="20" name="introduce" id="introduce"></textarea><br/> <input type="submit" value="提交"/> <input type="reset" name="" id="" value="重置" /> </form> </body> </html>
以上就是我們之前寫過的一個表單，這裡我就不加CSS修飾了，醜就醜吧！
2）探究姓名校驗
首先，我們為提交按鈕新增一個點選事件，用來對錶單進行一個校驗。
姓名的校驗主要是一個非空校驗，如下程式碼可以實現！
function validate(){
//加入姓名驗證
var username = document.getElementById("username").value;
if(username.trim() == ""){
alert("使用者名稱不能為空！");
}
}3）探究愛好選擇校驗
我們知道，愛好至少要選擇一項！我們可以用如下程式碼進行校驗！
//加入愛好校驗
var hobby = document.getElementsByName("hobby");
var isHobby = false;
for(var i=0;i<hobby.length;i++){
if(hobby[i].checked){
isHobby=true;
}
}
if(!isHobby){
alert("愛好至少選擇一項！");
}4）探究畢業院校校驗
我們知道，畢業院校是一個下拉框，我們不能讓使用者選擇“--請選擇--”這個選項！所以程式碼如下：
//加入畢業院校校驗 var school = document.getElementById("school").value; if(school == "--請選擇--"){ alert("請選擇畢業院校！"); }
5）探究個人簡介的校驗
個人簡介的校驗和使用者名稱的校驗相一致
var introduce = document.getElementById("introduce").value
if(introduce.trim() == ""){
alert("個人簡介不能為空！");
}3.總體規劃
1）避免驗證失敗後仍然提交
將提交按鈕改成普通按鈕，通過js來進行提交
<input type="button" value="提交" onclick="sub();"/>sub()方法中對錶單項實現提交功能，前提是驗證通過！
function sub(){
if(validate()){
document.getElementById("ff").submit();
}
}這裡的validate()函式就是我們的校驗函式，如果校驗成功返回true進行提交，反之則不提交
validate()函式的具體實現如下，綜合了我們上面講解的內容
function validate(){
//加入姓名驗證
var username = document.getElementById("username").value;
if(username.trim() == ""){
alert("使用者名稱不能為空！");
return false;
}
//加入愛好校驗
var hobby = document.getElementsByName("hobby");
var isHobby = false;
for(var i=0;i<hobby.length;i++){
if(hobby[i].checked){
isHobby=true;
}
}
if(!isHobby){
alert("愛好至少選擇一項！");
return false;
}
//加入畢業院校校驗
var school = document.getElementById("school").value;
if(school == "--請選擇--"){
alert("請選擇畢業院校！");
return false;
}
//加入個人簡介校驗
var introduce = document.getElementById("introduce").value
if(introduce.trim() == ""){
alert("個人簡介不能為空！");
return false;
}
return true;
}2）實現校驗人性化
我們通過實驗發現一個問題，那就是我們每次驗證失敗都會彈出一個警告框告知我們！實際上這種提醒的方式非常不人性化。通常的做法是在表單項右側以文字的方式進行提示！
將每個表單項的程式碼後追加span標籤，如使用者名稱標籤追加span標籤如下:
使用者名稱：<input type="text" name="username" id="username" value=""/><span id="usernameSpan"></span><br/>對使用者名稱的校驗進行一個改進如下：
var username = document.getElementById("username").value;
var usernameSpan = document.getElementById("usernameSpan");
if(username.trim() == ""){
usernameSpan.innerText = "使用者名稱不能為空";
usernameSpan.style.color = "red";
return false;
}else{
usernameSpan.innerText = "使用者名稱輸入正確";
usernameSpan.style.color = "green";
}這樣的話，校驗更加人性化，避免彈窗！
剩餘的校驗以此類推，請讀者嘗試自行進行補全！