JQuery插件使用之Validation 快速完成表單驗證的幾種方式

這第一種方式可謂是傻瓜式的使用，我們隻需要按照validation定義好的規則就可以了。

首先引入JQuery庫和Validation插件：

然後是打開驗證開關：

validation的<code>build_in</code>驗證規則有：

<code>class = “required”</code>: 表明表單中該字段為必選的

<code>class = "required email"</code> 表明在表單中該字段為必須存在的，而且是符合email的規範格式

<code>class = "url"</code> 表明在表單中該字段需要滿足url的比對模式

<code>minlength = "6"</code> 表明在表單中該字段的長度最小為6位

案例展示：

和簡易使用不同的是，這種方式使用<code>pure</code>的class來進行控制。但是我們需要引入一個新的插件<code>jquery.metadate.js</code>。實作的功能就是幫助使用者将所有的與驗證資料相關的資訊寫到class屬性中，友善管理。

我們可以通過以下幾步來實作這一需求。

引入一個新的插件jquery.metadata.js

改變調用驗證表單的開關：

将驗證資訊寫到class屬性中。詳見下面的代碼。

注意： Validate寫在class屬性的時候，記得要将驗證規則使用空格分隔開來。 否則代碼不會正常的運作！

還有就是<code>$("#vform").validate({meta:"validate"});中validate</code>這個單詞不能随意的更改，否則也是不會生效的。

下面介紹一種與HTML元素的屬性無直接關聯，而是通過name屬性來關聯字段和驗證規則的驗證寫法。

優點： 可以實作行為與結構的分離，便與調試和維護代碼；

表單代碼，去除所有的class驗證。當然這并不是說我們不可以給字段添加樣式咯。

JQuery代碼如下：

注意： 使用空格分隔驗證字段

以上就是關于JQuery插件Validation的基礎使用了。

首先引入一個中文的資訊驗證庫，這個我們可以在下載下傳好的validation的lib包下找到。

第二步就是在驗證規則處添加message字段，然後輸入自定義的中文資訊。如下：

不知道怎麼回事，我這段代碼沒有顯示中文提示，如果大家發現了錯誤在哪裡，歡迎留下您的評論。