[jQuery外掛] jquery.validate 萬用表單檢測器，並可自訂錯誤提示詞

2019/04/25

梅問題－[外掛]jQuery.validate 萬用表單檢測，並可自訂錯誤提示詞

　　很早之前梅干曾分享過一隻超好用的表單驗證外掛，透過這隻表單驗證器，完全不用寫任何的程式，就可完成複雜的表單檢測，包含必填欄位外，甚至還可設定每個欄位的屬性，像是Email格式、電話、網址…等，真是一隻相當簡易好用的外掛。

當使用者輸入錯誤時，還會有相關的提示詞，但需修改原生的js，因此最近梅干又發現另一隻表單檢測器，不但可設定表單檢測的屬性外，甚至還可自訂錯誤提示詞，讓使用者在填寫表單時，可以更進一步的了解，所填寫的資料是否正確，且這隻表單檢測器，使用上與先前的差不多，因此現在就一塊來看看吧！

jQuery.validate

外掛名稱：jQuery.validate
外掛版本：1.16.0
官網下載：https://jqueryvalidation.org

Step1
首先，先將javascript引用到網頁裡。

1 2	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/jquery.validate.min.js"></script>

Step2
接著再把表單欄位放置到body裡。

<form id="form" method="post" action="">
  <div>
    <label for="fname">姓名:</label>
    <input type="text" id="fname" name="fname"></input>
  </div>
  <div>
    <label for="phone">電話:</label>
    <input type="text" id="phone" name="phone"></input>
  </div>
  <div>
    <label for="address">地址:</label>
    <input type="text" id="address" name="address"></input>
  </div>
  <div>
    <label for="email">Email:</label>
    <input type="text" id="email" name="email"></input>
  </div>
<div>
    <label for="url">網址:</label>
    <input type="text" id="url" name="url"></input>
  </div>

<div>
    <input type="submit" value="送出" />
  </div>
</form>

Step3
接著就會看到表單的畫面。
梅問題－[外掛]jQuery.validate 萬用表單檢測，並可自訂錯誤提示詞

Step4
接著再加入表單的判斷與驗證，而#form是表單的id，而rules是要驗證的欄位有那些，以及檢驗的欄位屬性，message則是錯誤提示詞設定。

<script>
    $(function(){
        $('#form').validate({
        /* 常用檢測屬性
       required:必填
       noSpace:空白
       minlength:最小長度
       maxlength:最大長度
       email:信箱格式
       number:數字格式
       url:網址格式https://www.minwt.com
       */
       onkeyup: function(element, event) {
         //去除左側空白
         var value = this.elementValue(element).replace(/^\s+/g, "");
         $(element).val(value);
        },
        rules: {
          fname: {
            required: true
          },
          phone:{
            required: true,
            minlength: 8,
                    number: true
          },
          address: 'required',
          url:{
            url: true
          },
          email: {
            required: true,
            email: true
          }
        },
        messages: {
          fname: {
            required:'必填'
          },
          phone: {
            required:'必填',
            minlength:'不得少於8位',
            number:'電話需為數字'
          },
          address: '必填',
          email: {
            required:'必填',
            email:'Email格式不正確'
          },
          url:'網址格式不正確'
        },
        submitHandler: function(form) {
          form.submit();
        }
  });

});
</script>

Step5
再加入CSS樣式設定。

form label {
  display: inline-block;
  width: 100px;
}

form div {
  margin-bottom: 10px;
}

.error {
  color: red;
  margin-left: 5px;
}

label.error {
  display: inline;
}