好用的表單驗證插件

時間 2019-12-02

標籤好用表單驗證插件欄目 HTML 简体版

原文原文鏈接

在作項目過程當中，使用了jquery的一個驗證表單的插件--jquery validation。這裏簡單整理了一下這個強大的表單驗證插件的一些經常使用的方法，以及在使用過程當中須要注意的地方。

首先要想使用，首先須要引入jquery，而後引入jquery validation兩個文件。而後經過插件的初始化方法，進行初始化，以後就能夠按照本身的須要進行使用了。

//引入jquery，版本1.6+
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
    //引入jquery validation
    <script type="text/javascript" src="http://jqueryvalidation.org/files/dist/jquery.validate.min.js"></script>

下面簡單介紹一下使用方法，他有兩種使用方式，第一種，直接將驗證的方式寫在標籤上，這個我我的不是很喜歡，感受不夠分離；我比較喜歡第二種方式，經過JS配置表單須要驗證的字段，而後就行提交操做。插件內部提供了一些經常使用的驗證方法。

序號	規則	描述
1	required:true	必須輸入的字段。
2	remote:"check.php"	使用 ajax 方法調用 check.php 驗證輸入值。
3	email:true	必須輸入正確格式的電子郵件。
4	url:true	必須輸入正確格式的網址。
5	date:true	必須輸入正確格式的日期。日期校驗 ie6 出錯，慎用。
6	dateISO:true	必須輸入正確格式的日期（ISO），例如：2009-06-23，1998/01/22。只驗證格式，不驗證有效性。
7	number:true	必須輸入合法的數字（負數，小數）。
8	digits:true	必須輸入整數。
9	creditcard:	必須輸入合法的信用卡號。
10	equalTo:"#field"	輸入值必須和 #field 相同。
11	accept:	輸入擁有合法後綴名的字符串（上傳文件的後綴）。
12	maxlength:5	輸入長度最可能是 5 的字符串（漢字算一個字符）。
13	minlength:10	輸入長度最小是 10 的字符串（漢字算一個字符）。
14	rangelength:[5,10]	輸入長度必須介於 5 和 10 之間的字符串（漢字算一個字符）。
15	range:[5,10]	輸入值必須介於 5 和 10 之間。
16	max:5	輸入值不能大於 5。
17	min:10	輸入值不能小於 10。

舉一個簡單的例子使用上面的方法：

<form> 
 郵箱：<intput type="text" name="email">
<input type="submit" value="提交">
</form>
<script>
//如下是一個基本的表單驗證的構造
$('from').validate({
    debug: true, //調試模式，只驗證不提交
    rules: {    //全部的驗證規則都寫在這裏
        email: {
            required: true,    //必填項
            email: true,    //郵箱格式
			remote:{
				type:"POST",
				url:"/user/checkemail",  //檢測地址
				data:{
					email: function() { return $("input[name=email]").val()} //獲取郵箱
				},
				dataFilter: function(data) { //data爲字符串
					data = $.parseJSON(data);
					if(data.errno) {
						return false;
					}else {
						return true
					}
				}
			}
        }
    },
    messages: {    //全部驗證規則的錯誤提示寫在這裏
        email: {
            required: '請填寫電子郵箱',
            email: '請填寫正確格式的電子郵箱',
			remote: '郵箱已註冊'
        }
    }
});
</script>

固然，有些時候咱們在提交的時候可能會對某些字段單獨處理，jquery validation提供了這樣的方法讓咱們進行驗證。以上面爲例子：

$('input[name=email]').rules('add', {
    required: true,
    email: true
});
//可使用 $.rules('remove', {})，刪除規則

以上是它提供的一些經常使用的驗證方法，固然在咱們項目中，大部分狀況下，咱們是會有複雜的邏輯，致使咱們不能使用上述提供的方法，須要咱們本身實現一些驗證方法。不過，不用擔憂這個強大的插件也提供了很好的擴展方法，一樣的也以上面爲例。

$.validator.addMethod('email', function(emailValue,  element, param) {
    var reg = /^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/;
    if(reg.test(emailValue)) {
        return true;
    }
    return false;
});

插件默認提供了展現錯的位置以及內容，同時插件提供了修改錯誤容器和class的方法：

參數	類型	描述	默認值
errorClass	String	指定錯誤提示的 css 類名，能夠自定義錯誤提示的樣式。	"error"
errorElement	String	用什麼標籤標記錯誤，默認是 label，能夠改爲 em。	"label"
errorContainer	Selector	顯示或者隱藏驗證信息，能夠自動實現有錯誤信息出現時把容器屬性變爲顯示，無錯誤時隱藏，用處不大。 errorContainer: "#messageBox1, #messageBox2"
errorLabelContainer	Selector	把錯誤信息統一放在一個容器裏面。
wrapper	String	用什麼標籤再把上邊的 errorELement 包起來。

另外還能夠經過，errorPlacement和success監聽，成功和失敗，舉例以下：

//設置默認的規則
$.validator.setDefaults({
    errorPlacement: function(errmsg, element) {
        //errmsg：錯誤信息（能夠經過messages自定義）；element錯誤的元素
    },
    success: function(label, element) {
        //label：顯示正確信息的容器；element：驗證經過的元素
    }
});