jQuery 表單驗證 jquery.validator.js

前端開發中經常會碰到表單的制作，其中必備的功能就是提交前的一些簡單的驗證，非空啊、手機號碼啊、E-mail等等等等，這里是一個 jQuery 的表單驗證插件，蠻好用的，收錄一下。

下面是驗證的效果圖：

 

頁面中需要加載的文件是：

<link href="validator-0.6.8/jquery.validator.css" rel="stylesheet" type="text/css" />
<script src="validator-0.6.8/jquery.validator.js" type="text/javascript"></script>
<script src="validator-0.6.8/local/zh_CN.js" type="text/javascript"></script>

其中 zh_CN 文件中主要是一些自帶的驗證規則，開發者可以根據自己的需要編寫正則表達式，取相應的規則名稱之后添加到驗證規則中去，需要注意的是，該插件是用控件的 name 屬性來綁定驗證規則的，所以需要給需要驗證的表單控件添加 name 屬性。

下面是使用方法：

$('form').validator({
　　stopOnError: false, 　　　　　　　　//提交時驗證不通過就會停止繼續驗證
　　timely: true, 　　　　　　　　　　　//鼠標離開控件時是否實時驗證
　  theme: "yellow_right_effect", 　//樣式主題，插件自帶了5中樣式，在 zh_CN 文件中可以找到相應的樣式
　  fields: { 　　 
　　　　'birthday': 'required', 　　 
　　　　'idNum': 'required', 　　　　
　　　　'cellPhone': 'required;mobile' 
　　}, 
　　valid: function (form) {}　　　　//表單驗證通過，提交表單到服務器
});

到這，我們還需要一個按鈕來觸發提交的方法：

$('form').trigger("validate");

以上就是一些簡單必要的應用，當然，我們在開發的過程中經常會要動態的改變表單結構，新增的控件需要新增驗證，隱藏的控件需要取消驗證，不然無法提交，所以還需要了解下面的幾個方法：

$('form').validator("setField",新添加的元素的name, "required");

$('form').validator("setField",取消驗證的元素的name, "");

$('form').validator('hideMsg', 取消驗證的元素的name);

當然也有給元素添加消息的方法：setMsg

詳細參數和方法可以參考官網 validator