js簡單實現(xiàn)用戶注冊信息的校驗代碼
register.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>用戶注冊</title>
<style type="text/css">
@import "css/userRegister.css";
</style>
</head>
<body id="BODY">
<div id="DIV_FORM">
<form method="post" action="url" >
<table id="TABLE">
<tbody>
<tr>
<td>用戶名：</td>
<td>
<input name="username" id="USERNAME" type="text" onfocus="showDesc(this)" onblur="checkText(this)"/>
</td>
</tr>
<tr>
<td>密碼：</td>
<td>
<input name="password" id="PASSWORD" type="text" onfocus="showDesc(this)" onblur="checkText(this)"/>
</td>
</tr>
<tr>
<td>確認密碼：</td>
<td>
<input name="password2" id="PASSWORD2" type="text" onfocus="showDesc(this)" onblur="checkText(this)"/>
</td>
</tr>
<tr>
<td>身份證號：</td>
<td>
<input name="IDNumber" id="IDNUMBER" type="text" onfocus="showDesc(this)" onblur="checkText(this)"/>
</td>
</tr>
<tr>
<td>電話號碼：</td>
<td>
<input name="phoneNumber" id="PHONENUMBER" type="text" onfocus="showDesc(this)" onblur="checkText(this)"/>
</td>
</tr>
<tr>
<td>Email：</td>
<td>
<input name="email" id="EMAIL" type="text" onfocus="showDesc(this)" onblur="checkText(this)"/>
</td>
</tr>
<tr>
<td> </td>
<td align="right">
<input type="submit" value="確認提交" />
</td>
</tr>
</tbody>
</table>
<table id="TABLE2" border="0">
<tr><td><span id="username">請輸入用戶名</span></td></tr>
<tr><td><span id="password">請輸入密碼</span></td></tr>
<tr><td><span id="password2">請再次輸入密碼</span></td></tr>
<tr><td><span id="IDNumber">請輸入身份證號碼</span></td></tr>
<tr><td><span id="phoneNumber">請輸入電話號碼</span></td></tr>
<tr><td><span id="email">請輸入郵箱地址</span></td></tr>
</table>
</form>
</div>
<script type="text/javascript" src="jslib/registerCheck.js">
</script>
</body>
</html>
registerCheck.js
//輸入框獲得焦點時，顯示提示內(nèi)容
function showDesc(obj)
{
var id= obj.name;
document.getElementById(id).style.display="inline";
}
//輸入框失去焦點時檢驗輸入內(nèi)容是否有效
function checkText(obj)
{
//獲取輸入框的id值
var id= obj.name;
var text=document.getElementById(id.toString().toUpperCase()).value;
//判斷是否為空
if(text.replace(/\s/g, "")=="")
{
document.getElementById(id).innerHTML="輸入不能為空";
}
else
{
//組裝方法
//取首字母轉(zhuǎn)換為大寫,其余不變
var firstChar=id.charAt(0).toString().toUpperCase();
//
var strsub=id.substring(1,id.length);
var strMethod="check"+firstChar+strsub+"()";
var isTrue = eval(strMethod);
if(isTrue)
{
document.getElementById(id).innerHTML="輸入有效";
}
}
}
function checkUsername()
{
//只簡單的判斷用戶名的長度
var id = document.getElementById("USERNAME");
var username=id.value;
if(username.length > 10)
{
document.getElementById(id.name).innerHTML = "輸入的用戶名過長";
return false;
}
else
return true;
}
function checkPassword()
{
var password = document.getElementById("PASSWORD").value;
return true;
}
function checkPassword2()
{
var id=document.getElementById("PASSWORD");
var id2=document.getElementById("PASSWORD2");
var password = id.value;
var password2 = id2.value;
if(password!=password2)
{
document.getElementById(id.name).innerHTML="密碼不一致";
return false;
}
return true;
}
function checkIDNumber()
{
var id=document.getElementById("IDNUMBER");
var IDNumber =id.value;
if(IDNumber.length<18||IDNumber.length>19)
{
document.getElementById(id.name).innerHTML="身份證號長度有誤";
return false;
}
var expr=/([0]{18}[x|y]?)|([1]{18}[x|y]?)/i;
if(expr.test(IDNumber))
{
document.getElementById(id.name).innerHTML="身份證號不可以全'0'或全'1'";
return false;
}
return true;
}
function checkPhoneNumber()
{
// 利用正則表達式對輸入數(shù)據(jù)匹配
var id=document.getElementById("PHONENUMBER");
var phone = id.value;
//匹配到一個非數(shù)字字符，則返回false
var expr = /\D/i;
if(expr.test(phone))
{
document.getElementById(id.name).innerHTML="不能輸入非數(shù)字字符";
return false;
}
return true;
}
function checkEmail()
{
// 利用正則表達式對輸入數(shù)據(jù)匹配
var id = document.getElementById("EMAIL")
var email = id.value;
//以字母或數(shù)字開頭，跟上@,字母數(shù)字以.com結(jié)尾
var expr = /^([0-9]|[a-z])+@([0-9]|[a-z])+(\.[c][o][m])$/i;
if(!expr.test(email))
{
document.getElementById(id.name).innerHTML="輸入的郵箱格式有誤";
return false;
}
return true;
}
CSS
@charset "utf-8";
/* CSS Document */
#BODY{
text-align:center;
}
#TABLE{
text-align:left;
margin: auto;
float:left;
}
#DIV_FORM{
margin-left:300px;
}
#TABLE2{
text-align:left;
width:150px;
height:150px;
}
#TABLE2 tr
{
height:24px;
}
#TABLE2 span{
display:none;
}
相關(guān)文章
uni-app的h5頁面中onHide/onUnload方法不觸發(fā)的問題解決方法
uni-app的頁面的生命周期包括onInit、onLoad、onShow、onReady、onHide和onUnload等幾個階段,這篇文章主要給大家介紹了關(guān)于uni-app的h5頁面中onHide/onUnload方法不觸發(fā)的問題解決方法,需要的朋友可以參考下2023-12-12
理清apply(),call()的區(qū)別和關(guān)系
如果沒接觸過動態(tài)語言,以編譯型語言的思維方式去理解javaScript將會有種神奇而怪異的感覺,因為意識上往往不可能的事偏偏就發(fā)生了,甚至覺得不可理喻.2011-08-08
JS實現(xiàn)鏈表數(shù)據(jù)結(jié)構(gòu)的代碼詳解
很多前端的同學(xué)對數(shù)據(jù)結(jié)構(gòu)和算法這塊沒有太多的概念,很多l(xiāng)eetcode的題目看不懂,有時候可能看了題解也不知道是什么意思,這篇文章咱們來簡單的談一談鏈表,文中給大家介紹了JS實現(xiàn)鏈表數(shù)據(jù)結(jié)構(gòu)的示例代碼,需要的朋友可以參考下2024-01-01
這篇文章主要介紹了按鈕接受回車事件的三種實現(xiàn)方法,需要的朋友可以參考下2014-06-06
js?fill函數(shù)填充數(shù)組或?qū)ο蟮慕鉀Q方法
這篇文章主要介紹了js?fill函數(shù)填充數(shù)組或?qū)ο蟮膯栴}及解決方法，本文給大家介紹的非常詳細對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-02-02
我們不得面對這樣一個事實：許多程序員不會規(guī)劃他們的JS代碼。我們經(jīng)?？焖賹懲甏a、運行、提交。但當我們繼續(xù)開發(fā)遇到變量和函數(shù)時不得不再次回頭查看它們代表的含義，麻煩就從這里開始了。2013-04-04
TypeScript 憑借其強大的類型系統(tǒng),提供了一項稱為泛型的功能,它使開發(fā)人員能夠編寫可重用和類型安全的代碼,泛型允許您創(chuàng)建可以處理多種類型（而不是單個類型）的組件,本文深入探討了 TypeScript 泛型,提供了詳盡的解釋和代碼示例來說明它們的用法和好處2024-02-02
JS數(shù)組實現(xiàn)分類統(tǒng)計實例代碼
本文通過實例代碼給大家介紹了js數(shù)組實現(xiàn)分類統(tǒng)計的相關(guān)知識，非常不錯，具有一定的參考借鑒價值,需要的朋友可以參考下2018-09-09
網(wǎng)站登錄為了更好的用戶體驗都會在輸入密碼的時候檢測是否開啟大寫，這樣有助于提醒用戶,需要學(xué)習(xí)的朋友可以參考下2012-12-12
這篇文章主要介紹了Bootstrap下拉菜單實例代碼的相關(guān)知識，非常不錯，具有參考借鑒價值，感興趣的朋友一起學(xué)習(xí)吧2016-06-06