最原始的jQuery注冊(cè)驗(yàn)證方式
這里介紹的第一個(gè)是最原始的表單驗(yàn)證方式,即沒有使用即時(shí)驗(yàn)證,需要點(diǎn)擊提交按鈕才進(jìn)行驗(yàn)證,也沒有使用正則表達(dá)式或者AJAX驗(yàn)證,也或者是JQuery的驗(yàn)證,不過這么多驗(yàn)證方式接著第一個(gè)后面都會(huì)寫出來的,即時(shí)驗(yàn)證,正則驗(yàn)證。
最原始的注冊(cè)驗(yàn)證方式,需要通過點(diǎn)擊提交按鈕才驗(yàn)證,具體內(nèi)容如下
先上圖:
具體代碼
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>無標(biāo)題文檔</title> </head> <body> <div id="content"> <!--首頁的中間部分--> <SCRIPT language="javascript" type="text/javascript"> //checkUserName() && sNameCheck() && passCheck() && bdaycheck() && genderCheck() && emailcheck() && function validateform(){ if(checkUserName() && sNameCheck() && passCheck()&& emailcheck() && bdaycheck() && genderCheck() && agree( )) return true; else return false; } //validate Name function checkUserName(){ var fname = document.userfrm.fname.value; var lname = document.userfrm.lname.value; // validate first Name if(fname.length != 0){ for(i=0;i<fname.length;i++){ var ftext = fname.substring(i,i+1); if(ftext < 9 || ftext > 0){ alert("名字中包含數(shù)字 \n"+"請(qǐng)刪除名字中的數(shù)字和特殊字符"); document.userfrm.fname.focus(); document.userfrm.fname.select(); return false } } } else{ alert("請(qǐng)輸入“名字”文本框"); document.userfrm.fname.focus(); return false } // Validate last name if(fname.length != 0){ for(i=0;i<fname.length;i++){ var ftext = fname.substring(i,i+1); if(ftext < 9 || ftext > 0){ alert("名字中包含數(shù)字 \n"+"請(qǐng)刪除名字中的數(shù)字和特殊字符"); document.userfrm.fname.focus(); document.userfrm.fname.select(); return false } } } else{ alert("請(qǐng)輸入“名字”文本框"); document.userfrm.fname.focus(); return false } // Validate last name if(lname.length != 0){ for(j=0;j<lname.length;j++){ var ltext = lname.substring(j,j+1); if(ltext < 9 || ltext > 0){ alert("姓氏中包含數(shù)字 \n"+"請(qǐng)刪除姓氏中的數(shù)字和特殊字符"); document.userfrm.lname.focus(); document.userfrm.lname.select(); return false } } } else{ alert("“姓氏”文本框?yàn)榭?); document.userfrm.lname.focus(); return false; } return true; } // Login Name Validation function sNameCheck(){ var sname = document.userfrm.sname.value; var illegalChars = /\W/; if(sname.length != 0){ if(illegalChars.test(sname)){ alert("登錄名無效"); document.userfrm.sname.select(); return false; } } else{ alert("是否忘記輸入登錄名?"); document.userfrm.sname.focus(); return false } return true; } //Validate password function passCheck(){ var userpass = document.userfrm.pass.value; var ruserpass = document.userfrm.rpass.value; var illegalChars = /[\W_]/;// allow only charactors and numbers // Check if Password field is blank. if(userpass == "" || ruserpass == ""){ alert("未輸入密碼 \n" + "請(qǐng)輸入密碼"); document.userfrm.pass.focus(); return false; } // Check if password length is less than 6 charactor. if(userpass.length < 6){ alert("密碼必須多于或等于 6 個(gè)字符。\n"); document.userfrm.pass.focus(); return false; } //check if password contain illigal charactors. else if(illegalChars.test(userpass)){ alert("密碼包含非法字符"); document.userfrm.pass.select(); return false; } else if(userpass != ruserpass){ alert("密碼不符"); document.userfrm.rpass.select(); return false; } return true; } // Email Validation function emailcheck(){ var usermail = document.userfrm.email.value; if(usermail.length == "0"){ alert("Email 文本框?yàn)榭?) document.userfrm.email.focus(); return false; } if( usermail.indexOf("@") < 0 || usermail.indexOf(".") < 0 || usermail.indexOf("@") > usermail.indexOf(".")){ alert("Email 地址無效"); return false; } return true; } function bdaycheck(){ var bmonth = document.userfrm.bmon.value; var bday = document.userfrm.bday.value; var byear = document.userfrm.byear.value; //alert(bmonth + "/" + bday + "/" + byear); if(bmonth == "" || bday == "" || byear == "" || bday=="dd" || byear == "yyyy"){ alert("請(qǐng)輸入您的生日"); document.userfrm.bmon.focus(); return false; } for(i=0; i<bday.length; i++){ var bnum = bday.substring(i,i+1) if(!(bnum < 9 || bnum > 0)){ alert("生日無效"); document.userfrm.bday.focus(); return false; } } for(j=0; j<byear.length; j++){ var bynum = byear.substring(j,j+1) if(!(bynum < 9 || bynum > 0)){ alert("生日無效"); document.userfrm.byear.focus(); return false; } } //驗(yàn)證出生年月日是否在指定的范圍內(nèi) if (byear<1900||byear>2120){ alert("您輸入的出生年份超出范圍!\n請(qǐng)重新輸入!"); document.userfrm.byear.focus(); return(false); } else if(bmonth<0||bmonth>12){ alert("您輸入的月份超出范圍!\n請(qǐng)重新輸入!"); document.userfrm.bmon.focus(); return(false); } else if(bday<0||bday>31){ alert("您輸入的日期超出范圍!\n請(qǐng)重新輸入!"); return(false); } return true; } //check sex function genderCheck(){ var usergen = document.userfrm.gen.length; for(i=0;i<usergen;i++){ if(document.userfrm.gen[i].checked){ return true; } if (i==usergen-1){ alert("請(qǐng)選擇性別"); return false; } } return true; } function agree( ) { if (document.userfrm.okradio[0].checked==false) { alert("您必須同意淘寶網(wǎng)的協(xié)議!才能加入會(huì)員"); return false; } else return true; } </SCRIPT> <TABLE width="950" border="0" align="center"> <TR> <TD height="75"><h4>注冊(cè)步驟: 1.填寫信息 > 2.收電子郵件 > 3.注冊(cè)成功 </h4></TD> </TR> </TABLE> <TABLE width="950" border="1" align="center" cellpadding="0" cellspacing="0" bordercolor="#99CCFF"> <FORM name="userfrm" method="post" action="register_success.htm" onSubmit="return validateform( )"> <TR class="register_table_line"> <TD width="160" align="right" bgcolor="#E7FBFF">名字:</TD> <TD width="507" align="left" bordercolor="#E7E3E7"><INPUT name="fname" type="text" class="register_textBroader" id="fname" size="24"></TD> </TR> <TR class="register_table_line"> <TD width="160" align="right" bgcolor="#E7FBFF">姓氏:</TD> <TD align="left" bordercolor="#E7E3E7"><INPUT name="lname" type="text" class="register_textBroader" id="lname" size="24"></TD> </TR> <TR class="register_table_line"> <TD width="160" align="right" bgcolor="#E7FBFF">登錄名:</TD> <TD align="left" bordercolor="#E7E3E7"> <INPUT name="sname" type="text" class="register_textBroader" id="sname" size="24"> (可包含 a-z、0-9 和下劃線)</TD> </TR> <TR class="register_table_line"> <TD width="160" align="right" bgcolor="#E7FBFF">密碼:</TD> <TD align="left" bordercolor="#E7E3E7"> <INPUT name="pass" type="password" class="register_textBroader" id="pass" size="26"> (至少包含 6 個(gè)字符) </TD> </TR> <TR class="register_table_line"> <TD width="160" height="0" align="right" bgcolor="#E7FBFF">再次輸入密碼:</TD> <TD height="0" align="left" bordercolor="#E7E3E7"><INPUT name="rpass" type="password" class="register_textBroader" id="rpass" size="26"></TD> </TR> <TR class="register_table_line"> <TD width="160" height="0" align="right" bgcolor="#E7FBFF">電子郵箱:</TD> <TD height="0" align="left" bordercolor="#E7E3E7"><INPUT name="email" type="text" class="register_textBroader" id="email" size="24">(必須包含 @ 字符)</TD> </TR> <TR class="register_table_line"> <TD width="160" align="right" bgcolor="#E7FBFF">性別:</TD> <TD align="left" bordercolor="#E7E3E7"> <INPUT name="gen" type="radio" value="男" checked> 男 <INPUT name="gen" type="radio" value="女" class="input"> 女 </TD> </TR> <TR class="register_table_line"> <TD width="160" align="right" bgcolor="#E7FBFF">愛好:</TD> <TD align="left" bordercolor="#E7E3E7"> <LABEL> <INPUT type="checkbox" name="checkbox" value="checkbox"> </LABEL> 運(yùn)動(dòng) <LABEL> <INPUT type="checkbox" name="checkbox2" value="checkbox"> </LABEL> 聊天 <LABEL> <INPUT type="checkbox" name="checkbox22" value="checkbox"> </LABEL> 玩游戲 </TD> </TR> <TR class="register_table_line"> <TD width="160" align="right" bgcolor="#E7FBFF">出生日期:</TD> <TD align="left" bordercolor="#E7E3E7"> <INPUT name="byear" class="register_textBroader" id="byear" onFocus="this.value=''" value="yyyy" size=4 maxLength=4 > 年   <SELECT name="bmon" > <OPTION value="" selected>[選擇月份] <OPTION value=0>一月 <OPTION value=1>二月 <OPTION value=2>三月 <OPTION value=3>四月 <OPTION value=4>五月 <OPTION value=5>六月 <OPTION value=6>七月 <OPTION value=7>八月 <OPTION value=8>九月 <OPTION value=9>十月 <OPTION value=10>十一月 <OPTION value=11>十二月 </SELECT> 月  <INPUT name="bday" class="register_textBroader" id="bday" onFocus="this.value=''" value="dd" size=2 maxLength=2 >日 </TD> </TR> <TR class="register_table_line"> <TD width="160" height="35" align="right" bgcolor="#E7FBFF"> <INPUT type="reset" name="Reset" value=" 重 填 "></TD> <TD height="35" align="left" bordercolor="#E7E3E7"> <INPUT type="submit" name="Button" value="同意以下服務(wù)條款,提交注冊(cè)信息"> </TD> </TR> <TR> <TD colspan="2"><TABLE width="760" border="0"> <TR> <TD height="36"> <H4>閱讀淘寶網(wǎng)服務(wù)協(xié)議 </H4> </TD> </TR> <TR> <TD height="120"> <TEXTAREA name="textarea" cols="80" rows="6"> 歡迎閱讀服務(wù)條款協(xié)議,本協(xié)議闡述之條款和條件適用于您使用Taobao.com網(wǎng)站的各種工具和服務(wù)。 本服務(wù)協(xié)議雙方為淘寶與淘寶網(wǎng)用戶,本服務(wù)協(xié)議具有合同效力。 淘寶的權(quán)利和義務(wù) 1.淘寶有義務(wù)在現(xiàn)有技術(shù)上維護(hù)整個(gè)網(wǎng)上交易平臺(tái)的正常運(yùn)行,并努力提升和改進(jìn)技術(shù),使用戶網(wǎng)上交易活動(dòng)的順利。 2.對(duì)用戶在注冊(cè)使用淘寶網(wǎng)上交易平臺(tái)中所遇到的與交易或注冊(cè)有關(guān)的問題及反映的情況,淘寶應(yīng)及時(shí)作出回復(fù)。 3.對(duì)于在淘寶網(wǎng)網(wǎng)上交易平臺(tái)上的不當(dāng)行為或其它任何淘寶認(rèn)為應(yīng)當(dāng)終止服務(wù)的情況,淘寶有權(quán)隨時(shí)作出刪除相關(guān)信息、終止服務(wù)提 供等處理,而無須征得用戶的同意。 4.因網(wǎng)上交易平臺(tái)的特殊性,淘寶沒有義務(wù)對(duì)所有用戶的注冊(cè)資料、所有的交易行為以及與交易有關(guān)的其他事項(xiàng)進(jìn)行事先審查。 </TEXTAREA> </TD> </TR> </TABLE></TD> </TR> </FORM> </TABLE> </div> </body> </html>
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- jQuery ajax MD5實(shí)現(xiàn)用戶注冊(cè)即時(shí)驗(yàn)證功能
- JQuery validate插件驗(yàn)證用戶注冊(cè)信息
- 使用struts2+Ajax+jquery驗(yàn)證用戶名是否已被注冊(cè)
- jquery+ajax實(shí)現(xiàn)注冊(cè)實(shí)時(shí)驗(yàn)證實(shí)例詳解
- PHP+jQuery 注冊(cè)模塊的改進(jìn)(一):驗(yàn)證碼存入SESSION
- struts2+jquery組合驗(yàn)證注冊(cè)用戶是否存在
- jQuery實(shí)現(xiàn)用戶注冊(cè)的表單驗(yàn)證示例
- 使用jQuery validate 驗(yàn)證注冊(cè)表單實(shí)例演示
- ASP.NET jQuery 實(shí)例12 通過使用jQuery validation插件簡(jiǎn)單實(shí)現(xiàn)用戶注冊(cè)頁面驗(yàn)證功能
- Asp.net下利用Jquery Ajax實(shí)現(xiàn)用戶注冊(cè)檢測(cè)(驗(yàn)證用戶名是否存)
相關(guān)文章
用jquery實(shí)現(xiàn)輸入框獲取焦點(diǎn)消失文字
文本框中經(jīng)常會(huì)有提示你輸入的信息,當(dāng)你點(diǎn)擊文本框,提示信息自動(dòng)消失,下面也為大家介紹下輸入框消失文字的方法,感興趣的朋友可以參考下2013-04-04jQuery UI結(jié)合Ajax創(chuàng)建可定制的Web界面
這篇文章主要為大家詳細(xì)介紹了jQuery UI結(jié)合Ajax創(chuàng)建可定制的Web界面,如何利用Ajax和jQuery UI創(chuàng)建具有各種定制功能的高度可定制的UI,感興趣的小伙伴們可以參考一下2016-06-06jquery滾動(dòng)加載數(shù)據(jù)的方法
這篇文章主要介紹了jquery滾動(dòng)加載數(shù)據(jù)的方法,實(shí)例分析了jQuery動(dòng)態(tài)加載數(shù)據(jù)的技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-03-03EasyUI實(shí)現(xiàn)二級(jí)頁面的內(nèi)容勾選的方法
在使用EasyUI的時(shí)候,我們經(jīng)?;赜龅皆诙?jí)頁面進(jìn)行勾選的時(shí)候,這里給大家分享一個(gè)比較簡(jiǎn)單實(shí)用的實(shí)現(xiàn)方法,希望大家能夠喜歡。2015-03-03jquery.idTabs 選項(xiàng)卡使用示例代碼
idTabs是基于Jquery編寫封裝的一個(gè)插件,主要用于實(shí)現(xiàn)選項(xiàng)卡功能,下面是它的具體使用2014-09-09jquery獲取當(dāng)前點(diǎn)擊的元素的五種方法介紹
我們可以使用$(this)方法獲取事件處理函數(shù)內(nèi)部的當(dāng)前元素,也可以使用e.target方法在外部獲取當(dāng)前元素,此外,我們還介紹了parent()方法和find()方法獲取當(dāng)前元素的父元素或子元素,以及closest()方法獲取當(dāng)前元素最近的祖先元素2023-08-08Jquery Validation插件防止重復(fù)提交表單的解決方法
在項(xiàng)目開發(fā)中,測(cè)試人員報(bào)告缺陷說,即時(shí)有表單驗(yàn)證,但是如果快速點(diǎn)擊兩下“提交”按鈕,系統(tǒng)會(huì)產(chǎn)生兩條相同的記錄。2010-03-03輕松學(xué)習(xí)jQuery插件EasyUI EasyUI創(chuàng)建RSS Feed閱讀器
這篇文章主要幫助大家輕松學(xué)習(xí)jQuery插件EasyUI,我們將通過 jQuery EasyUI框架創(chuàng)建一個(gè)RSS閱讀器,感興趣的小伙伴們可以參考一下2015-11-11