快捷導(dǎo)航

JavaScript 完成注冊(cè)頁(yè)面表單校驗(yàn)的實(shí)例

更新時(shí)間：2017年08月19日 09:37:13 投稿：jingxian

下面小編就為大家?guī)?lái)一篇JavaScript 完成注冊(cè)頁(yè)面表單校驗(yàn)的實(shí)例。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧

1、步驟分析

第一步：確定事件(onsubmit)并為其綁定一個(gè)函數(shù)

第二步：書(shū)寫(xiě)這個(gè)函數(shù)(獲取用戶輸入的數(shù)據(jù)<獲取數(shù)據(jù)時(shí)需要在指定位置定義一個(gè) id>)

第三步：對(duì)用戶輸入的數(shù)據(jù)進(jìn)行判斷

第四步：數(shù)據(jù)合法(讓表單提交)

第五步：數(shù)據(jù)非法(給出錯(cuò)誤提示信息，不讓表單提交)

問(wèn)題：如何控制表單提交？

關(guān)于事件 onsubmit：一般用于表單提交的位置，那么需要在定義函數(shù)的時(shí)候給出一個(gè) 返回值。

onsubmit = return checkForm()

2、完成注冊(cè)頁(yè)面表單校驗(yàn)

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title>注冊(cè)頁(yè)面</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" >購(gòu)物車(chē)</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">首頁(yè)</font></a>&nbsp; &nbsp; &nbsp; &nbsp;    
     <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> &nbsp; &nbsp; &nbsp; &nbsp;
     <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>&nbsp; &nbsp; &nbsp; &nbsp;
     <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>&nbsp; &nbsp; &nbsp; &nbsp;
     <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>&nbsp;&nbsp;&nbsp;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è)面表單校驗(yàn)的實(shí)例就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: