1. 程式人生 > >[第一次機房收費系統]修改密碼介面優化

[第一次機房收費系統]修改密碼介面優化

前言

看到標題的時候不知道會不會有同學問,修改密碼介面有什麼可優化的呢?當然有的啊,其實不管是任何一個介面,都有更好的方式來展現,因為世界上任何一個程式都不是最完美的,都是需要一步步的改變來變的更好。

正文

當時在敲修改密碼窗體的時候突然想,先看看別的網站上修改密碼的介面是什麼樣子的,然後開啟網易的修改密碼介面,然後發現“設定新密碼”和“確認新密碼”不是在文字框的前面而是在文字框內,當輸入密碼的時候這些文字將消失不見,文字框為空的時候又會出現,這樣顯得漂亮而又簡潔,感覺很不錯,於是就想按著這個標準去做

網易郵箱修改密碼介面

這裡寫圖片描述

這裡寫圖片描述

首先,先做個介面出來

這裡寫圖片描述

這裡寫圖片描述

三個Text文字框,先在文字框中設定好Text屬性,分別為輸入原密碼、設定新密碼和確認新密碼。還有一個Label控制元件,然後加了個Timer控制元件為了讓Label控制元件中的字型變顏色。

先看看Label控制元件中字型變顏色的程式碼吧,其實很簡單,在登入窗體和主窗體都用到了這類程式碼控制顏色的變化,在之前的學生資訊管理系統中也用到了這類程式碼

其實很簡單,就一行程式碼,Label1中字型顏色Red、Green、Blue根據Timer空間的時間加1,就能隨機產生不同的顏色啦,Timer控制元件中Interval屬性隨便設定,1000代表的是1秒。

控制顏色隨機變化程式碼:

Private Sub Timer1_Timer()
    label1.ForeColor = RGB(255 * Rnd + 5, 255 * Rnd + 5, 255 * Rnd + 5)
End Sub

接下來看Text文字框中該怎麼設定呢?

剛開始我是用的Click事件,當單擊到某Text文字框時,文字框中的輸入原密碼或者其他的文字消失不見,這樣也就可以提示使用者此文字框要輸入的是什麼,當單擊後要輸入的時候提示又不見了。後來發現這樣跟網易修改密碼有很大的差距,若使用者什麼也沒有輸入,此Text文字框為空的時候再單擊下一個Text文字框,此Text文字框的提示不會再出現。也就是說,只要單擊一次,提示就會消失。又或者使用者不用單擊呢?直接按Tab鍵跳轉下一個文字框的時後,Text文字框中的提示根本就不會消失。

後來就想,當前操作的是哪個Text文字框,游標就會在哪個Text文字框,這樣就可以用游標事件啊,當游標到達某一個Text文字框的時候,此Text文字框中提示文字消失,游標離開的時候判斷若文字框中為空,則此Text文字框中再次出現提示資訊,若不為空不執行任何操作。這樣不管使用者是利用單擊還是Tab鍵都可以實現這樣的小功能了。

游標事件程式碼如下:(GotFocus和LostFocus分別為游標進入和游標離開事件)

Private Sub Text2_GotFocus()
    If Text2.Text = "·輸入原密碼" Then
        Text2.Text = ""   
    End If
End Sub

Private Sub Text2_LostFocus()
    If Text2.Text = "" Then
        Text2.Text = "·輸入原密碼"
    End If
End Sub

Private Sub Text3_GotFocus()
    If Text3.Text = "·設定新密碼" Then
        Text3.Text = ""
    End If
End Sub

Private Sub Text3_LostFocus()
    If Text3.Text = "" Then
        Text3.Text = "·設定新密碼"
    End If
End Sub

Private Sub Text4_GotFocus()
    If Text4.Text = "·確認新密碼" Then
        Text4.Text = ""
    End If
End Sub

Private Sub Text4_LostFocus()
    If Text4.Text = "" Then
        Text4.Text = "·確認新密碼"
    End If
End Sub

沒錯,就是這麼簡單的幾行程式碼!

點選確認修改密碼時候的程式碼,之前想如果Text文字框中為“請輸入原密碼”這些提示的時候就讓它判斷為空的,後來開始敲程式碼的時候發現,不必這樣麻煩。首先,判斷第二個Text文字框和第三個Text文字框中內容是否一致(設定新密碼和確認新密碼Text文字框),若兩個Text文字框中內容不一致,提示使用者內容不一致並且不能修改密碼。這是若使用者沒有輸入任何內容的情況下,兩個Text文字框中內容分別為“設定新密碼”和“確認新密碼”,文字框中內容不一致,無法修改密碼,若一個文字框中輸入另一個沒有輸入或者兩個都輸入內容但內容不一樣的情況下,內容不一致,無法修改密碼。

這裡寫圖片描述

這裡寫圖片描述

若第二個Text文字框和第三個Text文字框中內容是一致,然後再判斷原密碼是否正確,若不對第一個Text文字框輸入內容,此時文字框內容為“輸入原密碼”,因為密碼只可以是數字和字母,所以此時密碼肯定和資料庫中密碼不對應,所以提示原密碼錯誤。

這裡寫圖片描述

所以,在Text文字框中加入提示資訊並不會影響系統的穩定性,僅僅只是為了簡單、美觀和好玩。

修改密碼程式碼:

Private Sub cmdOK_Click()
Dim txtSQL, MsgText As String
Dim mrc As ADODB.Recordset
If Trim(Text3.Text) <> Trim(Text4.Text) Then
'判斷兩次輸入的新密碼是否一致,若不一致
    MsgBox "新密碼輸入不一致!", vbOKOnly + vbExclamation, "警告"
    Text2.Text = "·輸入原密碼"
    Text3.Text = "·設定新密碼"
    Text4.Text = "·確認新密碼"
Else
'若兩次新密碼一致
    txtSQL = "select * from User_Info where userID='" & UserName & "'"
    '查詢輸入的原密碼是否和資料庫中一致
    Set mrc = ExecuteSQL(txtSQL, MsgText)
    If Trim(Text2.Text) <> Trim(mrc.Fields(1)) Then
    '若與資料庫中密碼不一致
        MsgBox "原密碼錯誤!", vbOKOnly + vbExclamation, "警告"
        Text2.Text = "·輸入原密碼"
        Text3.Text = "·設定新密碼"
        Text4.Text = "·確認新密碼"
    Else
    '若與資料庫中密碼一致,更新新密碼到資料庫中
        mrc.Fields(1) = Text3.Text
        mrc.Update
        mrc.Close
        MsgBox "密碼修改成功!", vbOKOnly + vbExclamation, "警告"
        Me.Hide
    End If
End If
End Sub

介面展示

沒有任何操作時修改密碼窗體的介面

這裡寫圖片描述

當游標移動到第一個Text文字框時修改密碼窗體的介面

這裡寫圖片描述

讓第一個Text文字框為空,游標移動到第二個Text文字框時修改密碼窗體的介面

這裡寫圖片描述

第一個Text文字框輸入原密碼後游標移動到第二個Text文字框時修改密碼窗體的介面

這裡寫圖片描述

總結

簡單的幾行程式碼就可以實現這麼好玩的東西,真的是令我十分的興奮和激動。每一個小的介面,都讓它變得好玩、變得簡潔漂亮,人生也是這樣,每一件小事情,都讓它變得好玩,變得簡單而又有意義,這樣,我們就是快樂的!