[第一次机房收费系统]修改密码界面优化

前端之家收集整理的这篇文章主要介绍了[第一次机房收费系统]修改密码界面优化前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

前言


看到标题的时候不知道会不会有同学问,修改密码界面有什么可优化的呢?当然有的啊,其实不管是任何一个界面,都有更好的方式来展现,因为世界上任何一个程序都不是最完美的,都是需要一步步的改变来变的更好。


正文


当时在敲修改密码窗体的时候突然想,先看看别的网站上修改密码的界面是什么样子的,然后打开网易的修改密码界面,然后发现“设置新密码”和“确认新密码”不是在文本框的前面而是在文本框内,当输入密码的时候这些文字将消失不见,文本框为空的时候又会出现,这样显得漂亮而又简洁,感觉很不错,于是就想按着这个标准去做


网易邮箱修改密码界面



首先,先做个界面出来



三个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 "原密码错误!","警告"
        Text2.Text = "·输入原密码"
        Text3.Text = "·设置新密码"
        Text4.Text = "·确认新密码"
    Else
    '若与数据库中密码一致,更新新密码到数据库中
        mrc.Fields(1) = Text3.Text
        mrc.Update
        mrc.Close
        MsgBox "密码修改成功!","警告"
        Me.Hide
    End If
End If
End Sub

界面展示


没有任何操作时修改密码窗体的界面



当光标移动到第一个Text文本框时修改密码窗体的界面



让第一个Text文本框为空,光标移动到第二个Text文本框时修改密码窗体的界面



第一个Text文本框输入原密码后光标移动到第二个Text文本框时修改密码窗体的界面



总结


简单的几行代码就可以实现这么好玩的东西,真的是令我十分的兴奋和激动。每一个小的界面,都让它变得好玩、变得简洁漂亮,人生也是这样,每一件小事情,都让它变得好玩,变得简单而又有意义,这样,我们就是快乐的!

猜你在找的VB相关文章