javascript
JS学习——表单验证
JS(JavaScript),最先聽到的時候以為是和java一樣，必須要學的，但是后來接觸到后，才發現是不一樣的，JS一種屬于網絡的高級腳本語言,已經被廣泛用于Web應用開發,常用來為網頁添加各式各樣的動態功能,為用戶提供更流暢美觀的瀏覽效果（來源百度百科）。
本文主要是講將JS如何嵌入HTML中實現表單的驗證，會簡單介紹下HTML、CSS、JS的內容，以及正則表達式，由于筆者還是個初學者，所以不會很深入，很多地方也是有點模糊不清，不對之處，還望多多指教，覺得不錯還請點個贊！
互聯網的三大基石
URL(Uniform Resource Location)：‘統一資源定位符’–相當于定位信號
HTTP(HyperText Transfer Protocol)：‘超文本傳輸協議’
HTML(Hyper Text Markup Language）：’超文本標記語言‘
HTML、CSS及JavaScript的關系
HTML是網頁的網頁信息規范化展示的語言，也可以說是網頁的骨架。
CSS是層疊樣式表，如果說HTML是一個骨架的話，那CSS就是一件件衣服，裝飾在骨架上。
JavaScript是一種具有函數優先的輕量級，解釋型或即時編譯型的編程語言，作為web頁面腳步而出名，可以說沒有JS的網頁是沒有靈魂的，因為HTML和CSS是很難實現動態網頁的效果的，無法實現交互
本文實現功能
能夠實現基本的表單驗證，驗證基礎的表單格式
HTML實現form表單
HTML的實現十分簡單，語法簡單易懂，容易上手，這里推薦學習w3school在線教程：
里面有關于HTML的一切。
從實現效果上看form表單中，需要有我們的input標簽，還有我們的span標簽，布局我們可以用table表格標簽或者ul無序列表等，但是相對于我們想實現的功能table布局會更簡單。
這里不多加贅述，源碼在后面。
JavaScript實現動態驗證
JS中DOM元素
文檔對象模型 (DOM) 是HTML和XML文檔的編程接口。它提供了對文檔的結構化的表述，并定義了一種方式可以使從程序中對該結構進行訪問，從而改變文檔的結構，樣式和內容。
簡單點講，DOM提供了我們通過JS操作HTML節點元素的方法
- 通過 id 查找 HTML 元素
- 通過標簽名查找 HTML 元素
- 通過類名查找 HTML 元素
- 通過 CSS 選擇器查找 HTML 元素
- 通過 HTML 對象集合查找 HTML 元素
下面只講解id的操作
var uid=document.getElementById(id); 這里我們可以獲得相應id的對象賦予uid,接下來我們就可以對這個id所處的對象進行操作了還有其他相對應的方法，具體可以查閱W3C的相關文檔。
正則表達式
我們實現用戶名驗證，規定用戶名和密碼格式時，是不是有時候會需要一定的格式，比如只能輸入3到5個漢字，密碼必須在4-6位數字之間，還有郵件的格式等等，再到后面我們想學習爬蟲，都是需要用到正則表達式
^[\u4e00-\u9fa5]{m,n}$ 校驗漢字在m-n位之間，\u4e00-\u9fa5是用來判斷是不是中文的一個條件 ^\d{m}$ 數字校驗，{m}是檢驗數字長度是不是為m,{m,n}檢驗數字長度在不在m到n之間 /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/ 郵箱驗證以上便是本文用到的三種正則化表達式，以前學習的時候都不知道正則化的作用，隨著學習的深入越發覺得強大，在這里再給大家推薦一篇博文，里面總結了大量的正則化表達式，十分有用。
JS如何應用正則化表達式
reg=/^[\u4e00-\u9fa5]{3,5}$/ JS引用格式即/正則表達式/ reg.test(value) test()測試方法，會驗證vale里面的東西是否符合正則表達式，是返回ture, 否返回FalseJS如何生成隨機驗證碼
JS中的Math對象，用于執行數學任務。
Math.random 會返回0-1之間的隨機數，這里我們要清楚我們需要的是4位驗證碼，所以0-1想化為四位數，就要乘以10000,然后再向下取整，但是如果乘以10000，會有個問題，我隨機生成的是0.045849怎么辦，就算乘以10000也只是三位數，不符合我們的要求，那么為了保證一直為4位數，我們可以乘以9000后+1000，這樣即使生成的是0.001，0.001*9000+1000=1009，無論怎樣都能保證生成的是四位隨機數。
JS驗證用戶名和密碼
這里的語法很簡單，可以通過備注來實現，后續的幾個驗證也是大同小異
function check(id,reg){// 獲得id對象var uid=document.getElementById(id);// 獲得id對象中的value屬性和alt屬性var value=uid.value;var alt=uid.alt;// 獲得span對象，用于操作和提示信息var span=document.getElementById(id+"_span");// 簡單的邏輯判斷，是不是符合正則表達式if (reg.test(value)){// 對span里面的文本進行操作span.innerText=alt+"合法";// 對span里面的文本顏色進行操作span.style.color="green"; // 返回true，用于最后提交時的表單校驗return true;} else{span.innerText=alt+"不合法";span.style.color="red";return false;}}JS同意協議后方可注冊
最后的注冊按鈕有一個特別的屬性disabled，有一個禁用輸入字段的 HTML 表單，當它為”true“或者"disabled"時，按鈕成灰色的，無法注冊，我們需要通過操作節點改變他的屬性來實現這個功能
function checkAgree(){ var check=document.getElementById("check");var sub=document.getElementById("sub"); sub.disabled=!check.checked; }JS表單提交后驗證表單，判斷是否阻止表單提交
我們需要再提交表單時驗證程序，可以onsubmit屬性，這樣我們點擊提交時會執行zong方法（我書寫的驗證表單的方法），依據返回的ture和false判斷是否提交表單。
<form action="" method="get" onsubmit="return zong()">zong(方法)調用所有表單驗證方法，只要有一個為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">/*驗證碼生成*/function YZM(){// 四位隨機整數var ran=Math.floor(Math.random()*9000+1000);//獲得span對象var span=document.getElementById("yzm_span");span.innerText=ran; }// 校驗用戶名方法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;}}/********用戶名檢驗**********/ function checkName(){var reg=/^[\u4e00-\u9fa5]{3,5}$/;return check("uname",reg);}/********密碼檢驗**********/ function checkPwd(){var reg=/^\d{3,6}$/;return check("pwd",reg);}/********手機號檢驗**********/ function checkPhone(){var reg=/^\d{11}$/;return check("phone",reg);}/********郵箱檢驗**********/ function checkEmail(){var reg=/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;return check("email",reg);}/********性別檢驗**********/ 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;}/********籍貫檢驗**********/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;}}/********驗證碼檢驗**********/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="驗證碼輸入正確";span2.style.color="green";return true;}else{span2.innerText="驗證碼輸入錯誤";span2.style.color="red";YZM();return false;}}/********是否同意協議**********/function checkAgree(){var check=document.getElementById("check");var sub=document.getElementById("sub");sub.disabled=!check.checked;}/********校驗表單**********/function zong(){var flag=checkName()&&checkPwd()&&checkPhone()&&checkEmail()&&checkSex()&&checkFav()&&checkAdress()&&checkYZM();return flag;}</script></head><body onload="YZM()"><center><h3>注冊頁面</h3><hr /><!-- οnsubmit="return zong()" --><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>手機號：</td><td><input type="text" name="phone" id="phone" value="" alt="手機號" 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>驗證碼</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>個人介紹：</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()">是否同意本公司協議</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>簡單的表單驗證已經做完了，大家能給個贊鼓勵下嗎！！！
總結
以上是生活随笔為你收集整理的JS学习——表单验证的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 2013职称计算机试题,2013年职称计
- 下一篇： Spring系列(六) Spring W