js

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

2019/04/25

梅問題-[外掛]jQuery.validate 萬用表單檢測,並可自訂錯誤提示詞
  很早之前梅干曾分享過一隻超好用的表單驗證外掛,透過這隻表單驗證器,完全不用寫任何的程式,就可完成複雜的表單檢測,包含必填欄位外,甚至還可設定每個欄位的屬性,像是Email格式、電話、網址…等,真是一隻相當簡易好用的外掛。

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


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

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

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則是錯誤提示詞設定。
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
<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樣式設定。
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
form label {
  display: inline-block;
  width: 100px;
}

form div { margin-bottom: 10px; }

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

label.error { display: inline; }


Step6
什麼都未填寫,就按送出時,就會出現剛所設定的必填欄位, 與錯誤的提示詞。
梅問題-[外掛]jQuery.validate 萬用表單檢測,並可自訂錯誤提示詞
Step7
剛在當電話作了字數與數字的檢驗設定,因此當使用輸入時,則會跳出第一段的檢驗,告知字數不符。
梅問題-[外掛]jQuery.validate 萬用表單檢測,並可自訂錯誤提示詞
Step8
當把字數補齊時,由於輸入的非數字,這時就會跳出第二段的錯誤說明。
梅問題-[外掛]jQuery.validate 萬用表單檢測,並可自訂錯誤提示詞
Step9
雖然網址是選填,若格式不對,則會顯示格式不正確。
梅問題-[外掛]jQuery.validate 萬用表單檢測,並可自訂錯誤提示詞
Step10
當一切都輸入正確後,這時輸入框就不會再跳任何的提示詞了,而這隻表單檢測真的是超方便的啦!因此有需要的朋友,千萬別錯過了。
梅問題-[外掛]jQuery.validate 萬用表單檢測,並可自訂錯誤提示詞