jQuery 양식 유효성 검사 플러그인 formValidator(향상된 버전)_jquery
- WBOY원래의
- 2016-05-16 17:56:451269검색
열거형 객체 사용법 :
코드 복사 코드는 다음과 같습니다.
//다양한 검증 메소드 지원되는 태그 유형
sustainType: function(elem, settings) {
var srcTag = elem.tagName;
var stype = elem.type;
switch(setting.validatetype) {
case _validTypeEnum.InitValidator:
true를 반환합니다.
case _validTypeEnum.InputValidator:
if (srcTag == _validTagEnum.INPUT || srcTag == _validTagEnum.TEXTAREA || srcTag == _validTagEnum.SELECT) {
return true;
} else {
return false;
}
case _validTypeEnum.CompareValidator:
if (srcTag == _validTagEnum.INPUT || srcTag == _validTagEnum.TEXTAREA) {
if (stype == _validTagTypeEnum.checkbox || stype == _validTagTypeEnum.radio) {
return false;
} else {
return true;
}
return false ;
case _validTypeEnum.AjaxValidator:
if (stype == _validTagTypeEnum.text || stype == _validTagTypeEnum.textarea || stype == _validTagTypeEnum.file || stype == _validTagTypeEnum.password || stype == _validTagTypeEnum .select_one) {
return true;
} else {
return false;
}
case _validTypeEnum.RegexValidator:
if (srcTag == _validTagEnum.INPUT || srcTag == _validTagEnum.TEXTAREA) {
if (stype == _validTagTypeEnum.checkbox || stype == _validTagTypeEnum.radio) {
return false;
} else {
return
}
}
false 반환
case _validTypeEnum.FunctionValidator:
true 반환
}
}
코드 복사 코드는 다음과 같습니다.
//지정된 문자열의 길이를 가져옵니다getLength: function(jqObj) {
var elem = _GetDomObj( jqObj);
var sType = elem.type;
var len = 0;
switch(sType) {
case _validTagTypeEnum.text:
case _validTagTypeEnum.hidden 🎜>case _validTagTypeEnum .password:
case _validTagTypeEnum.textarea:
case _validTagTypeEnum.file:
var val = jqObj.val()
var initConfig = $.formValidator.getInitConfig(elem.settings [0].validatorgroup);
len = initConfig.wideword ? String.getCharLength(val) : val.length;
break
case _validTagTypeEnum.radio:
len = $ ("input[type='" sType "'][name='" jqObj.attr("name") "']:checked").length;
break
case _validTagTypeEnum. select_one:
case _validTagTypeEnum.select_multiple:
len = jqObj.children(":selected").length;
break;
}
return
}
2. 원본 버전에서는 확인 라벨의 개체 대신 확인 라벨의 ID가 각 메서드 간에 전달됩니다. 이렇게 하면 각 메서드의 ID를 기반으로 확인 라벨의 개체를 얻을 필요가 없습니다. 방법을 사용하여 코드 실행 속도와 성능을 향상시킵니다.
3. 원본 버전에서는 플러그인에서 확인 성공, 오류 등에 대한 프롬프트 스타일이 제한되어 있습니다. 예를 들어, 오류 프롬프트 스타일 이름은 다음과 같습니다. 이 플러그인을 사용할 때 프롬프트에 있는 각 프롬프트 스타일의 이름을 주의하고 스타일의 중복이나 충돌을 피하십시오. 이는 사용하기 매우 불편합니다. 정말 좋은 플러그인은 js와 스타일(사용자가 설정해야 함)을 완전히 분리해야 합니다. 이는 프로그래밍의 '느슨한 결합'과 유사하지만, 이런 방식으로만 js와 스타일이 서로 종속될 수 있으며 더 나은 결과를 얻을 수 있습니다. 그래서 사용자가 플러그인에서 각 프롬프트 스타일을 구성할 수 있도록 했습니다(메소드의 매개변수 개체 속성으로). 주요 코드는 다음과 같습니다.
var elem = _GetDomObj( jqObj);
var sType = elem.type;
var len = 0;
switch(sType) {
case _validTagTypeEnum.text:
case _validTagTypeEnum.hidden 🎜>case _validTagTypeEnum .password:
case _validTagTypeEnum.textarea:
case _validTagTypeEnum.file:
var val = jqObj.val()
var initConfig = $.formValidator.getInitConfig(elem.settings [0].validatorgroup);
len = initConfig.wideword ? String.getCharLength(val) : val.length;
break
case _validTagTypeEnum.radio:
len = $ ("input[type='" sType "'][name='" jqObj.attr("name") "']:checked").length;
break
case _validTagTypeEnum. select_one:
case _validTagTypeEnum.select_multiple:
len = jqObj.children(":selected").length;
break;
}
return
}
2. 원본 버전에서는 확인 라벨의 개체 대신 확인 라벨의 ID가 각 메서드 간에 전달됩니다. 이렇게 하면 각 메서드의 ID를 기반으로 확인 라벨의 개체를 얻을 필요가 없습니다. 방법을 사용하여 코드 실행 속도와 성능을 향상시킵니다.
3. 원본 버전에서는 플러그인에서 확인 성공, 오류 등에 대한 프롬프트 스타일이 제한되어 있습니다. 예를 들어, 오류 프롬프트 스타일 이름은 다음과 같습니다. 이 플러그인을 사용할 때 프롬프트에 있는 각 프롬프트 스타일의 이름을 주의하고 스타일의 중복이나 충돌을 피하십시오. 이는 사용하기 매우 불편합니다. 정말 좋은 플러그인은 js와 스타일(사용자가 설정해야 함)을 완전히 분리해야 합니다. 이는 프로그래밍의 '느슨한 결합'과 유사하지만, 이런 방식으로만 js와 스타일이 서로 종속될 수 있으며 더 나은 결과를 얻을 수 있습니다. 그래서 사용자가 플러그인에서 각 프롬프트 스타일을 구성할 수 있도록 했습니다(메소드의 매개변수 개체 속성으로). 주요 코드는 다음과 같습니다.
코드 복사
코드는 다음과 같습니다.
//Tip 스타일 열거
var _tipCssEnum =
{
//(ajax) 로딩 처리
loadCss: "loadCss",
//포커스 스타일을 가져올 때
focusCss: "focusCss",
//Prompt [빈 프롬프트의 경우] ---설정되지 않은 경우 errorCss를 사용하세요.
noticeCss: "noticeCss",
//Failed or error [for format 오류, 정규식 확인]---설정해야 함
errorCss: "errorCss",
//Success---설정해야 함
successCss: "successCss",
//기본 상태---
defaultCss: "defaultCss"
};
initConfig: function (controlOptions) {
var settings =
{
debug: false,/ /디버깅 모드인지 여부
validatorgroup: "1",//검증 그룹
alertmessage: false,//검증 프롬프트가 직접 팝업되는지 여부
validobjectids: "",//검증 개체 컬렉션
focusvalid: false,
onsuccess: function () { return true }, //인증 성공 후 처리 방법, return true|false (양식 확인 추가 또는 양식 제출 방지 등 가능)
onerror: function () { } ,
filterInputStrFun: function (str) { return FilterInputOper.FilterInputStr(str) }, //입력 문자열을 필터링하는 방법 [설정 가능]
isformpost: false, //폼 제출인지 여부 (기본값: false ——비양식 제출, 일반적으로 ajax 제출, true——양식 제출)
submitonce: false,//검증 통과 후 즉시 양식을 제출할지 여부
submitbutton: null,//제출 버튼 ID 또는 개체
getformdata: null, //function (formdata) { } (검증 통과 후) 입력 양식 값 가져오기 - 이 메소드는 isformpost=false인 경우에만 호출됩니다.
//검증 프롬프트 표시 설정(기본값: 기본값 설정에 따라)
tipshow: "default",
formid: "", //폼의 ID나 객체를 확인하세요
tidymode: false, //Lite mode
errorfocus: true,
wideword : true,
//유효성 검사 프롬프트 스타일 설정(전역)
tipcss:
{
//(ajax) 로딩 처리
loadCss: "",
// 포커스를 받을 때 Style
focusCss: "",
//Prompt
noticeCss: "",
//Success
successCss: "",
//Failure
errorCss : " ",
//기본 상태
defaultCss: ""
}
}
controlOptions = controlOptions || {}
controlOptions.tipcss || {} ;
//전체 구성 병합(전체 복사)
$.extend(true, settings, controlOptions)
if (!settings.isformpost) {
if (!settings.submitbutton ) {
alert("제출버튼은 비워둘 수 없습니다! ");
return;
}
_GetJqObj(settings.submitbutton).click(function () {
var pageIsValid = $.formValidator.pageIsValid(settings.validatorgroup);
if ( pageIsValid && _IsFunction(settings.getformdata)) {
var formData = _GetFormData(settings.filterInputStrFun);
settings.getformdata(formData);
}
}); settings.tipshow = settings.tipshow || "default"
//간소화 모드인 경우 오류 발생 시 첫 번째 오류 제어가 포커스를 받지 않습니다.
if (settings.tidymode) {
settings.errorfocus = false;
}
if (settings.formid) {
_GetNodeById(settings.formid).submit(function () {
//양식 제출이 아닌 경우 차단 양식 제출
return settings.isformpost ? $.formValidator.pageIsValid(settings.validatorgroup) : false;
})
}
if (_jQuery_formValidator_initConfig_Array == null) {
_jQuery_formValidator_initConfig_Array = new Array ()
_jQuery_formValidator_initConfig_Array.push(settings);
}
//팁 정보 설정
setTipState: function (elem, showCssEnum, showmsg) {
var settings0 = elem .settings[0];
var initConfig = $.formValidator.getInitConfig(setting0.validatorgroup);
if (initConfig.alertmessage && showmsg) {
alert(showmsg); 🎜> }
var jq_tipObj = settings0.tipJqObj;
vartip_IsNull = Object.isNull(jq_tipObj);
if (!tip_IsNull) {
showmsg = showmsg
if (initConfig .tidymode) {
//프롬프트 정보 저장
elem.Tooltip = showmsg;
if (showCssEnum != _tipCssEnum.errorCss && showCssEnum != _tipCssEnum.noticeCss)
jq_tipObj.hide() ;
}
jq_tipObj.removeClass();
//팁 스타일 설정
var showClass = settings0.tipcss[showCssEnum]
//noticeCss를 사용하세요.
if (String.isNullOrEmpty(showClass) && showCssEnum == _tipCssEnum.noticeCss) {
showCssEnum = _tipCssEnum.errorCss;
showClass = settings0.tipcss[showCssEnum]
if (!String .isNullOrEmpty (showClass)) {
//현재 팁 라벨 표시 스타일 저장(열거 값)
elem.showcssenum = showCssEnum;
jq_tipObj.addClass(showClass)}
jq_tipObj.html(showmsg)
}
}
4. 더 많은 요구 사항을 충족하고 기능과 사용 편의성을 향상시키기 위해 initConfig 구성 개체에 다음과 같은 몇 가지 속성을 추가했습니다.
filterInputStrFun: function (str) { return FilterInputOper.FilterInputStr(str) } , // 입력 문자열을 필터링하는 방법 [설정 가능] - 입력 문자열 필터링의 필요성을 충족시키기 위해
Isformpost: false, //폼 제출인지 여부(기본값: false - 비폼 제출, 일반적으로 ajax Submit, true - 양식 제출) - Ajax 제출 및 양식 제출의 요구 사항을 충족하기 위해
Getformdata: null, //function (formdata) { } (확인 후) 입력 양식 값 가져오기 - isformpost=false만
팁쇼: "default", //확인 메시지 표시 설정(기본값: 설정에 따른 기본값) - ID 또는 사용자 정의 jQuery 검색(찾기) 방법을 기반으로 확인 메시지 레이블 개체 검색 방법을 설정합니다.
플러그인 사용법은 다음과 같습니다.
//Tip 스타일 열거
var _tipCssEnum =
{
//(ajax) 로딩 처리
loadCss: "loadCss",
//포커스 스타일을 가져올 때
focusCss: "focusCss",
//Prompt [빈 프롬프트의 경우] ---설정되지 않은 경우 errorCss를 사용하세요.
noticeCss: "noticeCss",
//Failed or error [for format 오류, 정규식 확인]---설정해야 함
errorCss: "errorCss",
//Success---설정해야 함
successCss: "successCss",
//기본 상태---
defaultCss: "defaultCss"
};
initConfig: function (controlOptions) {
var settings =
{
debug: false,/ /디버깅 모드인지 여부
validatorgroup: "1",//검증 그룹
alertmessage: false,//검증 프롬프트가 직접 팝업되는지 여부
validobjectids: "",//검증 개체 컬렉션
focusvalid: false,
onsuccess: function () { return true }, //인증 성공 후 처리 방법, return true|false (양식 확인 추가 또는 양식 제출 방지 등 가능)
onerror: function () { } ,
filterInputStrFun: function (str) { return FilterInputOper.FilterInputStr(str) }, //입력 문자열을 필터링하는 방법 [설정 가능]
isformpost: false, //폼 제출인지 여부 (기본값: false ——비양식 제출, 일반적으로 ajax 제출, true——양식 제출)
submitonce: false,//검증 통과 후 즉시 양식을 제출할지 여부
submitbutton: null,//제출 버튼 ID 또는 개체
getformdata: null, //function (formdata) { } (검증 통과 후) 입력 양식 값 가져오기 - 이 메소드는 isformpost=false인 경우에만 호출됩니다.
//검증 프롬프트 표시 설정(기본값: 기본값 설정에 따라)
tipshow: "default",
formid: "", //폼의 ID나 객체를 확인하세요
tidymode: false, //Lite mode
errorfocus: true,
wideword : true,
//유효성 검사 프롬프트 스타일 설정(전역)
tipcss:
{
//(ajax) 로딩 처리
loadCss: "",
// 포커스를 받을 때 Style
focusCss: "",
//Prompt
noticeCss: "",
//Success
successCss: "",
//Failure
errorCss : " ",
//기본 상태
defaultCss: ""
}
}
controlOptions = controlOptions || {}
controlOptions.tipcss || {} ;
//전체 구성 병합(전체 복사)
$.extend(true, settings, controlOptions)
if (!settings.isformpost) {
if (!settings.submitbutton ) {
alert("제출버튼은 비워둘 수 없습니다! ");
return;
}
_GetJqObj(settings.submitbutton).click(function () {
var pageIsValid = $.formValidator.pageIsValid(settings.validatorgroup);
if ( pageIsValid && _IsFunction(settings.getformdata)) {
var formData = _GetFormData(settings.filterInputStrFun);
settings.getformdata(formData);
}
}); settings.tipshow = settings.tipshow || "default"
//간소화 모드인 경우 오류 발생 시 첫 번째 오류 제어가 포커스를 받지 않습니다.
if (settings.tidymode) {
settings.errorfocus = false;
}
if (settings.formid) {
_GetNodeById(settings.formid).submit(function () {
//양식 제출이 아닌 경우 차단 양식 제출
return settings.isformpost ? $.formValidator.pageIsValid(settings.validatorgroup) : false;
})
}
if (_jQuery_formValidator_initConfig_Array == null) {
_jQuery_formValidator_initConfig_Array = new Array ()
_jQuery_formValidator_initConfig_Array.push(settings);
}
//팁 정보 설정
setTipState: function (elem, showCssEnum, showmsg) {
var settings0 = elem .settings[0];
var initConfig = $.formValidator.getInitConfig(setting0.validatorgroup);
if (initConfig.alertmessage && showmsg) {
alert(showmsg); 🎜> }
var jq_tipObj = settings0.tipJqObj;
vartip_IsNull = Object.isNull(jq_tipObj);
if (!tip_IsNull) {
showmsg = showmsg
if (initConfig .tidymode) {
//프롬프트 정보 저장
elem.Tooltip = showmsg;
if (showCssEnum != _tipCssEnum.errorCss && showCssEnum != _tipCssEnum.noticeCss)
jq_tipObj.hide() ;
}
jq_tipObj.removeClass();
//팁 스타일 설정
var showClass = settings0.tipcss[showCssEnum]
//noticeCss를 사용하세요.
if (String.isNullOrEmpty(showClass) && showCssEnum == _tipCssEnum.noticeCss) {
showCssEnum = _tipCssEnum.errorCss;
showClass = settings0.tipcss[showCssEnum]
if (!String .isNullOrEmpty (showClass)) {
//현재 팁 라벨 표시 스타일 저장(열거 값)
elem.showcssenum = showCssEnum;
jq_tipObj.addClass(showClass)}
jq_tipObj.html(showmsg)
}
}
4. 더 많은 요구 사항을 충족하고 기능과 사용 편의성을 향상시키기 위해 initConfig 구성 개체에 다음과 같은 몇 가지 속성을 추가했습니다.
filterInputStrFun: function (str) { return FilterInputOper.FilterInputStr(str) } , // 입력 문자열을 필터링하는 방법 [설정 가능] - 입력 문자열 필터링의 필요성을 충족시키기 위해
Isformpost: false, //폼 제출인지 여부(기본값: false - 비폼 제출, 일반적으로 ajax Submit, true - 양식 제출) - Ajax 제출 및 양식 제출의 요구 사항을 충족하기 위해
Getformdata: null, //function (formdata) { } (확인 후) 입력 양식 값 가져오기 - isformpost=false만
팁쇼: "default", //확인 메시지 표시 설정(기본값: 설정에 따른 기본값) - ID 또는 사용자 정의 jQuery 검색(찾기) 방법을 기반으로 확인 메시지 레이블 개체 검색 방법을 설정합니다.
플러그인 사용법은 다음과 같습니다.
코드 복사 코드는 다음과 같습니다.
