日期: 2023.10.26 星期二

使用者資料驗證

前言

 為避免使用者輸入錯誤的資料，進入資料庫處裡，所以須有資料驗證的功能來確保資料是正確的，不同的程式會使用不同的技術，針對 WebForm 技術，微軟 已建立好一些控制項來做資料驗證功能。

實例說明

  1. 欄位一定需有值，否則報錯

    1. 建立一 WebForm1，介面提供 Label*1(Label1), TextBox*1(TextBox2)，Button*1(Button1)
    2. Label1.Text = "Name"
    3. 點擊工具箱項目，選取驗證，選取RequiredFieldValidator，將該控制項元件拖曳至報錯時欲顯示位置，這裡放在 TextBox1 右邊。
    4. 修改 RequiredFieldValidator 的屬性:
      • ErrorMessage = Require input your name # 錯誤訊息提示
      • ForeColor = Red # 字體顏色
      • ControlToValidate = TextBox1 # 指定欲控制哪一欄位要做驗證
    5. 儲存專案，執行該 WebForm1 會報錯。
    6. 解決方法
      1. RequiredFieldValidator 的屬性，將 EnableClientScript 改設為 False。
        不在 Client 端檢查資料，資料送出後，交由 Server 端檢查資料。
        因為 EnableClientScript 設為 True 時，意指讓 Client 端的 Script 可以執行，Asp.NET 引擎會依據這控制項 RequiredFieldValidator下載 JS 程式，當於輸入框你輸入完內容時會自動做驗證(Server 端下載該 JS 程式碼給 Client 端)，Client 端的 Browser 會去執行這程式碼，直接幫你做驗證動作，驗證有無資料，無資料就報錯，有資料就提交資料出去，這功能需有 JQuery，沒有的話 Client 會掛掉。
        重新執行該專案，在輸入框無輸入資料時，滑鼠點擊外側任一位置時，Client 處不作驗證，交由伺服器端做驗證(在按下按鈕後)。
      2. RequiredFieldValidator 的屬性，將 EnableClientScript 設為 True。
        網站上先行安裝 jQuery 套件，使用 NuGet 套件管理工具(工具 > NuGet 套件管理員 > 管理方案的 NuGet 套件)
        [瀏覽] > 搜尋 scriptmanager 找出 script 的相關套件，選擇 AspNet.ScriptManager.jQuery，右側視窗勾選欲安裝在哪一個專案上。按下安裝會下載指定套件到專案的方案總管內。安裝完畢後會看到專案將多一資料夾 Scripts。
        重新執行該專案，在輸入框無輸入資料時，滑鼠點擊外側任一位置時，在 Client 直接執行 Script 檢查資料，並沒有送到伺服器做驗證。

  2. 驗證欄位值，一定範圍(10~80)

    1. 在 WebForm1，介面提供 Label*1(Label2), TextBox*1(TextBox2)，Button*1(Button2)
    2. Label2.Text = "Age"
    3. 點擊工具箱項目，選取驗證，選取RangeValidator，將該控制項元件拖曳至報錯時欲顯示位置，這裡放在 TextBox2 右邊。
    4. 修改 RangeValidator 的屬性:
      • ErrorMessage = 10~80 # 錯誤訊息提示
      • ForeColor = Red # 字體顏色
      • ControlToValidate = TextBox2 # 指定欲控制哪一欄位要做驗證
      • EnableClientScript = False # Client 不做驗證、交由伺服器端去驗證(在按下按鈕後)
      • MaxmunValue = 10 # 輸入資料最大值
      • MinmunValue = 80 # 輸入資料最小值
      • Type = Intrger # 指定輸入資料類型，驗證控制項會將輸入的資料字串先傳成整數在去作範圍驗證

  3. 驗證欄位值，一定範圍(10~80)的驗證，輸入小於 10 顯示太小數值，輸入大於 80 顯示太大數值。
    因為驗證是在伺服器端作，所以就可以改變驗證的錯誤訊息，不管哪一模式，按下按鈕後，伺服器都會驗證資料所以:

    ``c# protected void Button1_Click(object sender, EventArgs e){ //假設只有 Age 欄位會出錯 //須先作 if 判斷，因為資料驗證時機在於 物件已產生後，接著所有Page_Load事件也執行完畢，接著就會執行所有的驗證，所以驗證工作是在所有事件被執行之前執行，所有驗證都執行完畢， //這網頁有一個屬性:Validate當所有驗證都成功時它才會是True`
    //this 即指 Page
    //Name 不會錯因 Client 端有先作驗證，這裡只有 Age 因它是在伺服端執行驗證的
    //驗證有錯
    if(!this.IsValid){
    //判斷是否 TextBox2 的輸入值大於 RangeValidator 屬性設定的最大值
    if ( Int32.parse(TextBox2.Text) > Int32.Parse(RangeValidator.MaximumValue) ){
    RangeValidator1.ErrorMessage = "Too Large";
    }else{
    RangeValidator1.ErrorMessage = "Too Small";
    }
    }
    }

    

> 這方法只能用在伺服起端，Client 端不可以作

  4. 驗證 Email 格式
    使用 Regular Expression(正規表達式) 使用特定的 字串 Pattern(樣式)，

    1. 在 WebForm1，介面提供 Label*1(Label3), TextBox*1(TextBox3)，Button*1(Button3)
    2. Label3.Text = "Email"
    3. 點擊工具箱項目，選取驗證，選取RegularExpressionValidator，將該控制項元件拖曳至報錯時欲顯示位置，這裡放在 TextBox3 右邊。
    4. 修改 RegularExpressionValidator 的屬性:
      • ErrorMessage = Wrong Email Format # 錯誤訊息提示
      • ForeColor = Red # 字體顏色
      • ControlToValidate = TextBox3 # 指定欲控制哪一欄位要做驗證
      • EnableClientScript = False # Client 不做驗證、交由伺服器端去驗證(在按下按鈕後)
      • ValidationExpression = 網際網路電子郵件地址 # 驗證格式
  5. 驗證 Password 兩次
    1. 在 WebForm1，介面提供 Label*2(Label4、Label5), TextBox*2(TextBox4、TextBox5)，Button*1(Button4)
    2. Label4.Text = "Password"，Label5.Text = "Retype"
    3. 點擊工具箱項目，選取驗證，選取CompareValidator，將該控制項元件拖曳至報錯時欲顯示位置，這裡放在 TextBox5 右邊。
    4. 修改 CompareValidator 的屬性:
      • ErrorMessage = Password Inconsistent # 錯誤訊息提示
      • ForeColor = Red # 字體顏色
      • ControlToCompare = TextBox4 # 指定要跟哪一控制項作比較 password (TextBox4)
      • ControlToValidate = TextBox5 # 指定哪一欄位要做驗證 retype (TextBox5)
      • Operator = Equal # 比較的運算子
      • EnableClientScript = False # Client 不做驗證、交由伺服器端去驗證(在按下按鈕後)
    5. 修改 TextBox4 與 TextBox5 的屬性 TextMode = Password # 隱藏輸入資料

工具箱的控制項中有一 Calender 現在可能用不到，因早期 Html1 ~ Html4 的版本並沒有 Calender 標籤可使用，但 HTML5 中有 <input type="date"> 可以產生月曆

過去的做法是:

  1. 建立 WebForm，UI 如下:

    • TextBox1
    • Button1
    • Calender1

  2. 讓 Calender1 不顯示: Calender.Visible = False。 當未按下按鈕時，不應該出現月曆。

  3. 點擊 Button1 時，讓月曆出現

    protected void Button1_Click(object sender, EventArgs e){
  Calender1.Visible = true;
}

現在的做法:

  1. 建立 WebForm，UI 如下:

    • TextBox1
    • Button1
  2. TextBox1 設定屬性 TextMode = Date 後，瀏覽器就會執行這月曆的功能。

資料庫

案例: 登入使用者註冊帳號、密碼

資料庫建立

  1. 伺服器總管視窗若沒出現時: 執行檢視 > 伺服器總管
    20231109134222

  2. 選擇左下視窗上的伺服器總管後然後選擇項目: 伺服器下的資料連接
    20231109135811
    滑鼠右鍵選擇

    • 加入連接: 其他的資料庫型態連接時，選此項。
    • 建立新的 SQL Server 資料庫: 如果是使用 MSSQL 資料庫，就直接使用這項目，

    這裡選擇加入連接
    20231109135013
    出現
    20231109135943

    1. 加入連接:

      • Microsoft Access 資料庫檔案: 個人版的資料庫
      • Microsoft ODBC 資料來源: 想與 DB2 或 MySQL 資料庫連接時，選此項。 像是一個 Middleware
      • Microsoft SQL Server: 選此項。 Microsoft SQL Server (SqlClient)
      • Microsoft SQL Server 資料庫檔案: 資料會直接存在網站上的檔案
      • Oracle Database:
      • <其他>:

      這裡選擇 Microsoft SQL Server

      20231109162642

      20231109140428

    2. 加入連接
      • 資料來源: Microsoft SQL Server(SqlClient)
      • 伺服器名稱: 過去不同版本伺服器名稱寫法不同，但後來只要是連接本地端資料庫寫法都是: (localdb)mssqllocaldb，不然就是主機 IP
      • 登入伺服器:
        • 驗證
          • Windows 驗證 (只要能登入的使用者都可以使用)
          • SQL Server 驗證: 正式用需帳密
          • Active Directory 密碼驗證
          • Active Directory 整合式驗證
            這裡選用: Windows 驗證
      • 連接至資料庫:
        • 選取或輸入資料庫名稱: 若連接設定正常，就可以看到有哪些資料庫 (master、model、msdb、tempdb)，這裡給一新資料庫名稱 im，按下 是 來建立該資料。這時資料連接下面會產生一先資料庫。
          20231109142201
        • 附加資料庫檔案
          按下測試連接，若沒問題，就可按下確定。
          20231109142248

  3. 資料表建立
    資料表上，按下滑鼠右鍵，選擇加入新的資料表。

    界面:
    名稱    		 資料型別 允許 Null 預設值
    U_ID varchar(30)
    U_Pass varchar(50)

    T-SQL:

    CREATE TABLE [dbo].[USERS]
(
  [U_ID] VARCHAR(30) NOT NULL,
  [U_Pass] VARCHAR(50) NOT NULL,
  CONSTANT [PK_Table] PRIMARY KEY ([U_ID])
)

    [] 中括號目的是名稱有空白時，dbo(databse owner)，以 dbo 身分操作此資料庫， [Table] 手動改成 [Users] 為資料表名稱

    點擊 更新 讓資料庫管理系統來執行你的 T-SQL 指令。
    接下來會詢問要作下面哪一動作:

    • 產生指令碼: 把剛剛指令給你，自己在丟給資料庫管理系統
    • 更新資料庫: 直接把指令丟給資料庫管理系統，讓它執行 T-SQL 指令。 選此項
    • 取消:

    伺服器總管左上角點擊後，就會更新資料庫最新狀態的資料，更新後就可以看到資料表 Users 被產生了。

  4. 新增資料
    選擇資料表 Users 後，點擊滑鼠右側，選擇顯示資料表資料，然後在出現視窗上開始編輯與新增資料

    U_ID U_Pass
    1234 1234
    abcd abcd

    打完一筆資料庫管理系統自動將這筆資料寫入資料庫，可以按下左上角確認內容，刪除可以顯取該筆後，點擊滑鼠右鍵後選擇刪除。

最後修改日期: 2023 年 11 月 22 日

作者

留言

撰寫回覆或留言

發佈留言必須填寫的電子郵件地址不會公開。