2018年6月7日 星期四

[jQuery] validate.unobtrusive 驗證(1) 基本用法

環境，在 vs2013 中建立 mvc 預設專案 (就是會有預設的頁面的那種)，再將其中的幾個
js 檔取出來做測試

jquery.validate 加上 validate.unobtrusive 基本上就是達成以 unobtrusive 的方
式對頁面上的欄位進行驗證。

因為是以 unobtrusive 進行，所以如何去設定欄位如何去驗證這件事情，就由原本放在
onclick 或 blur 之類的事件中，去指定並取得欄位值的方式，轉而改用設定屬性指定
要是否要驗證及驗證方式。

在使用上，有分幾個方向 (本篇是第一種)

    第一種就是只對單一欄位，以內建預設的基本檢核，比方說欄位不可為空，Email 格
    式是否正確這種。

    第二種稍微複雜一點，需要再另行決定一些「資訊」比方說，檢查欄位的值是否在某個
    區間中，這個區間就是必須要自行決定的範圍，或是需要透過正則表達式檢查欄位。

    第三種是透過 Ajax 呼叫後端進行檢查

    第四種則是自定驗證。

基本的使用

  1. <html>
  2.         <head>
  3.             <script src="Scripts\jquery-1.10.2.js"></script>
  4.             <script src="Scripts\jquery.validate.js"></script>
  5.             <script src="Scripts\jquery.validate.unobtrusive.js"></script>
  6.         </head>
  7.         <body>
  8.             <form id="form1" method="get">
  9.  
  10.                 <!-- 透過設定 data-val="true" 表示要進行驗證該 tag -->
  11.                 <!-- 透過設定 data-val-required="欄位不可為空" 表示要以該欄位不可為空的條件驗證該欄位，並當檢核失敗時顯示錯誤訊息「欄位不可為空！」 -->
  12.                 <input type="text" name="username" id="username" data-val="true" data-val-required="欄位不可為空！" />
  13.  
  14.                 <!-- 下面的 tag 會顯示 name 屬性為 username 的 tag 進行驗證時所產生的錯誤訊息 -->
  15.                 <!-- data-valmsg-for 是對應到受驗證欄位的 name -->
  16.                 <!-- data-valmsg-replace 為必要 (有試過有些版本的驗證不用) -->
  17.                 <span data-valmsg-for="username" data-valmsg-replace="true"></span>
  18.  
  19.                 <!-- 下面的 tag 會將頁面上驗證的錯誤訊息都集中在這 -->
  20.                 <div class="validation-summary-valid" data-valmsg-summary="true">
  21.                     <ul>
  22.                         <li style="display: none"></li>
  23.                     </ul>
  24.                 </div>
  25.  
  26.                 <input type="submit" id="send" value="Send" />            
  27.             </form>
  28.         </body>
  29.     </html>
欄位不可為空 
  1. <!-- data-val-required="欄位不能为空！" -->
  2. <input type="text" name="uid" id="uid" data-val="true" data-val-required="欄位不能为空！" />
  3. <span data-valmsg-for="uid" data-valmsg-replace="true"></span>

檢查 Email 格式 
  1. <!-- data-val-email="Email不正確" -->
  2. <input type="text" name="email" id="email" data-val="true" 
  3.        data-val-required="Email 不能為空" data-val-email="Email不正確" />
  4. <span data-valmsg-for="email" data-valmsg-replace="true"></span>

檢查 url 格式 
  1. <!-- data-val-url="網址錯誤" -->
  2. <input type="text" name="url" id="url" data-val="true"
  3.        data-val-url="網址錯誤">
  4. <span data-valmsg-for="url" data-valmsg-replace="true"></span>

日期驗證有一套規則，我是覺的不太好用，或許用自定驗證來處理會比較恰當 
  1. <!-- data-val-date="日期錯誤" -->
  2. <input type="text" name="ndate" id="ndate" data-val="true" value=""
  3.        data-val-date="日期錯誤">                
  4. <span data-valmsg-for="ndate" data-valmsg-replace="true"></span>

正整數 
  1. <!-- data-val-digits="必須輸入正整數" -->
  2. <input type="text" name="digits" id="digits" data-val="true"
  3.        data-val-digits="必須輸入正整數">
  4. <span data-valmsg-for="digits" data-valmsg-replace="true"></span>

檢查所輸入的是否為數字，小數可以、負數可以、整數可以 
  1. <!-- data-val-number="必須為有效數字" -->
  2. <input type="text" name="number" id="number" data-val="true"
  3.        data-val-number="必須為有效數字">
  4. <span data-valmsg-for="number" data-valmsg-replace="true"></span>

比對兩個欄位的內容是否一致 
  1.  <!-- data-val-equalto 指定欄位不一致時的錯誤訊息 -->
  2.  <!-- data-val-equalto-other 要比對的另一個欄位的 name 屬性 -->
  3.  <body>
  4.     <form id="form1" method="get">
  5.         <input type="password" name="pwd" id="pwd" data-val="true" />
  6.         <input type="password" name="pwd2" id="pwd2" data-val="true" 
  7.                data-val-equalto="兩次輸入的密碼不一致。" data-val-equalto-other="pwd"
  8.         />
  9.         <span data-valmsg-for="pwd2" data-valmsg-replace="true"></span>
  10.         <input type="submit" id="send" value="Send" />            
  11.     </form>
  12. </body>

檢查欄位內容的長度
在 data-val-length-max 和 data-val-length-min 間輸入欄位長度的上下限，如果沒有這
個屬性，就表示長度沒有上/下限，data-val-length 則是表示這個欄位需要檢查長度，
並且設定當欄位長度錯誤時要回應什麼錯誤訊息。
  1. <!-- data-val-length-max="10" data-val-length-min="6" -->
  2.     <!-- data-val-length="欄位長度需要在 6 ~ 10 個字元間" -->
  3.     <body>
  4.         <form id="form1" method="get">
  5.             <input type="text" name="columnLength" id="columnLength" data-val="true" 
  6.                 data-val-length-max="10" data-val-length-min="6"
  7.                 data-val-length="欄位長度需要在 6 ~ 10 個字元間" />
  8.             <span data-valmsg-for="columnLength" data-valmsg-replace="true"></span>
  9.             <input type="submit" id="send" value="Send" />            
  10.         </form>
  11.     </body>
張貼者： 於

沒有留言:

張貼留言

訂閱： 張貼留言 (Atom)