jquery-validate動態添加表單元素後添加動態驗證

一.前言

     使用jquery-validate時，每次都是把需要驗證的表單寫死，然後進行驗證。但是有些時候，我們需要動態的添加表單元素，然後還需要對這些動態添加的元素進行驗證，這個時候就需要動態的去添加一下驗證。

二.實現

    沒有加動態驗證之前：

   

	// 添加驗證
	var validator = $("#form").validate({
        // 焦點移開的時候驗證
		onfocusout: function(element) { $(element).valid(); },
		// 驗證過後調用提交的方法
	    submitHandler: function(form) {
	    	doSubmit($(form));
	    },
        // 驗證規則
	    rules: {
	    	name: {
	    		required: true,
	    		minlength: 1,
	    		maxlength: 36,
	    		
	    	},
	    	phone: {
	    		required: true,
	    		phone: true
	    	},
	    },
	    messages: {
	    	greenpeople: {
	    		required: "請輸入姓名",
	    		minlength: "姓名至少1位",
	    		maxlength: "姓名至多36位"
	    	},
	    	phone: {
	    		required: "請輸入電話",
	    		phone: "必須輸入正確格式的電話"
	    	},
	    }
	});

  如果需要添加動態驗證， 則只需要在你添加動態元素的js里加入以下代碼即可：

 

 $('#' + 你的動態id).rules('add', {
     required:true,
     messages:{
         required:"必輸XXX"
     }
 });