當前位置：首頁 > 前端技术 > javascript >内容正文

javascript

JavaScript表单验证

發(fā)布時間：2023/12/20 javascript 31 豆豆

生活随笔收集整理的這篇文章主要介紹了 JavaScript表单验证小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.

一.什么是表單驗證?

? ? 表單驗證是JavaScript的高級選項之一.我們可以通過JavaScript在網(wǎng)頁中對即將送往服務器的HTML表單中的輸入數(shù)據(jù)進行驗證.如果所輸入內(nèi)容與所需不符,我們就在頁面中進行提示.這樣就使得我們不用頻繁的與服務器進行交互,減少了IO的頻率,提高了效率.

二.表單驗證需求分析

在表單驗證中,我們通常使用如下的驗證功能:

驗證用戶名與密碼為指定格式
- 在驗證用戶名與密碼時,我們通常驗證用戶名與密碼不能為空,用戶名和密碼必須在指定長度范圍內(nèi),用戶名和密碼由數(shù)字和字母組成(使用正則表達式)等等
驗證單選框所選內(nèi)容
- 最常見的驗證單選框就是驗證性別
驗證多選框
- 如驗證愛好等

三.表單驗證所需事件

我們在進行表單驗證時通常只會用到如下幾個事件:

onsubmit(提交表單),onclick(點擊事件),onfocus(焦點聚集事件),onblur(焦點離開事件)

在上述幾個事件中,onsubmit()事件比較特殊,它是在我們提交表單時才會觸發(fā).這使得我們在進行表單驗證時有兩種主要的方式:
- 1.在輸入完成所有表單內(nèi)容后點擊提交按鈕統(tǒng)一進行驗證
- 2.通過對每一個表單元素分別添加事件進行單獨驗證

四.表單驗證代碼示例

首先我們使用onsubmit()與onclick()事件進行統(tǒng)一提交驗證:
<!DOCTYPE html> <html><head><meta charset="utf-8"><title></title><script type="text/javascript">//驗證賬號及密碼function subForm(){var account = document.getElementById("accId").value;var password = document.getElementById("pswId").value;if(account.length<5 || account.length>14){document.getElementById("spId1").innerHTML="賬號應在5-14位之間!";return false;}else if(password.length<=0 || password.length>12){document.getElementById("spId2").innerHTML="密碼應在0-12位之間!";return false;} return true;}</script></head><body><form action="success.html" method="get" onsubmit="return subForm()">賬號<input type="text" name="account" id="accId"/><span id="spId1"></span><br />密碼<input type="password" name="password" id="pswId" /><span id="spId2"></span><br /><input type="submit" value="保存"/></form></body> </html> ?
- 驗證的效果圖如下:
接下來我們示例對單獨表單元素的驗證:

<!DOCTYPE html> <html><head><meta charset="utf-8"><title></title><script type="text/javascript">//驗證賬號及密碼window.onload=function(){var account = document.getElementById("accId");var password = document.getElementById("pswId");//驗證用戶名,失去焦點進行驗證account.onblur=function(){if(account.value.length<4 || account.value.length>16){document.getElementById("spId1").innerHTML="賬號應在4-16位之間!";}}}</script></head><body><form action="success.html" method="get">賬號<input type="text" name="account" id="accId"/><span id="spId1"></span><br />密碼<input type="password" name="password" id="pswId" /><span id="spId2"></span><br /><input type="submit" value="保存"/></form></body> </html>

驗證的效果圖如下: ?

五.表單驗證的實例

? ? 接下來我們完成的展示使用注冊表單進行驗證

首先是html部分:

<body><form class="c3" method="get"><table width="500px"><tr class="c1"><td >歡迎注冊</td></tr><tr class="c2"><td >用戶名:<input type="text" name="account" id="accId"><span id="spaccid"></span></td></tr><tr class="c2"><td>密碼:<input type="text" name="password" id="pasId"><span id="sppasid"></span></td></tr><tr class="c2"><td>性別:<input type="radio" name="gender" value="男" id="gendId" checked="checked">男<input type="radio" name="gender" value="女">女<span id="spgendId"></span></td></tr><tr class="c2"><td>電話:<input type="text" ></td></tr><tr class="c2"><td>職業(yè):<select name="zhiye" id="zyId"><option value="01">程序員</option><option value="02">教師</option><option value="03">公務員</option></select></td></tr><tr class="c2"><td>愛好:<input type="checkbox" name="favorite" value="敲代碼" id="fav">敲代碼<input type="checkbox" name="favorite" value="打游戲" id="fav">打游戲<input type="checkbox" name="favorite" value="唱歌" id="fav">唱歌<input type="checkbox" name="favorite" value="運動" accept="application/msexcel"id="fav">運動<span id="spfavId"></span></td></tr><tr class="c2"><td>地址:<textarea rows="3" cols="25" name="address"></textarea></td></tr><tr class="c1"><td>填寫完成后點擊下面提交按鈕提交表單</td></tr><tr class="c2"><td><input type="button" value="提交" onclick="subForm()"><input type="reset"></td></tr></table></form></body>

接下來是css部分:

最后是JavaScript部分:

這里我們只使用提交驗證的方式對部分表單元素進行了驗證,感興趣的話可以將后續(xù)為進行驗證的表單元素,如: 電話,職業(yè),地址等進行驗證.

驗證效果圖如下:

總結

以上是生活随笔為你收集整理的JavaScript表单验证的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。