溫馨提示×
您好，登錄后才能下訂單哦！
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶(hù)服務(wù)條款》
您好，登錄后才能下訂單哦！
小編給大家分享一下JS如何實(shí)現(xiàn)校驗(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ū)ο?nbsp; 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ū)ο?nbsp; 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ū)ο?nbsp; 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; } #showp{ 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"> <p align="center" id="showp"> <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> </p> </form> </body></html>看完了這篇文章，相信你對(duì)“JS如何實(shí)現(xiàn)校驗(yàn)與最終登陸界面功能”有了一定的了解，如果想了解更多相關(guān)知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道，感謝各位的閱讀！
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號(hào)
手機(jī)網(wǎng)站二維碼