1、步驟分析
第一步：確定事件(onsubmit)并為其綁定一個(gè)函數(shù)
第二步：書寫這個(gè)函數(shù)(獲取用戶輸入的數(shù)據(jù)<獲取數(shù)據(jù)時(shí)需要在指定位置定義一個(gè) id>)
第三步：對(duì)用戶輸入的數(shù)據(jù)進(jìn)行判斷
第四步：數(shù)據(jù)合法(讓表單提交)
第五步：數(shù)據(jù)非法(給出錯(cuò)誤提示信息，不讓表單提交)
問題：如何控制表單提交？
關(guān)于事件 onsubmit：一般用于表單提交的位置，那么需要在定義函數(shù)的時(shí)候給出一個(gè) 返回值。
onsubmit = return checkForm()
2、完成注冊(cè)頁面表單校驗(yàn)
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>注冊(cè)頁面</title> <script> function checkForm(){ //alert("aa"); /**校驗(yàn)用戶名*/ //1.獲取用戶輸入的數(shù)據(jù) var uValue=document.getElementById("user").value; //alert(uValue); if(uValue==""){ //2.給出錯(cuò)誤提示信息 alert("用戶名不能為空"); return false; } /**校驗(yàn)密碼*/ var pValue=document.getElementById("password").value; if(pValue==""){ //注意空的表示方法 alert("密碼不能為空"); return false; } /** 校驗(yàn)確認(rèn)密碼*/ var rpValue=document.getElementById("repassword").value; if(rpValue!=pValue){ alert("兩次密碼輸入不一致！"); return false; } /**校驗(yàn)郵箱*/ var eValue=document.getElementById("email").value; if(！/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/.test(eValue)){ alert("郵箱格式不正確！"); } } </script> </head> <body> <table border="1px" align="center" width="1300px" cellpadding="0px" cellspacing="0px"> <!--1.logo部分--> <tr> <td> <!--嵌套一個(gè)一行三列的表格--> <table border="1px" width="100%"> <tr height="50px"> <td width="33.3%"> <img src="../img/logo2.png" height="47px" /> </td> <td width="33.3%"> <img src="../img/header.png" height="47px"/> </td> <td width="33.3%"> <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >登錄</a> <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >注冊(cè)</a> <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >購物車</a> </td> </tr> </table> </td> </tr> <!--2.導(dǎo)航欄部分--> <tr height="50px" > <td bgcolor="black"> <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><font size="3" color="white">首頁</font></a> <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><font color="white">手機(jī)數(shù)碼</font></a> <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><font color="white">電腦辦公</font></a> <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><font color="white">鞋靴箱包</font></a> <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><font color="white">家用電器</font></a> </td> </tr> <!--3.注冊(cè)表單--> <tr> <td height="600px" background="../img/regist_bg.jpg"> <!--嵌套一個(gè)十行二列的表格--> <form action="#" method="get" name="regForm" onsubmit="return checkForm()"> <table border="1px" width="750px" height="400px" align="center" cellpadding="0px" cellspacing="0px" bgcolor="white"> <tr height="40px"> <td colspan="2"> <font size="4">會(huì)員注冊(cè)</font> USER REGISTER </td> </tr> <tr> <td>用戶名</td> <td> <input type="text" name="user" size="35px" id="user"/> </td> </tr> <tr> <td>密碼</td> <td> <input type="password" name="password" size="35px" id="password"/> </td> </tr> <tr> <td>確認(rèn)密碼</td> <td> <input type="password" name="repassword" size="35px" id="repassword"/> </td> </tr> <tr> <td>E-mail</td> <td> <input type="text" name="e-mail" size="35px" id="email"/> </td> </tr> <tr> <td>姓名</td> <td> <input type="text" name="username" size="35px"/> </td> </tr> <tr> <td>性別</td> <td> <input type="radio" name="sex" value="男"/>男 <input type="radio" name="sex" value="女"/>女 </td> </tr> <tr> <td>出生日期</td> <td> <input type="text" name="birthday" size="35px"/> </td> </tr> <tr> <td>驗(yàn)證碼</td> <td> <input type="text" name="yzm" /> <img src="../img/yanzhengma.png" /> </td> </tr> <tr align="center"> <td colspan="2"> <input type="submit" value="注冊(cè)" /> </td> </tr> </table> </form> </td> </tr> <!--4.廣告圖片--> <tr> <td> <img src="../img/footer.jpg" width="100%"/> </td> </tr> <!--5.友情鏈接和版權(quán)信息--> <tr> <td align="center"> <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><font>關(guān)于我們</font></a> <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><font>聯(lián)系我們</font></a> <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><font>招賢納士</font></a> <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><font>法律聲明</font></a> <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><font>友情鏈接</font></a> <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><font>支付方式</font></a> <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><font>配送方式</font></a> <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><font>服務(wù)聲明</font></a> <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><font>廣告聲明</font></a> <p> Copyright © 2005-2016 hh商城 版權(quán)所有 </p> </td> </tr> </table> </body></html>在校驗(yàn)確認(rèn)密碼這部分使用了正則表達(dá)式（不需要記憶，需要時(shí)查找文檔）
正則式.test(校驗(yàn)對(duì)象)為真表示符合條件，為假則不符合。
以上這篇JavaScript 完成注冊(cè)頁面表單校驗(yàn)的實(shí)例就是小編分享給大家的全部內(nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持武林網(wǎng)。
新聞熱點(diǎn)
疑難解答
圖片精選
網(wǎng)友關(guān)注
