js簡(jiǎn)單實(shí)現(xiàn)用戶注冊(cè)信息的校驗(yà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>用戶注冊(cè)</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>確認(rèn)密碼：</td>
<td>
<input name="password2" id="PASSWORD2" type="text" onfocus="showDesc(this)" onblur="checkText(this)"/>
</td>
</tr>
<tr>
<td>身份證號(hào)：</td>
<td>
<input name="IDNumber" id="IDNUMBER" type="text" onfocus="showDesc(this)" onblur="checkText(this)"/>
</td>
</tr>
<tr>
<td>電話號(hào)碼：</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="確認(rèn)提交" />
</td>
</tr>
</tbody>
</table>
<table id="TABLE2" border="0">
<tr><td><span id="username">請(qǐng)輸入用戶名</span></td></tr>
<tr><td><span id="password">請(qǐng)輸入密碼</span></td></tr>
<tr><td><span id="password2">請(qǐng)?jiān)俅屋斎朊艽a</span></td></tr>
<tr><td><span id="IDNumber">請(qǐng)輸入身份證號(hào)碼</span></td></tr>
<tr><td><span id="phoneNumber">請(qǐng)輸入電話號(hào)碼</span></td></tr>
<tr><td><span id="email">請(qǐng)輸入郵箱地址</span></td></tr>
</table>
</form>
</div>
<script type="text/javascript" src="jslib/registerCheck.js">
</script>
</body>
</html>
registerCheck.js
//輸入框獲得焦點(diǎn)時(shí)，顯示提示內(nèi)容
function showDesc(obj)
{
var id= obj.name;
document.getElementById(id).style.display="inline";
}
//輸入框失去焦點(diǎn)時(shí)檢驗(yàn)輸入內(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()
{
//只簡(jiǎn)單的判斷用戶名的長(zhǎng)度
var id = document.getElementById("USERNAME");
var username=id.value;
if(username.length > 10)
{
document.getElementById(id.name).innerHTML = "輸入的用戶名過(guò)長(zhǎng)";
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="身份證號(hào)長(zhǎng)度有誤";
return false;
}
var expr=/([0]{18}[x|y]?)|([1]{18}[x|y]?)/i;
if(expr.test(IDNumber))
{
document.getElementById(id.name).innerHTML="身份證號(hào)不可以全'0'或全'1'";
return false;
}
return true;
}
function checkPhoneNumber()
{
// 利用正則表達(dá)式對(duì)輸入數(shù)據(jù)匹配
var id=document.getElementById("PHONENUMBER");
var phone = id.value;
//匹配到一個(gè)非數(shù)字字符，則返回false
var expr = /\D/i;
if(expr.test(phone))
{
document.getElementById(id.name).innerHTML="不能輸入非數(shù)字字符";
return false;
}
return true;
}
function checkEmail()
{
// 利用正則表達(dá)式對(duì)輸入數(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;
}
- JavaScript正則表達(dá)式實(shí)現(xiàn)注冊(cè)信息校驗(yàn)功能
- javascript使用正則表達(dá)式實(shí)現(xiàn)注冊(cè)登入校驗(yàn)
- js實(shí)現(xiàn)登錄注冊(cè)框手機(jī)號(hào)和驗(yàn)證碼校驗(yàn)（前端部分）
- JavaScript 完成注冊(cè)頁(yè)面表單校驗(yàn)的實(shí)例
- JavaScript注冊(cè)時(shí)密碼強(qiáng)度校驗(yàn)代碼
- 攔截JSP頁(yè)面，校驗(yàn)是否已登錄詳解及實(shí)現(xiàn)代碼
- 微信+angularJS的SPA應(yīng)用中用router進(jìn)行頁(yè)面跳轉(zhuǎn)，jssdk校驗(yàn)失敗問(wèn)題解決
- js實(shí)現(xiàn)注冊(cè)頁(yè)面校驗(yàn)功能
相關(guān)文章
10行原生JS實(shí)現(xiàn)文字無(wú)縫滾動(dòng)(超簡(jiǎn)單)
下面小編就為大家分享一篇10行原生JS實(shí)現(xiàn)文字無(wú)縫滾動(dòng)的效果，特別簡(jiǎn)單，具有很好的參考價(jià)值，希望對(duì)大家有所幫助2018-01-01
JavaScript基于inquirer封裝一個(gè)控制臺(tái)文件選擇器
這篇文章主要介紹了JavaScript基于inquirer封裝一個(gè)控制臺(tái)文件選擇器，文章圍繞主題展開詳細(xì)的內(nèi)容介紹，具有一定的參考價(jià)值，需要的朋友可以參考一下2022-08-08
這篇文章主要為大家詳細(xì)介紹了JS實(shí)現(xiàn)拖拽效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-06-06
你應(yīng)該了解的JavaScript Array.map()五種用途小結(jié)
大家都知道m(xù)ap() 方法返回一個(gè)新數(shù)組，數(shù)組中的元素為原始數(shù)組元素調(diào)用函數(shù)處理后的值。下面這篇文章主要給大家介紹了關(guān)于JavaScript Array.map()的五種用途，需要的朋友可以參考下2018-11-11
JavaScript使用addEventListener添加事件監(jiān)聽用法實(shí)例
這篇文章主要介紹了JavaScript使用addEventListener添加事件監(jiān)聽的方法,實(shí)例分析了addEventListener方法的相關(guān)使用技巧,需要的朋友可以參考下2015-06-06
這篇文章主要為大家介紹了webpack?5.68.0版本教程示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-11-11
Javascript中判斷變量是數(shù)組還是對(duì)象(array還是object)
怎樣判斷一個(gè)JavaScript變量是array還是obiect，或許有很多初學(xué)者對(duì)此不是很清楚吧，下面為大家詳細(xì)解答下，希望對(duì)大家有所幫助2013-08-08
cookie其實(shí)就是網(wǎng)站放在用戶機(jī)器上的一小塊信息，cookie對(duì)于用戶來(lái)說(shuō)是唯一的，網(wǎng)站可判斷用戶上次訪問(wèn)網(wǎng)站的時(shí)間，以及他訪問(wèn)了哪些頁(yè)面，可用于在某個(gè)網(wǎng)站跟蹤你訪問(wèn)的頁(yè)面，但無(wú)法用它來(lái)獲取個(gè)人信息。2015-06-06
textarea支持圖形編輯的實(shí)現(xiàn)方法
本來(lái)以為只有iframe支持編輯了，今天突然發(fā)現(xiàn)textarea也支持編輯 ：（ 是不是我太愚鈍了？ textarea不能用innerHTML來(lái)插入html，而用appendChild 這樣的話稍微修改下，評(píng)論等簡(jiǎn)單的textarea的表情插入就可以直接顯示出來(lái)了 而不是只顯示emot了 比較實(shí)用標(biāo)題起的確切，但如果叫“現(xiàn)textarea支持編輯”似乎更廢話2008-03-03
主要介紹了一些xml dom對(duì)象的使用方法2008-08-08