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"
     }
 });

 

你可能感兴趣的:(前端)