JS校驗(yàn)與最終登陸界面功能完整示例
更新時(shí)間：2020年01月13日 10:03:28 作者：qq_42412646
這篇文章主要介紹了JS校驗(yàn)與最終登陸界面功能,結(jié)合完整實(shí)例形式詳細(xì)分析了JavaScript登錄界面校驗(yàn)功能與正則驗(yàn)證相關(guān)操作技巧,需要的朋友可以參考下
本文實(shí)例講述了JS校驗(yàn)與最終登陸界面功能。分享給大家供大家參考，具體如下：
<html>
<head>
<title>注冊(cè)頁(yè)面</title>
<meta charset="UTF-8"/>
<script type="text/javascript">
// 校驗(yàn)用戶(hù)名
function checkUname(){
// 獲取用戶(hù)名對(duì)象
var uname=document.getElementById("uname").value;
// 創(chuàng)建校驗(yàn)正則表達(dá)式判斷條件
var reg=/^[\u4e00-\u9fa5]{2,4}$/; //其中前面的一部分是漢字的正則表達(dá)式，后面的是漢字的合法范圍,（第一次因?yàn)?正則表達(dá)式寫(xiě)錯(cuò)了）
// 獲取后面的提示字
var nameSpan=document.getElementById("nameSpan"); //span是一個(gè)沒(méi)有特殊含義的自定義標(biāo)簽用來(lái)輔助設(shè)計(jì)
// 進(jìn)行校驗(yàn)
if(uname=="" || uname ==null){
nameSpan.innerHTML="用戶(hù)名不能為空";
nameSpan.style.color="red";
return false;
}else if(reg.test(uname)){
nameSpan.innerHTML="用戶(hù)名合法";
nameSpan.style.color="green";
return true;
}else{
nameSpan.innerHTML="用戶(hù)名不合法";
nameSpan.style.color="red";
return false;
}
}
function checkPassword(){
// 獲取用戶(hù)名對(duì)象
var password1=document.getElementById("pws1").value; //我們是通過(guò)對(duì)象的value值（文本輸入框的內(nèi)容）進(jìn)行判斷的
// 創(chuàng)建校驗(yàn)正則表達(dá)式判斷條件
var reg=/^[a-z]\w{4,8}$/; //首位為字母，后面為數(shù)字4到8位 ()
// 獲取后面的提示字
var pwsSpan=document.getElementById("passwordSpan"); //span是一個(gè)沒(méi)有特殊含義的自定義標(biāo)簽用來(lái)輔助設(shè)計(jì)
// 進(jìn)行校驗(yàn)
if(password1=="" || password1 ==null){
pwsSpan.innerHTML="*密碼不能為空";
pwsSpan.style.color="red";
return false;
}else if(reg.test(password1)){
pwsSpan.innerHTML="*密碼合法";
pwsSpan.style.color="green";
return true;
}else{
pwsSpan.innerHTML="*密碼不合法";
pwsSpan.style.color="red";
return false;
}
// return password1.value;
checkPassworded(); //在失去焦點(diǎn)的時(shí)候(調(diào)用該函數(shù)時(shí)，也進(jìn)行確認(rèn)密碼的校驗(yàn))，如果沒(méi)有這個(gè)操作，當(dāng)重新修改用戶(hù)密碼時(shí)，其不會(huì)在進(jìn)行確認(rèn)密碼(即修改密碼后即使不相同也不會(huì)報(bào)錯(cuò))
}
// 校驗(yàn)確定密碼
function checkPassworded(){
// 獲取確認(rèn)密碼對(duì)象
var password2=document.getElementById("pws2").value;
// 獲取第一次密碼對(duì)象,以進(jìn)行比較
var password1=document.getElementById("pws1").value;
// 獲取提示語(yǔ)的對(duì)象
var pwslSpan=document.getElementById("passwordlSpan");
// reg=checkPassword();
// if(reg="" || reg=null) //沒(méi)能實(shí)現(xiàn)
if(password2=="" || password2==null){ //null就是字符串類(lèi)型，表示空字符串
pwslSpan.innerHTML="*確認(rèn)密碼不能為空";
pwslSpan.style.color="red";
return false;
}else if(password1 == password2){
pwslSpan.innerHTML="*兩次密碼相同";
pwslSpan.style.color="green";
return true;
}else{
pwslSpan.innerHTML="*兩次密碼不相同";
pwslSpan.style.color="red";
return false;
}
}
//--------------------------------------------------------------------------------------------------------
// 考慮到有很多的校驗(yàn)方法都用到相同的方法和結(jié)構(gòu),所以我們?cè)诖藢?duì)其進(jìn)行封裝
function checkAll(id,reg){ //封裝的基本思想：相同的直接寫(xiě)入，不同的利用參數(shù)轉(zhuǎn)換
//接收傳遞的對(duì)象
var inp=document.getElementById(id); //我們傳的參數(shù)是帶雙引號(hào)的
var ie=inp.value; //我們通過(guò)對(duì)象的值進(jìn)行判斷
var alt=inp.alt; //通過(guò)對(duì)象來(lái)獲得其對(duì)應(yīng)的一些值
//接收傳遞的提示框?qū)ο?
var span=document.getElementById(id+"Span");
if(ie=="" || ie==null){
span.innerHTML=alt+"不能為空";
span.style.color="red";
return false;
}else if(reg.test(ie)){
span.innerHTML=alt+"合法";
span.style.color="green";
return true;
}else{
span.innerHTML=alt+"不合法";
span.style.color="red";
return false;
}
}
// 手機(jī)號(hào)的校驗(yàn)
function checkPhone(){
return checkAll("phone",/^1[3,4,5,7,8]\d{9}$/);
}
// 郵箱的校驗(yàn)
function checkMail(){
return checkAll("mail",/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+$/);
}
// 添加驗(yàn)證碼
function checkCode(){
// 獲取驗(yàn)證碼填寫(xiě)對(duì)象
var code=document.getElementById("code1");
// 獲取驗(yàn)證顯示對(duì)象
var codeSpan=document.getElementById("codeSpan");
var tag=Math.floor(Math.random()*9000+1000); //產(chǎn)生四位的整數(shù)，Math.floor表示向下取整，
codeSpan.innerHTML=tag;
}
// 校驗(yàn)驗(yàn)證碼
function checkCoded(){
// 獲取輸入的驗(yàn)證碼對(duì)象
var code2=document.getElementById("code1").value;
// 獲取顯示的驗(yàn)證碼對(duì)象,以進(jìn)行比較
var codeSpan1=document.getElementById("codeSpan");
var code1=codeSpan1.innerHTML; //通過(guò)對(duì)象利用其innerHTML屬性進(jìn)行獲得，其利用value不正確，沒(méi)進(jìn)一步探索
// 獲取提示語(yǔ)的對(duì)象
var codeSpan2=document.getElementById("codeSpan2");
// alert(code1); //得到的值是undefined
// alert(code2);
if(code2=="" || code2==null){
codeSpan2.innerHTML="*驗(yàn)證碼不能為空";
codeSpan2.style.color="red";
return false;
}else if(code1 == code2){
codeSpan2.innerHTML="*驗(yàn)證碼相同";
codeSpan2.style.color="green";
return true;
}else{
codeSpan2.innerHTML="*驗(yàn)證碼不相同";
codeSpan2.style.color="red";
return false;
}
}
// 校驗(yàn)選擇框
function checkSelect(){
// 獲取選擇框?qū)ο?
var select=document.getElementById("select").value;
// 獲取選擇框提示對(duì)象
var selectSpan=document.getElementById("selectSpan");
// selectSpan.style.fontSize="15px";
if(select==0){
selectSpan.innerHTML="地址選擇不能為空";
selectSpan.style.color="red";
return false;
}else{
selectSpan.innerHTML=select;
selectSpan.style.color="green";
return true;
}
}
// 檢測(cè)多選框
function checkFav(){
// 獲取多選框?qū)ο?
var fav=document.getElementsByName("fav");
// 獲取多選框提示對(duì)象
var favSpan=document.getElementById("favSpan");
favSpan.style.fontSize="10px";
for(var i=0;i<fav.length;i++){
if(fav[i].checked){ //fav[i]是一個(gè)對(duì)象，fav[i].checked是一個(gè)值
favSpan.innerHTML="選擇成功";
favSpan.style.color="green";
return true; //選擇成功后直接返回
}
} //在整個(gè)循環(huán)結(jié)束后都沒(méi)有進(jìn)行選擇，才進(jìn)行不符合提示
favSpan.innerHTML="至少選擇一個(gè)";
favSpan.style.color="red";
return false;
}
function checkAgree(){
// 當(dāng)同意公司協(xié)議的時(shí)候才能進(jìn)行提交操作
document.getElementById("pop").disabled=!document.getElementById("agree").checked;
// 當(dāng)同意公司協(xié)議的時(shí)候,對(duì)應(yīng)的submit的對(duì)應(yīng)值是true,所以我們利用!把disabled的值賦值為false
}
function checkSub(){
// 校驗(yàn)是否可以提交
// 對(duì)于所有的校驗(yàn)函數(shù),只要有一個(gè)不滿足條件,就不能提交
checkUname();
checkPassword();
checkPassworded();
checkPhone();
checkMail();
checkCoded();
checkSelect();
checkFav(); //當(dāng)所有值都為true的時(shí)候才能進(jìn)行提交，所以對(duì)應(yīng)的函數(shù)有返回值，不滿足時(shí)返回false，滿足時(shí)返回true
return checkUname()&&checkPassword()&&checkPassworded()&&checkPhone()&&checkMail()&&checkCoded()&&checkSelect()&&checkFav();
}
</script>
<style type="text/css">
tr,td,table{
background-color: transparent;
border 0px;
}
span{
font-size: 10px;
}
#codeSpan{
width: 30px;
height: 25px;
font-size: 20px;
color: black;
background-size: 100%,100%; /*后面三行是使背景圖片占滿整個(gè)區(qū)域*/
background-repeat: no-repeat;
background-image: url(../img/0.jpg);
}
#selectSpan{
font-size: 15px;
}
#showdiv{
width: 30%;
height: 100%;
background-image: url(../img/5.jpg);
background-size: cover;
background-repeat: no-repeat;
margin-left: 33%;
}
input,select,[type=checkbox],#bigText{
background-color: transparent; /* 把一些邊框背景變?yōu)橥该鞯囊燥@示背景*/
}
</style>
</head>
<body onload="checkCode(),checkSelect(),checkFav()">
<form action="#" action="get">
<div align="center" id="showdiv">
<table border="1px" cellpadding="5px" cellspacing="0px">
<tr height="29px">
<td width="80px">姓名</td>
<td width="180px">
<input type="text" name="uname" value="" id="uname" onblur="checkUname()"/>
<span id="nameSpan"></span> <!-- 以焦點(diǎn)的有無(wú)來(lái)進(jìn)行判斷-->
</td>
</tr>
<tr height="29px">
<td width="80px">郵箱</td>
<td width="180px">
<input type="text" name="mail" value="" id="mail" alt="郵箱" onblur="checkMail()"/>
<span id="mailSpan"></span>
</td>
</tr>
<tr height="29px">
<td width="80px">手機(jī)號(hào)</td>
<td width="180px"> <!--查了很長(zhǎng)時(shí)間的錯(cuò)誤，就因?yàn)檎{(diào)用的函數(shù)沒(méi)有用""包含，""在外面了-->
<input type="text" name="phone" value="" id="phone" alt="手機(jī)號(hào)" onblur="checkPhone()"/>
<span id="phoneSpan"></span>
</td>
</tr>
<tr height="31px">
<td width="80px">密碼</td>
<td width="180px">
<input type="password" name="psw" value="" id="pws1" onblur="checkPassword()"/>
<span id="passwordSpan"></span>
</td>
</tr>
<tr height="29px">
<td width="80px">確認(rèn)密碼</td>
<td width="180px">
<input type="password" name="psw2" value="" id="pws2" onblur="checkPassworded()"/>
<span id="passwordlSpan"></span>
</td>
</tr>
<tr height="31px">
<td>性別</td>
<td>
男<input type="radio" name="sex" value="1" checked="checked" /> 女<input type="radio" name="sex" value="0" />
</td>
</tr>
<tr height="31px">
<td>所在地</td>
<td>
<select name="" id="select" onchange="checkSelect()">
<option value="0"></option>
<option value="山東">山東</option>
<option value="北京">北京</option>
<option value="河南">河南</option>
</select>
<span id="selectSpan"></span>
</td>
</tr>
<tr height="31px">
<td>愛(ài)好</td>
<td> <!--我們對(duì)每一個(gè)都進(jìn)行事件觸發(fā)檢驗(yàn)，因?yàn)槊總€(gè)選項(xiàng)都是平等的-->
動(dòng)漫<input type="checkbox" name="fav" id="fav" onclick="checkFav()" value="animation"/>
游戲<input type="checkbox" name="fav" id="fav" onclick="checkFav()" value="game" />
打球<input type="checkbox" name="fav" id="fav" onclick="checkFav()" value="ball" />
<span id="favSpan"></span>
</td>
</tr>
<tr height="31px">
<td>個(gè)人簡(jiǎn)介</td>
<td>
<textarea name="introduction" rows="7px" cols="25px" id="bigText"></textarea>
</td>
</tr>
<tr height="31px">
<td width="80px">驗(yàn)證碼</td>
<td width="180px">
<input type="password" name="code" value="" id="code1" onblur="checkCoded()"/>
<span id="codeSpan" onclick="checkCode()"></span><br />
<span id="codeSpan2" onclick="checkCoded()"></span>
<!--<a href=""><span id=" rel="external nofollow" codeSpan" onclick="checkCode()"></span></a>--> <!-- 行內(nèi)顯示一定的距離，可以直接用 -->
</td> <!--可以用a標(biāo)簽把鼠標(biāo)的圖標(biāo)變成一個(gè)小手，但是會(huì)觸發(fā)超鏈接事件，感覺(jué)不提倡-->
</tr>
<tr height="31px">
<td colspan="2" align="center">
<input type="checkbox" name="select" id="agree" value="1" onclick="checkAgree()" />是否同意我們的協(xié)議
<!--<input type="radio" name="select" id="agree" value="1" />是否同意我們的協(xié)議-->
<!--radio是互斥選擇，當(dāng)只有一個(gè)的時(shí)候，選中了，就取消不了了，要進(jìn)行一些處理-->
</td>
</tr>
<tr height="31px">
<td colspan="2" align="center">
<input type="submit" value="注冊(cè)" id="pop" disabled="true" onclick="checkSub()"/>
<!--我們可不是所有的情況都可以進(jìn)行submit-->
</td>
</tr>
</table>
</div>
</form>
</body>
</html>
運(yùn)行效果：
感興趣的朋友可以使用在線HTML/CSS/JavaScript代碼運(yùn)行工具：http://tools.jb51.net/code/HtmlJsRun測(cè)試上述代碼運(yùn)行效果。
PS：這里再為大家提供2款非常方便的正則表達(dá)式工具供大家參考使用：
JavaScript正則表達(dá)式在線測(cè)試工具：
http://tools.jb51.net/regex/javascript
正則表達(dá)式在線生成工具：
http://tools.jb51.net/regex/create_reg
更多關(guān)于JavaScript相關(guān)內(nèi)容感興趣的讀者可查看本站專(zhuān)題：《JavaScript正則表達(dá)式技巧大全》、《JavaScript表單(form)操作技巧大全》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript錯(cuò)誤與調(diào)試技巧總結(jié)》及《JavaScript數(shù)學(xué)運(yùn)算用法總結(jié)》
希望本文所述對(duì)大家JavaScript程序設(shè)計(jì)有所幫助。
您可能感興趣的文章:
- 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)代碼
- js簡(jiǎn)單實(shí)現(xiàn)用戶(hù)注冊(cè)信息的校驗(yàn)代碼
- 詳解AngularJs HTTP響應(yīng)攔截器實(shí)現(xiàn)登陸、權(quán)限校驗(yàn)
- Angular.js與node.js項(xiàng)目里用cookie校驗(yàn)賬戶(hù)登錄詳解
- jsp登陸校驗(yàn)演示 servlet、login、success
- 攔截JSP頁(yè)面，校驗(yàn)是否已登錄詳解及實(shí)現(xiàn)代碼
- ASP.NET MVC結(jié)合JavaScript登錄、校驗(yàn)和加密
- javascript使用正則表達(dá)式實(shí)現(xiàn)注冊(cè)登入校驗(yàn)
相關(guān)文章
這篇文章主要介紹了Bootstrap -- 按鈕樣式與使用，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2018-12-12
javascript設(shè)計(jì)模式 – 職責(zé)鏈模式原理與用法實(shí)例分析
這篇文章主要介紹了javascript設(shè)計(jì)模式 – 職責(zé)鏈模式,結(jié)合實(shí)例形式分析了javascript職責(zé)鏈模式相關(guān)概念、原理、用法及操作注意事項(xiàng),需要的朋友可以參考下2020-04-04
echarts報(bào)錯(cuò)Cannot?read?properties?of?null?(reading?‘getA
最近在開(kāi)發(fā)Echarts忽然遇到了個(gè)問(wèn)題,這篇文章主要給大家介紹了關(guān)于echarts報(bào)錯(cuò)Cannot?read?properties?of?null?(reading?‘getAttribute‘)的解決方法,需要的朋友可以參考下2023-01-01
對(duì)于生成縮略圖一般做法是通過(guò)后端語(yǔ)言php等來(lái)生成，但是為了給服務(wù)器減壓，我們或許可以從前端來(lái)著手，先生成好不同尺寸的縮略圖，傳給后端，而后端只需要將前端傳過(guò)來(lái)的圖片進(jìn)行存儲(chǔ)就好了2020-10-10
js對(duì)象實(shí)現(xiàn)數(shù)據(jù)分頁(yè)效果
這篇文章主要為大家詳細(xì)介紹了js對(duì)象實(shí)現(xiàn)數(shù)據(jù)分頁(yè)效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-09-09
JS計(jì)算網(wǎng)頁(yè)停留時(shí)間代碼
這篇文章主要介紹了JS計(jì)算網(wǎng)頁(yè)停留時(shí)間的具體實(shí)現(xiàn),需要的朋友可以參考下2014-04-04
使用window.print()前端實(shí)現(xiàn)網(wǎng)頁(yè)打印超詳細(xì)教程(含代碼示例)
前端實(shí)現(xiàn)打印功能的方法有很多,大家在網(wǎng)上隨便一搜就是一大堆,下面這篇文章主要給大家介紹了關(guān)于使用window.print()前端實(shí)現(xiàn)網(wǎng)頁(yè)打印的相關(guān)資料,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-06-06
使用js實(shí)現(xiàn)的簡(jiǎn)單拖拽效果
本文給大家分享的是使用純JS實(shí)現(xiàn)的簡(jiǎn)單的拖拽效果的插件，算是對(duì)自己javascript學(xué)習(xí)的一個(gè)小的檢驗(yàn)，如果小伙伴們需要復(fù)雜的拖拽效果，還是考慮jQuery的draggable吧，更成熟一些。2015-03-03
js實(shí)現(xiàn)倒計(jì)時(shí)關(guān)鍵代碼
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)倒計(jì)時(shí)的關(guān)鍵代碼，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-05-05
一文探索執(zhí)行JavaScript函數(shù)的多種方法
在前端開(kāi)發(fā)中,動(dòng)態(tài)執(zhí)行?JavaScript?函數(shù)是一種強(qiáng)大的能力,能夠幫助開(kāi)發(fā)者實(shí)現(xiàn)靈活的邏輯控制,本文將和大家探討一下幾種常用的執(zhí)行方法,需要的可以了解下2025-01-01