最原始的jQuery注冊(cè)驗(yàn)證方式
這里介紹的第一個(gè)是最原始的表單驗(yàn)證方式,即沒(méi)有使用即時(shí)驗(yàn)證,需要點(diǎn)擊提交按鈕才進(jìn)行驗(yàn)證,也沒(méi)有使用正則表達(dá)式或者AJAX驗(yàn)證,也或者是JQuery的驗(yàn)證,不過(guò)這么多驗(yàn)證方式接著第一個(gè)后面都會(huì)寫(xiě)出來(lái)的,即時(shí)驗(yàn)證,正則驗(yàn)證。
最原始的注冊(cè)驗(yàn)證方式,需要通過(guò)點(diǎn)擊提交按鈕才驗(yàn)證,具體內(nèi)容如下
先上圖:

具體代碼
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無(wú)標(biāo)題文檔</title>
</head>
<body>
<div id="content">
<!--首頁(yè)的中間部分-->
<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("登錄名無(wú)效");
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 地址無(wú)效");
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("生日無(wú)效");
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("生日無(wú)效");
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.填寫(xiě)信息 > 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">愛(ài)好:</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)的問(wè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ù)提
供等處理,而無(wú)須征得用戶的同意。
4.因網(wǎng)上交易平臺(tái)的特殊性,淘寶沒(mé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 通過(guò)使用jQuery validation插件簡(jiǎn)單實(shí)現(xiàn)用戶注冊(cè)頁(yè)面驗(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-04
jQuery UI結(jié)合Ajax創(chuàng)建可定制的Web界面
這篇文章主要為大家詳細(xì)介紹了jQuery UI結(jié)合Ajax創(chuàng)建可定制的Web界面,如何利用Ajax和jQuery UI創(chuàng)建具有各種定制功能的高度可定制的UI,感興趣的小伙伴們可以參考一下2016-06-06
jquery滾動(dòng)加載數(shù)據(jù)的方法
這篇文章主要介紹了jquery滾動(dòng)加載數(shù)據(jù)的方法,實(shí)例分析了jQuery動(dòng)態(tài)加載數(shù)據(jù)的技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-03-03
EasyUI實(shí)現(xiàn)二級(jí)頁(yè)面的內(nèi)容勾選的方法
在使用EasyUI的時(shí)候,我們經(jīng)?;赜龅皆诙?jí)頁(yè)面進(jìn)行勾選的時(shí)候,這里給大家分享一個(gè)比較簡(jiǎn)單實(shí)用的實(shí)現(xiàn)方法,希望大家能夠喜歡。2015-03-03
jquery.idTabs 選項(xiàng)卡使用示例代碼
idTabs是基于Jquery編寫(xiě)封裝的一個(gè)插件,主要用于實(shí)現(xiàn)選項(xiàng)卡功能,下面是它的具體使用2014-09-09
jquery獲取當(dāng)前點(diǎn)擊的元素的五種方法介紹
我們可以使用$(this)方法獲取事件處理函數(shù)內(nèi)部的當(dāng)前元素,也可以使用e.target方法在外部獲取當(dāng)前元素,此外,我們還介紹了parent()方法和find()方法獲取當(dāng)前元素的父元素或子元素,以及closest()方法獲取當(dāng)前元素最近的祖先元素2023-08-08
Jquery Validation插件防止重復(fù)提交表單的解決方法
在項(xiàng)目開(kāi)發(fā)中,測(cè)試人員報(bào)告缺陷說(shuō),即時(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,我們將通過(guò) jQuery EasyUI框架創(chuàng)建一個(gè)RSS閱讀器,感興趣的小伙伴們可以參考一下2015-11-11

