JQuery validate验证带有readonly，disabled等属性的标签

JQuery validate 插件在验证/校验 表单的时候，是不校验带有readonly，disabled,：reset（type= reset）,：submit，：image 等标签的，有俩个方案。

方案一：需要更改js，在":submit, :reset, :image, [disabled], [readonly]"里将相应标签删除即可

elements: function() {
			var validator = this,
				rulesCache = {};

			// select all valid inputs inside the form (no submit or reset buttons)
			return $(this.currentForm)
			.find("input, select, textarea")
			.not(":submit, :reset, :image, [disabled], [readonly]")
			.not( this.settings.ignore )
			.filter(function() {
				if ( !this.name && validator.settings.debug && window.console ) {
					console.error( "%o has no name assigned", this);
				}

				// select only the first element for each name, and only those with rules specified
				if ( this.name in rulesCache || !validator.objectLength($(this).rules()) ) {
					return false;
				}

				rulesCache[this.name] = true;
				return true;
			});
		},

 

方案二：仅限 readonly属性（disabled不可行）

disabled只能校验一次(当鼠标没有移上去的时候)，校验后光标自动停留该input,再点提交不会校验了

原因：disabled的元素是不会触发事件的

我们不要直接在标签中加入 readonly 属性，我们使用JS事件，动态处理。

area绑定 focusin事件， 当焦点落在输入框上时，我们添加上readonly属性设置为true，使用户无法输入，移除时，设置为false。这样validate插件就可以验证了。

// 解决validate 与 readonly 冲突问题
$('#area').on("focusin",function() {
       $(this).prop('readonly', true);  
});

$('#area').on("focusout",function() {
   $(this).prop('readonly', false); 
});