jquery validate 자동 바 인 딩 검사 규칙

WEB 프로젝트 개발 에 있어 서 전단 의 데이터 검증 은 필수 적 입 니 다. 접촉 및 실제 응용 jquery vaidate, prototype, spring modules 등 일련의 방식 을 사용 한 후에 사용 하기 가 귀 찮 을 것 같 아서 jquery vaidate 를 밀봉 하여 사용자 들 을 더욱 편리 하 게 하려 고 합 니 다.
      이번 에는 jquery vaidate 를 기반 으로 한 패 키 징 도 prototype 의 속성 묶음 식 검증 을 참고 하 였 습 니 다.코드 는 다음 과 같다.

//  validate.config.js，    jquery.validate.js, jquery.metadata.js
var validate;
function Validate(validator) {
	this.validator = validator;
}
Validate.prototype = {
	//          ，        ，          false       ，     true，                    
	validate : function() {
		var result = this.validator.form();
		return result;
	},
	//       
	resetForm : function() {
		this.validator.currentForm.reset();
	},
	//       
	submitForm : function() {
		this.validator.currentForm.submit();
	}
}
$.valid = $.noop;
	
(function($) {
	/**
	 *           validator       
	 */
	$.extend($.valid, {
		showErrors : null, //                           ，            
		useKeyUpValidate : false, //                       ，     。
		useClickValidate : false, //                       ，     。
		useFocusOutValidate : false, //                       ，     。
		useFocusInValidate : false, //                       ，     。
		useValidate : true, //           ，            
		elementText : function(element) {
			if (!(element instanceof $)) {
				element = $(element);
			}
			if (element[0]) {
				var key = element[0].name || element.attr('name') || "";
				var label = $('label[for="' + key + '"],[for="' + key + '"]');
					if (!label.length) {
					var pe = element[0].parentElement;
					var fe = $(pe).prev(pe.nodeName);
					if (!fe.text()) {
						fe = $(pe).prev();
					}
					label = fe.text() || element[0].name;
				} else {
					label = $(label[0]).text();
				}
				if (label.indexOf('*') > -1) {
					return label.replace(/[\*]/g, '');
				}
				return label;
			}
			return '';
		},
		/**               */
		init : function() {
			this.useKeyUpValidate = false;
			this.useClickValidate = false;
			this.useFocusOutValidate = false;
			this.useFocusInValidate = false;
			this.showErrors = null;
		},
		//            
		checkForm : function(form) {
			return true;
		},
		/**        ,     */
		bindValidate : function(pid) {
			var _this = this;
			/**                */
			if (this.showErrors) {
				$.validator.setDefaults({
					showErrors : function(errorMap, errorList) {
						$.valid.showErrors(errorList);
					}
				});
			} else {
				$.validator.setDefaults({
					/**
					 *   validator   showErrors  ，       dialog     
					 */
					showErrors : function(errorMap, errorList) {
						if (errorList.length) {
							var msg = '';
							if (errorList.length == 1) {
								if (errorList[0].message.indexOf('{param}') > -1) {
									msg += errorList[0].message.replace('{param}', $.valid.elementText(errorList[0].element));
								} else {
									msg += errorList[0].message;
								}
							} else {
								for (i in errorList) {
									if (errorList[i].message.indexOf('{param}') > -1) {
										msg += (errorList[i].message.replace('{param}', $.valid.elementText(errorList[i].element)) + '<br/>');									} else {
										msg += (errorList[i].message + '<br/>');
									}
								}
							}
							if (msg) {
								//              （           ）
								dialog.showDialog({value : msg, type : 'warn', focus : $(errorList[0].element)});
							}
						}
					}
				});
			}
			/**                */
			if (!this.useFocusInValidate) {
				$.validator.setDefaults({
					onfocusin : false
				});
			}
			if (!this.useKeyUpValidate) {
				$.validator.setDefaults({
					onkeyup : false
				});
			}
			if (!this.useClickValidate) {
				$.validator.setDefaults({
					onclick : false
				});
			}
			if (!this.useFocusOutValidate) {
				$.validator.setDefaults({
					onfocusout : false
				});
			}
			/**       form     */
			var forms;
			if (pid && $(pid).length) {
				forms = $('form', pid);
			} else {
				forms = $('form');
			}
			/**           */
			if (forms.length) {
				if (forms.length == 1) {
					//          
					validate = this.buildValidator(forms[0]);
				} else {
					forms.each(function(i, form) {
						var validator = _this.buildValidator(form);
						if (validator) {
							//        id    name  ，               form  
							var key = form.id || form.name || i;
							validate[key] = validator;
						}
					});
					if (validate.length == 1) {
						validate = validate[0];
					}
				}
			}
		},
		/**       */
		buildValidator : function(form) {
			//   form                       
			if (!this.checkForm(form)) {
				return null;
			}
			var requireds = $('[required]', form);
			if (requireds.length) {
			        requireds.removeAttr('required').addClass('required');
			}
			//  form             ，            ，                                 ，       
			var onsubmit = true;
			//        submit  ： form.onsubmit = function  
			// onsumit='return formSubmit();'
			if (form.onsubmit) {
				onsubmit = false;
			} else {
				//         jquery submit       				
                                var events = $(form).data('events');
				if (events && events['submit']) {
					onsubmit = false;
				}
			}
			//         
			return new Validate($(form).validate({
				onsubmit : onsubmit
			}));
		}
	});
})(jQuery);

jQuery.extend(jQuery.validator.messages, {
	required: "{param}      ,    !",
	remote: "{param}      ,      !",
	email: "            !",
	url: "{param}        ,     !",
	date: "{param}        ,     !",
	dateISO: "{param}         (ISO),     !",
	number: "{param}          ,     !",
	digits: "{param}       ,     !",
	creditcard: "{param}          ,     !",
	equalTo: "{param}   {0}     ,     !",
	accept: "{param}       ,     !",
	mask: "{param}      ,     !",
	lessthan: "{param}      {0}   ,     !",
	lessthanminus: "{param}      {0} - {1},     !",
	morethan: "{param}      {0}   ,     !",
	maxlength: $.validator.format("{param}      {0}   ,     !"),
	length: $.validator.format("{param}        {0}   ,     !"),
	minlength: $.validator.format("{param}      {0}   ,     !"),
	rangelength: $.validator.format("{param}           {0}    {1}       ,     !"),
	range: $.validator.format("{param}      {0}    {1}     ,     !"),
	max: $.validator.format("{param}        {0},     !"),
	min: $.validator.format("{param}        {0},     !")
});

$(function(){
	if ($.valid.useValidate) {
	     $.valid.bindValidate();
	}
});

   페이지 에 있 는 요소 속성 은 다음 과 같 습 니 다 (속성 은 jQuery. vaidator. messages 의 모든 key 값 입 니 다).
   

<tr>
    <th><span class="ui-fontSty-red">*</span><label for="menuCode">    </label></th>
    <td><input name="menuCode" required="required" maxlength="20" rule="codetype" type="text" class="ui-formInput2"/></td>
    <th><span class="ui-fontSty-red">*</span><label for="menuName">    </label></th>
    <td><input name="menuName" required="required" maxlength="20" type="text" class="ui-formInput2"/></td>
</tr>
//                       ， <label for="menuCode">    </label>     menuCode     。

    폼 을 제출 할 때 폼 자체 가 submit 이벤트 에 연결 되 어 있 지 않 으 면 자동 으로 검사 가 실 행 됩 니 다. 그렇지 않 으 면 vaidate. vaidate () 를 수 동 으로 호출 해 야 합 니 다. 
    

$('form').submit(function(){
	if (validate.validate()) {
		alert('    ');
	}
	return false;
});

      검사 가 통과 되 지 않 으 면 오류 메시지 가 팝 업 됩 니 다.
      이렇게 하면 우 리 는 페이지 에 대량의 자바 script 코드 를 써 서 폼 검 사 를 할 필요 가 없다.
      소스 코드 및 examples: