JavaScript 完成注冊頁面表單校驗(yàn)的實(shí)例
更新時(shí)間：2017年08月19日 09:37:13 投稿：jingxian
下面小編就為大家?guī)硪黄狫avaScript 完成注冊頁面表單校驗(yàn)的實(shí)例。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
1、步驟分析
第一步：確定事件(onsubmit)并為其綁定一個(gè)函數(shù)
第二步：書寫這個(gè)函數(shù)(獲取用戶輸入的數(shù)據(jù)<獲取數(shù)據(jù)時(shí)需要在指定位置定義一個(gè) id>)
第三步：對用戶輸入的數(shù)據(jù)進(jìn)行判斷
第四步：數(shù)據(jù)合法(讓表單提交)
第五步：數(shù)據(jù)非法(給出錯(cuò)誤提示信息，不讓表單提交)
問題：如何控制表單提交？
關(guān)于事件 onsubmit：一般用于表單提交的位置，那么需要在定義函數(shù)的時(shí)候給出一個(gè) 返回值。
onsubmit = return checkForm()
2、完成注冊頁面表單校驗(yàn)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>注冊頁面</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" >注冊</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.注冊表單-->
<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">會員注冊</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="注冊" />
</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)對象)為真表示符合條件，為假則不符合。
以上這篇JavaScript 完成注冊頁面表單校驗(yàn)的實(shí)例就是小編分享給大家的全部內(nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
您可能感興趣的文章:
- js前端設(shè)計(jì)模式優(yōu)化50%表單校驗(yàn)代碼示例
- js實(shí)現(xiàn)表單校驗(yàn)功能
- 從表單校驗(yàn)看JavaScript策略模式的使用詳解
- Vue.js + Nuxt.js 項(xiàng)目中使用 Vee-validate 表單校驗(yàn)
- 使用JavaScript進(jìn)行表單校驗(yàn)功能
- Angularjs使用指令做表單校驗(yàn)的方法
- AngularJs表單校驗(yàn)功能實(shí)例代碼
- AngularJS入門教程之表單校驗(yàn)用法示例
- Vue.js 表單校驗(yàn)插件
- JS實(shí)現(xiàn)注冊界面表單校驗(yàn)
相關(guān)文章
這篇文章主要介紹了小程序分頁實(shí)踐之編寫可復(fù)用分頁組件，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-07-07
NW.js （原名 node-webkit）是一個(gè)基于 Chromium 和 node.js 的應(yīng)用運(yùn)行時(shí)，通過它可以用 HTML 和 JavaScript 編寫原生應(yīng)用程序.這篇文章主要介紹了NW.js 簡介與使用,需要的朋友可以參考下2018-02-02
下面小編就為大家?guī)硪黄仙Ｕ刯s中的MVC。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-07-07
TextArea設(shè)置MaxLength屬性最大輸入值的js代碼
TextArea中限制最大輸入長度,實(shí)現(xiàn)的方法種種，我們不在一一介紹，今天本文推薦一種簡單實(shí)用的方法，需要的朋友可以參考下2012-12-12
這篇文章主要為大家詳細(xì)介紹了js自定義彈框插件的簡單封裝，自己封裝一個(gè)彈框插件，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-07-07
Javascript中valueOf與toString區(qū)別淺析
Javascript中valueOf與toString區(qū)別淺析，需要的朋友可以參考一下2013-03-03
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)多行文字滾動(dòng)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-11-11
JS自動(dòng)跳轉(zhuǎn)手機(jī)移動(dòng)網(wǎng)頁的實(shí)現(xiàn)方法
本文主要介紹了JS自動(dòng)跳轉(zhuǎn)手機(jī)移動(dòng)網(wǎng)頁的實(shí)現(xiàn)方法,可以通過檢查 navigator.userAgent 屬性來識別用戶代理字符串中包含的設(shè)備信息,下面就詳細(xì)的來介紹一下具體用法,感興趣的可以了解一下2024-03-03
Javascript調(diào)試之console對象——你不知道的一些小技巧
這篇文章主要總結(jié)了console對象的一些有用的方法，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友參考下吧2017-07-07
這篇文章主要介紹了微信小程序調(diào)用后臺service教程詳解,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-11-11