當(dāng)前位置：首頁 > 前端技术 > javascript >内容正文

javascript

JS学习——表单验证

發(fā)布時(shí)間：2023/12/20 javascript 39 豆豆

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

JS(JavaScript),最先聽到的時(shí)候以為是和java一樣，必須要學(xué)的，但是后來接觸到后，才發(fā)現(xiàn)是不一樣的，JS一種屬于網(wǎng)絡(luò)的高級腳本語言,已經(jīng)被廣泛用于Web應(yīng)用開發(fā),常用來為網(wǎng)頁添加各式各樣的動態(tài)功能,為用戶提供更流暢美觀的瀏覽效果（來源百度百科）。

本文主要是講將JS如何嵌入HTML中實(shí)現(xiàn)表單的驗(yàn)證，會簡單介紹下HTML、CSS、JS的內(nèi)容，以及正則表達(dá)式，由于筆者還是個(gè)初學(xué)者，所以不會很深入，很多地方也是有點(diǎn)模糊不清，不對之處，還望多多指教，覺得不錯(cuò)還請點(diǎn)個(gè)贊！

互聯(lián)網(wǎng)的三大基石

URL(Uniform Resource Location)：‘統(tǒng)一資源定位符’–相當(dāng)于定位信號
HTTP(HyperText Transfer Protocol)：‘超文本傳輸協(xié)議’
HTML(Hyper Text Markup Language）：’超文本標(biāo)記語言‘

HTML、CSS及JavaScript的關(guān)系

HTML是網(wǎng)頁的網(wǎng)頁信息規(guī)范化展示的語言，也可以說是網(wǎng)頁的骨架。
CSS是層疊樣式表，如果說HTML是一個(gè)骨架的話，那CSS就是一件件衣服，裝飾在骨架上。
JavaScript是一種具有函數(shù)優(yōu)先的輕量級，解釋型或即時(shí)編譯型的編程語言，作為web頁面腳步而出名，可以說沒有JS的網(wǎng)頁是沒有靈魂的，因?yàn)镠TML和CSS是很難實(shí)現(xiàn)動態(tài)網(wǎng)頁的效果的，無法實(shí)現(xiàn)交互

本文實(shí)現(xiàn)功能

能夠?qū)崿F(xiàn)基本的表單驗(yàn)證，驗(yàn)證基礎(chǔ)的表單格式

HTML實(shí)現(xiàn)form表單

HTML的實(shí)現(xiàn)十分簡單，語法簡單易懂，容易上手，這里推薦學(xué)習(xí)w3school在線教程：
里面有關(guān)于HTML的一切。
從實(shí)現(xiàn)效果上看form表單中，需要有我們的input標(biāo)簽，還有我們的span標(biāo)簽，布局我們可以用table表格標(biāo)簽或者ul無序列表等，但是相對于我們想實(shí)現(xiàn)的功能table布局會更簡單。
這里不多加贅述，源碼在后面。

JavaScript實(shí)現(xiàn)動態(tài)驗(yàn)證

JS中DOM元素

文檔對象模型 (DOM) 是HTML和XML文檔的編程接口。它提供了對文檔的結(jié)構(gòu)化的表述，并定義了一種方式可以使從程序中對該結(jié)構(gòu)進(jìn)行訪問，從而改變文檔的結(jié)構(gòu)，樣式和內(nèi)容。
簡單點(diǎn)講，DOM提供了我們通過JS操作HTML節(jié)點(diǎn)元素的方法

通過 id 查找 HTML 元素
通過標(biāo)簽名查找 HTML 元素
通過類名查找 HTML 元素
通過 CSS 選擇器查找 HTML 元素
通過 HTML 對象集合查找 HTML 元素

下面只講解id的操作

var uid=document.getElementById(id); 這里我們可以獲得相應(yīng)id的對象賦予uid,接下來我們就可以對這個(gè)id所處的對象進(jìn)行操作了

還有其他相對應(yīng)的方法，具體可以查閱W3C的相關(guān)文檔。

正則表達(dá)式

我們實(shí)現(xiàn)用戶名驗(yàn)證，規(guī)定用戶名和密碼格式時(shí)，是不是有時(shí)候會需要一定的格式，比如只能輸入3到5個(gè)漢字，密碼必須在4-6位數(shù)字之間，還有郵件的格式等等，再到后面我們想學(xué)習(xí)爬蟲，都是需要用到正則表達(dá)式

^[\u4e00-\u9fa5]{m,n}$ 校驗(yàn)漢字在m-n位之間，\u4e00-\u9fa5是用來判斷是不是中文的一個(gè)條件 ^\d{m}$ 數(shù)字校驗(yàn)，{m}是檢驗(yàn)數(shù)字長度是不是為m,{m,n}檢驗(yàn)數(shù)字長度在不在m到n之間 /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/ 郵箱驗(yàn)證

以上便是本文用到的三種正則化表達(dá)式，以前學(xué)習(xí)的時(shí)候都不知道正則化的作用，隨著學(xué)習(xí)的深入越發(fā)覺得強(qiáng)大，在這里再給大家推薦一篇博文，里面總結(jié)了大量的正則化表達(dá)式，十分有用。

JS如何應(yīng)用正則化表達(dá)式

reg=/^[\u4e00-\u9fa5]{3,5}$/ JS引用格式即/正則表達(dá)式/ reg.test(value) test()測試方法，會驗(yàn)證vale里面的東西是否符合正則表達(dá)式，是返回ture, 否返回False

JS如何生成隨機(jī)驗(yàn)證碼

JS中的Math對象，用于執(zhí)行數(shù)學(xué)任務(wù)。
Math.random 會返回0-1之間的隨機(jī)數(shù)，這里我們要清楚我們需要的是4位驗(yàn)證碼，所以0-1想化為四位數(shù)，就要乘以10000,然后再向下取整，但是如果乘以10000，會有個(gè)問題，我隨機(jī)生成的是0.045849怎么辦，就算乘以10000也只是三位數(shù)，不符合我們的要求，那么為了保證一直為4位數(shù)，我們可以乘以9000后+1000，這樣即使生成的是0.001，0.001*9000+1000=1009，無論怎樣都能保證生成的是四位隨機(jī)數(shù)。

function YZM(){// 四位隨機(jī)整數(shù)var ran=Math.floor(Math.random()*9000+1000);//獲得span對象var span=document.getElementById("yzm_span");span.innerText=ran; }

JS驗(yàn)證用戶名和密碼

這里的語法很簡單，可以通過備注來實(shí)現(xiàn)，后續(xù)的幾個(gè)驗(yàn)證也是大同小異

JS同意協(xié)議后方可注冊

最后的注冊按鈕有一個(gè)特別的屬性disabled，有一個(gè)禁用輸入字段的 HTML 表單，當(dāng)它為”true“或者"disabled"時(shí)，按鈕成灰色的，無法注冊，我們需要通過操作節(jié)點(diǎn)改變他的屬性來實(shí)現(xiàn)這個(gè)功能

function checkAgree(){ var check=document.getElementById("check");var sub=document.getElementById("sub"); sub.disabled=!check.checked; }

JS表單提交后驗(yàn)證表單，判斷是否阻止表單提交

我們需要再提交表單時(shí)驗(yàn)證程序，可以onsubmit屬性，這樣我們點(diǎn)擊提交時(shí)會執(zhí)行zong方法（我書寫的驗(yàn)證表單的方法），依據(jù)返回的ture和false判斷是否提交表單。

zong(方法)調(diào)用所有表單驗(yàn)證方法，只要有一個(gè)為false則返回false

function zong(){ var flag=checkName()&&checkPwd()&&checkPhone()&&checkEmail()&&checkSex()&&checkFav()&&checkAdress()&&checkYZM(); return flag;}

全部代碼

<!DOCTYPE html> <html><head><meta charset="utf-8"><title></title><script type="text/javascript">/*驗(yàn)證碼生成*/function YZM(){// 四位隨機(jī)整數(shù)var ran=Math.floor(Math.random()*9000+1000);//獲得span對象var span=document.getElementById("yzm_span");span.innerText=ran; }// 校驗(yàn)用戶名方法function check(id,reg){var uid=document.getElementById(id);var value=uid.value;var alt=uid.alt;var span=document.getElementById(id+"_span");if (reg.test(value)){span.innerText=alt+"合法";span.style.color="green"; return true;} else{span.innerText=alt+"不合法";span.style.color="red";return false;}}/********用戶名檢驗(yàn)**********/ function checkName(){var reg=/^[\u4e00-\u9fa5]{3,5}$/;return check("uname",reg);}/********密碼檢驗(yàn)**********/ function checkPwd(){var reg=/^\d{3,6}$/;return check("pwd",reg);}/********手機(jī)號檢驗(yàn)**********/ function checkPhone(){var reg=/^\d{11}$/;return check("phone",reg);}/********郵箱檢驗(yàn)**********/ function checkEmail(){var reg=/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;return check("email",reg);}/********性別檢驗(yàn)**********/ function checkSex(){return checkSex_Fav('sex')}function checkFav(){return checkSex_Fav('fav')}function checkSex_Fav(name){//獲得所有性別對象var uname=document.getElementsByName(name);//獲得span對象var span=document.getElementById(name+"_span");for(var i in uname){if(uname[i].checked){span.innerHTML="選擇成功";span.style.color="green"return true;}}span.innerHTML="請選擇";span.style.color="red";return false;}/********籍貫檢驗(yàn)**********/function checkAdress(){var value=document.getElementById("sel").value;var span=document.getElementById("sel_span");if (value!=0){span.innerText="籍貫選擇成功";span.style.color="green";return true;}else{span.innerText="籍貫未選擇";span.style.color="red";return false;}}/********驗(yàn)證碼檢驗(yàn)**********/function checkYZM(){var value=document.getElementById("yzm").value;var span=document.getElementById("yzm_span");var span2=document.getElementById("yzm2_span");if(value==span.innerText){span2.innerText="驗(yàn)證碼輸入正確";span2.style.color="green";return true;}else{span2.innerText="驗(yàn)證碼輸入錯(cuò)誤";span2.style.color="red";YZM();return false;}}/********是否同意協(xié)議**********/function checkAgree(){var check=document.getElementById("check");var sub=document.getElementById("sub");sub.disabled=!check.checked;}/********校驗(yàn)表單**********/function zong(){var flag=checkName()&&checkPwd()&&checkPhone()&&checkEmail()&&checkSex()&&checkFav()&&checkAdress()&&checkYZM();return flag;}</script></head><body onload="YZM()"><center><h3>注冊頁面</h3><hr /><form action="" method="get" onsubmit="return zong()"><table><tr height="35px"><td width="150px">用戶名：</td><td width="400px"><input type="text" name="uname" id="uname" value="" alt="用戶名" onblur="checkName()"/><span id="uname_span">*用戶名必須是3-5位的漢字</span></td></tr><tr height="35px"><td>密碼：</td><td><input type="password" name="pwd" id="pwd" value="" alt="密碼" onblur="checkPwd()"/><span id="pwd_span"></span></td></tr><tr height="35px"><td>手機(jī)號：</td><td><input type="text" name="phone" id="phone" value="" alt="手機(jī)號" onblur="checkPhone()"/><span id="phone_span"></span></td></tr><tr height="35px"><td>郵箱：</td><td><input type="text" name="email" id="email" value="" alt="郵箱" onblur="checkEmail()" /><span id="email_span"></span></td></tr><tr height="35px"><td>性別：</td><td>男：<input type="radio" name="sex" id="" value="1" onclick="checkSex()"/>女：<input type="radio" name="sex" id="" value="0" onclick="checkSex()"/><span id="sex_span"></span></td></tr><tr height="35px"><td>愛好：</td><td><input type="checkbox" name="fav" id="" value="1" onclick="checkFav()"/>唱歌<input type="checkbox" name="fav" id="" value="2" onclick="checkFav()"/>睡覺<input type="checkbox" name="fav" id="" value="3" onclick="checkFav()"/>LOL<br /><input type="checkbox" name="fav" id="" value="4" onclick="checkFav()"/>旅游<input type="checkbox" name="fav" id="" value="5" onclick="checkFav()"/>高爾夫<input type="checkbox" name="fav" id="" value="6" onclick="checkFav()"/>籃球<span id="fav_span"></span></td></tr><tr height="35px"><td>籍貫：</td><td><select name="adress" id="sel" onchange="checkAdress()"><option value="0">--請選擇--</option><option value="1">河南</option><option value="2">湖南</option><option value="3">海南</option><option value="4">云南</option></select><span id="sel_span"></span></td></tr><tr height="35px"><td>驗(yàn)證碼</td><td><input type="number" name="" id="yzm" value="" onblur="checkYZM()"/><span id="yzm_span"></span><span id="yzm2_span"></span></td></tr><tr height="35px"><td>個(gè)人介紹：</td><td><textarea name="intro" rows="8" cols="30"></textarea></td></tr><tr height="35px"><td colspan="2" align="center"><input type="checkbox" name="" id="check" value="" onclick="checkAgree()">是否同意本公司協(xié)議</td></tr><tr height="35px"><td colspan="2" align="center"><input type="submit" id="sub" value="注冊" disabled="true" /></td></tr></table></form></center></body> </html>

簡單的表單驗(yàn)證已經(jīng)做完了，大家能給個(gè)贊鼓勵(lì)下嗎！！！

總結(jié)

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

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

表单
js

上一篇： 2013职称计算机试题,2013年职称计
下一篇： Spring系列(六) Spring W