Java Web 登錄頁(yè)面的實(shí)現(xiàn)代碼實(shí)例
代碼如下~
內(nèi)有詳細(xì)解釋?zhuān)詈笥姓掌?/p>
<html> <script type="text/javascript"> function inUser(){ username_mess.style.visibility="visible"; } function outUser(){ //獲取name 為 usesrname 的文本 u=f1.username.value; f1.username.style.border="1px solid AAAAAA"; if(u==""){ username_mess.style.visibility="hidden"; return; } //正則表達(dá)式 reg=/.{4,20}/; if(!reg.test(u)){ username_mess.innerHTML="用戶名長(zhǎng)度只能在4-20位字符之間"; username_mess.style.color="red"; f1.username.style.color="red"; f1.username.style.border="1px solid red"; username_ok.style.visibility="hidden"; return; } reg=/^[\u4e00-\u9fa5 \w-]{4,20}$/; if(reg.test(u)){ username_ok.style.visibility="visible"; username_mess.innerHTML=""; f1.username.style.color="black"; }else{ username_mess.innerHTML="用戶名只能由中文、英文、數(shù)字及'_'、'-'組成"; username_mess.style.color="red"; f1.username.style.color="red"; f1.username.style.border="1px solid red"; username_ok.style.visibility="hidden"; } } function inMail(){ mail_mess.style.visibility="visible"; } function outMail(){ v=f1.mail.value; f1.mail.style.border="1px solid AAAAAA"; if(v==""){ mail_mess.style.visibility="hidden"; return; } reg=/\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*/; if(reg.test(v)){ mail_ok.style.visibility="visible"; mail_mess.innerHTML=""; f1.mail.style.color="black"; }else{ //更改id mail_mess 的文字 mail_mess.innerHTML="請(qǐng)輸入正確的郵箱地址,例如:X@X.X"; //設(shè)置id mail_mess 字體的顏色 mail_mess.style.color="red"; //設(shè)置 id 為f1 里的 name 為 mail 文本框 內(nèi)的文字顏色 f1.mail.style.color="red"; //設(shè)置文本框顏色以及框的大小 f1.mail.style.border="1px solid red"; mail_ok.style.visibility="hidden"; } } </script> <!-- 以下為 class 標(biāo)簽的 應(yīng)用函數(shù) +++ --> <style type="text/css"> .label{ position:absolute ; right:70%; } .fi{ position:relative ; left:30%; } .clr{ height:20px ; color:AAAAAA; font-size:12px; visibility:hidden; } .s{ font-weight:lighter ; color:red; } .text{ font-family:宋體; width:200px; } .v{ color:cccccc; font-size:12px ; } a{ font-size:12px ; } .btn-img{ position:relative ; left:30%; } .ok{ background-image:url('ok.jpg'); width:17px; height:16px; visibility:hidden; } </style> <body> <form id="f1"> <div class="label"><b class="s">1*</b>用戶名:</div> <div class="fi"> <input type="text" name="username" class="text" tabindex="1" onFocus="inUser()" onBlur="outUser()"/><label id="username_ok" class="ok"><img src="ok.jpg" width=17px height=16px/></label> <br/><div id="username_mess" class="clr">4-20位字符,可由中文、英文、數(shù)字及"_"、"-"組成</div> </div> <div class="label"><b class="s">*</b>設(shè)置密碼:</div> <div class="fi"> <input type="password" name="pwd" class="text" tabindex="2"/> <input type="checkbox" name="visi" id="viewpwd"/> <label class="v">顯示密碼字符</label><br/> <div class="clr"></div> </div> <div class="label"><b class="s">*</b>確認(rèn)密碼:</div> <div class="fi"> <input type="password" name="pwd2" class="text" tabindex="3"/> <br/><div class="clr"></div> </div> <div class="label"><b class="s">*</b>郵箱:</div> <div class="fi"> <input type="text" name="mail" class="text" tabindex="4" onFocus="inMail()" onBlur="outMail()"/> <label id="mail_ok" class="ok"><img src="ok.jpg" width=17px height=16px/></label> <label class="v">免費(fèi)郵箱:</label> <a href="">搜狐</a> <a href="">網(wǎng)易</a><br/> <div id="mail_mess" class="clr">請(qǐng)輸入正確的郵箱地址</div> </div> <div class="label">推薦人用戶名:</div> <div class="fi"> <input type="text" name="referrer" class="text" value="可不填" tabindex="5"/> <br/> <div class="clr"></div> </div> <input type="button" class="btn-img" id="registsubmit" value="同意以下協(xié)議,提交" tabindex="8"/> </form> </body> </html>
以上所述是小編給大家介紹的Java Web 登錄頁(yè)面的實(shí)現(xiàn)詳解整合,希望對(duì)大家有所幫助,如果大家有任何疑問(wèn)請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!
相關(guān)文章
SpringBoot單元測(cè)試沒(méi)有執(zhí)行的按鈕問(wèn)題及解決
這篇文章主要介紹了SpringBoot單元測(cè)試沒(méi)有執(zhí)行的按鈕問(wèn)題及解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-01-01項(xiàng)目為什么引入log4j而不是logback代碼
這篇文章主要介紹了項(xiàng)目為什么引入log4j而不是logback代碼,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-10-10詳解JDK自帶javap命令反編譯class文件和Jad反編譯class文件(推薦使用jad)
這篇文章主要介紹了JDK自帶javap命令反編譯class文件和Jad反編譯class文件(推薦使用jad),本文給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2022-09-09IDEA運(yùn)行Tomcat中文亂碼出現(xiàn)的各種問(wèn)題
這篇文章主要介紹了IDEA運(yùn)行Tomcat中文亂碼的各種問(wèn)題及解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-11-11Java使用貪心算法解決電臺(tái)覆蓋問(wèn)題(示例詳解)
貪心算法是指在對(duì)問(wèn)題進(jìn)行求解時(shí),在每一步選擇中都采取最好或最優(yōu)的選擇,從而導(dǎo)致結(jié)果理想化,下面通過(guò)本文介紹下Java使用貪心算法解決電臺(tái)覆蓋問(wèn)題,需要的朋友可以參考下2022-04-04SpringBoot之Helloword 快速搭建一個(gè)web項(xiàng)目(圖文)
這篇文章主要介紹了SpringBoot之Helloword 快速搭建一個(gè)web項(xiàng)目(圖文),小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-12-12SpringBoot使用自定義注解實(shí)現(xiàn)權(quán)限攔截的示例
本篇文章主要介紹了SpringBoot使用自定義注解實(shí)現(xiàn)權(quán)限攔截的示例,具有一定的參考價(jià)值,有興趣的可以了解一下2017-09-09