Dreamweaver構(gòu)建Blog全程實(shí)錄(6)-用戶注冊的實(shí)現(xiàn)

2024-04-27 13:54:38

字體：大中小

供稿：網(wǎng)友

第六章 Doking’s BLOG用戶注冊頁面的實(shí)現(xiàn)

　　有人發(fā)覺：那用戶要到哪里發(fā)表筆記、回復(fù)呢？這是第六、七章將要解決的問題。這一章主要講解用戶注冊頁面的實(shí)現(xiàn)。

6.1 基本頁面設(shè)計(jì)

　　6.1.1 模板bkblog.dwt.aspx頁面的修改

　　（1）打開模板bkblog.dwt.aspx，在左邊欄目插入表格Lefttab，在第一行中插入表單Yhlogfrm，在表單Yhlogfrm中插入表格logtab，并插入有關(guān)文本框、文本區(qū)域及按鈕，結(jié)果如圖6-1-1所示：

圖6-1-1 模板中用戶登錄設(shè)計(jì)

　　（2）將作者相應(yīng)的文本框命名為Logname；將密碼相應(yīng)的文本框命名為Logpass，類型改為密碼；“注冊”按鈕的動(dòng)作改為“無”；把“登錄”按鈕的動(dòng)作改為“提交表單”。

　　（3）選擇按鈕“注冊”按鈕，在【行為】面板中，添加行為轉(zhuǎn)到URL，在彈出的對話框中，輸入鏈接為“../yhinlog.aspx” 如圖6-1-2所示：

圖6-1-2 添加轉(zhuǎn)到URL的行為

　　（4）保存模板，更新所有的網(wǎng)頁。

　　6.1.2 注冊頁面的設(shè)計(jì)

　　（1）新建由模板bkblog.dwt.aspx生成的asp.net VB 動(dòng)態(tài)頁yhinlog.aspx，在mainbody可編輯區(qū)域中插入表單Yhinfrm，再插入表格yhinlog，并進(jìn)行有關(guān)設(shè)計(jì)，結(jié)果如圖6-1-3所示：

圖6-1-3 表格yhinlog的設(shè)計(jì)

　　（2）選擇用戶名相應(yīng)的文本框，切換到標(biāo)簽面板，展開“CSS/輔助功能”，在id中輸入YHNAME；展開“未分類”，輸入runat，server，把YHNAME文本框改為服務(wù)器控件，如圖6-1-4所示：

圖6-1-4 修改文本框標(biāo)簽

　　（3）依此類推，密碼相應(yīng)的文本框命名為YHPASS，密碼再確認(rèn)相應(yīng)的文本框命名為REPASS，QQ碼相應(yīng)的文本框命名為YHQQ，Email相應(yīng)的文本框命名為YHEMAIL，主頁相應(yīng)的文本框命名為YHINDEX，將所有文本框改為服務(wù)器控件。

　　（4）選擇表單Yhinfrm，并將其改為服務(wù)器控件，保存yhinlog.aspx。

　　6.1.3 完成注冊頁面的設(shè)計(jì)

　　（1）由模板bkblog.dwt.aspx新建動(dòng)態(tài)動(dòng)態(tài)網(wǎng)頁yhlogok.aspx，在mainbody可編輯區(qū)域中插入三行一列的表格logok，在第二行中輸入文字“歡迎”，點(diǎn)擊ASP.NET快捷菜單中的“綁定數(shù)據(jù)”，再點(diǎn)擊“修剪的表單元素”，把光標(biāo)移到如圖6-1-5所示的位置，輸入“YHNAME”。

圖6-1-5 插入修剪的表單元素

　　（2）返回設(shè)計(jì)視圖，繼續(xù)輸入文字“Donking's BLOG！”，并、對表格logok，進(jìn)行有關(guān)設(shè)計(jì)，結(jié)果如圖6-1-6所示：

圖6-1-6 表格logok的設(shè)計(jì)

　　（3）選擇按鈕“主頁”按鈕，在【行為】面板中，添加行為轉(zhuǎn)到URL，在彈出的對話框中，輸入鏈接為“index.aspx”，保存yhlogok.aspx

6.2驗(yàn)證用戶注冊

　　為了防止用戶輸入錯(cuò)誤的注冊信息，要對用戶注冊信息進(jìn)行規(guī)范和驗(yàn)證。

　　（1）打開yhinlog.aspx，打開ASP.NET快捷菜單，點(diǎn)擊【更多標(biāo)簽】，如圖6-2-1所示：

圖6-2-1 ASP.NET 快捷菜單

　　（2）在彈出的標(biāo)簽選擇器中展開“ASP.NET 標(biāo)簽”→“驗(yàn)證服務(wù)器控件”，在右窗架中選中“asp:RequiredFieldvalidator”，單擊“插入”按扭，如下圖6-2-2所示：

圖6-2-2 標(biāo)簽選擇器

　　（3）在彈出的標(biāo)簽編輯器中，為文本框YHNAME添加驗(yàn)證控件，填寫各項(xiàng)如圖6-2-3所示：

圖6-2-3 RequiredFieldValidator標(biāo)簽編輯器

　　（4）打開標(biāo)簽選擇器，插入ASP.NET驗(yàn)證服務(wù)器控件→CompareValidator控件，為文本框YHPASS添加與REPASS文本框?qū)Ρ闰?yàn)證控件，填有關(guān)信息如圖6-2-4所示：

圖6-2-4 CompareValidato標(biāo)簽編輯器

　　（5）插入ASP.NET驗(yàn)證服務(wù)器控件→Rangevalidator控件，為文本框YHQQ添加驗(yàn)證控件，填有關(guān)信息如圖6-2-5所示：

圖6-2-5 Range validator標(biāo)簽編輯器

　　（6）插入ASP.NET驗(yàn)證服務(wù)器控件→RegularexPRessionvalidator控件，為文本框YHEMAIL添加驗(yàn)證控件，填各項(xiàng)如圖6-2-6所示，其中的驗(yàn)證表達(dá)式為：/w+([-+.]/w+)*@/w+([-.]/w+)*/./w+([-.]/w+)*

圖6-2-6 Regular expression validator標(biāo)簽編輯器

　　（7）插入ASP.NET驗(yàn)證服務(wù)器控件→Regularexpressionvalidator控件，為文本框YHINDEX添加驗(yàn)證控件，填寫各項(xiàng)如圖6-2-7所示，其中的驗(yàn)證表達(dá)式為：http://([/w-]+/.)+[/w-]+(/[/w- ./?%&=]*)?

圖6-2-7 Regular expression validator 標(biāo)簽編輯器

　　（8）應(yīng)該再一個(gè)驗(yàn)證控件防止用戶注冊的用戶名重復(fù)。

　　①添加數(shù)據(jù)集yhinlog，設(shè)為篩選，篩選字段為YHNAME，參數(shù)變量為來之表單變量YHNAME，其設(shè)置如圖6-2-8所示：

圖6-2-8 插入數(shù)據(jù)集yhinlog

　　②插入ASP.NET驗(yàn)證服務(wù)器控件→CustomValidator控件，為文本框YHINDEX再添加驗(yàn)證控件，填寫各項(xiàng)如圖6-2-9所示，其中的客戶端驗(yàn)證功能為：

<%# IIf(yhinlog.RecordCount>0,FALSE,TRUE) %>

圖6-2-9 Custom Validator標(biāo)簽編輯器

　　（9）保存yhinlog.aspx，在IE中進(jìn)行瀏覽，如果出現(xiàn)圖6-2-10所示的對話框，那說明的dklog站點(diǎn)根目錄下沒有子目錄aspnet_client，也是就沒有驗(yàn)證控件必要的JS腳本庫。這個(gè)在安裝.NET框架的時(shí)候，安裝程序已經(jīng)復(fù)制在默認(rèn)站點(diǎn)c:/ Inetpub/wwwroot的根目錄下，復(fù)制c:/ Inetpub/wwwroot中的子目錄aspnet_client到dkblog站點(diǎn)根目錄下，就OK了！