表單驗證就靠 Validation

Alex Liu

Published in

25sprout

6 min readMay 7, 2015

“本欄必填唷～ “
“哎呀，您的手機不符合格式耶～”
良好的 UX 需要適合的表單驗證，今天就來跟大家分享有關驗證的小技巧吧！

“ 什麼是表單驗證 ? ”
表單驗證，簡單來說就是針對網頁上的 <Form> 進行檢查格式的動作，今天主要是介紹怎麼樣幫 Form 加上 Validation，並且進一步的客製化 Validation Rule。

網路上有非常多的 Validation Plugin, 當然也有人自己撰寫，在 jQuery / javascript 的應用上，我特別推薦這個超強神驗證 jQuery Validation Plugin！以下的介紹都會 Base On 這個 Plugin 的應用上。

本篇難度：兩個駭客。

“ 什麼是基本的表單 ”
身為一個表單不能少不了的就是 <form></form> 的 Tag 包圍的範圍。基本的 form 會需要 action 屬性(POST or GET)，如果有 file upload 才會需要 enctype=”multipart/form-data”的屬性。一個簡單的表單大致上會包含 input, textarea, button… 等 element。

有時候為了排版需要你會加上一些 <label> 或是 <div> ，如同下面的 Html 我把每個 input 都用 “form-group” 包起來，個搭配一個說明的 <label>，這些並不影響本來 Form 的功能。

<form method="POST" action="POST的網址" enctype="multipart/form-data" id="myform">
   <div class="form-group">
      <label>Email address</label>
      <input type="email" placeholder="Enter email">
   </div>
   <div class="form-group">
      <label>Password</label>
      <input type="password" placeholder="Password">
   </div>
   <button>送出</button>
</form>

“ 驗證前準備 ”
為表單加上驗證會需要在 <head></head> 間 include validate.js，還有 jquery.js。接下來只要在你想要 validate 的時機 (例： document ready 的時候)，呼叫 $(‘#myform’).validate() function 即可，如下方程式所示，別忘了放上 submitHandler，當你所有設定的規則都過關的時候就會進到這裡。你可以直接把 form.submit()，另外，也可以用 jquery 取得某些欄位的資料處理後，透過 ajax 傳送資料給 api，後者就不需要 form.submit() 這一行。

為表單加上驗證之時，有幾的地方需要特別注意：

每個要驗證的欄位一定都要有 name，否則你的表單驗證提醒文字會一直出現在第一個 input 附近，不會分散在每個 input。
要送出表單的按鈕一定要有 type=”submit”，否則你怎麼按那個按鈕都不會 validate 的。
submitHandler 裡面的 form.submit() 絕對不能寫成 $(form).submit 這樣會一直重複 trigger validate。

<head>
   <script src="YOUR_PATH/jquery.js"></script>
   <script src="YOUR_PATH/jquery.validate.js"></script>
   <script>
      $(document).ready(function(){
         $("#myform").validate({
            submitHandler: function(form) {
               //驗證成功之後就會進到這邊：
               //方法一：直接把表單 POST 或 GET 到你的 Action URL
               //方法二：讀取某些欄位的資料，ajax 給別的 API。
               //此處測試方法一的寫法如下：
               form.submit();
            },
            errorPlacement: function(error, element) {
               //你可以自己決定錯誤訊息要放在什麼地方
               //預設的是 element.after(error);
               element.closest('.form-group').append(error);
            },
            rules: {
               //你可以加上特殊的規則
               //格式為  name:{規則名稱: true}，
               //下方舉例的是 name == password 的 input 需要通過名為 hasUppercase 的規則驗證
               //更簡單的作法是直接把 hasUppercase 的 class 加在該 input 的 html 上。
               //password: {
               //     hasUppercase: true
               //}
            }
         });
      });
   </script>
</head><form method="POST" action="POST的網址" enctype="multipart/form-data" id="myform">
   <div class="form-group">
      <label>Email address</label>
      <input type="email" name="user_mail" placeholder="Enter email">
   </div>
   <div class="form-group">
      <label>Password</label>
      <input type="password" name="user_pwd" placeholder="Password">
   </div>
   <button type="submit" >送出</button>
</form>“ 為什麼我按下去，都沒有驗證就 submit 了呢？ ”
當我們完成上面的所有步驟後，我們其實還沒設定任何要驗證的規則，以下舉例一些內建簡單的規則作為講解：[必填]
針對必填的欄位 input 或 textarea，你必須在這些 element 加上 class="required"[最大值最小值]
你可以在 input 或 textarea 上加入 min="" max="" minlength="" maxlength="" 等屬性，控制字串長度或值的大小[類型]
當你在 input 或 textarea 中打字時，validate 會幫你驗證你打的內容是不是符合你設定的 type=""，ex email。[數字/網址]
針對純數字的欄位，你可以為他加上 digits 的 class，需為網址的欄位你可以加上 url 的 class除此之外，還有更多規則請參考 validate document“ 可是我想要有一些進階的規則！ ”
喔耶！終於來到本篇的重點啦！但是看到這裡想必你也累吧～
所以今天就不教大家怎麼客製化規則囉～（喂～詐欺阿！）開玩笑的啦！由於想要教給大家的規則不太適合放在部落格上一一介紹，
已經整理到 25Lab 上啦，還請參考 http://lab.25sprout.com/validate/

表單驗證就靠 Validation

Written by Alex Liu