jQuery 양식 유효성 검사 확장 (4)_jquery-JS 튜토리얼-php.cn

주말에 작성된 jQuery 양식 유효성 검사 확장 (3) 이 글의 클릭률이 너무 낮습니다. 글의 품질이 너무 낮아서인지, 아니면 다른 이유로 작성하고 있는지 모르겠습니다. 이 기사는 단지 내 코드 작성 경험을 공유하는 동시에 내 자신을 통합하기 위한 것입니다. 기사에 문제가 있으면 수정해 주세요! 이 글에서는 jQuery 양식 유효성 검사 확장

(1)에서 컨트롤 값의 비교를 소개합니다.
언급된 컨트롤 값의 차이점 이 기사와 첫 번째 기사에서는 큰 차이가 없으며 유일한 차이점은 스타일 처리입니다. 동시에 코드는 단순화됩니다. 하지만 여기서는 따로 설명하겠습니다. 이번 글은 매우 간단하기 때문에 긴 설명은 생략하겠습니다.

(2). 매개변수 소개
onFocusText: 포커스 프롬프트 텍스트 가져오기
onFocusClass: 포커스 스타일 가져오기
onEmptyText: 입력 항목이 비어 있을 때 텍스트 표시
onEmptyClass: 입력 항목이 비어 있을 때 표시 스타일
onErrorText: 검증 오류 표시 텍스트
onErrorClass: 입력 확인 오류 표시 스타일
onSuccessText: 입력 성공 표시 텍스트
onSuccessClass: 입력 성공 표시 스타일
comType :비교 유형
dataType: 비교 내용의 데이터 유형을 입력
dataType: 비교 내용의 데이터 유형을 입력
comId: 비교 대상 컨트롤 ID
targetId: 표시하는 데 사용되는 컨트롤 ID 프롬프트 정보

여기의 비교 유형은 다음과 같은 범주로 구분됩니다. “==” “!=" “>” “>=” “<="”
비교 데이터 유형은 다음과 같이 구분됩니다. "텍스트" "숫자" "날짜"
여기서는 날짜 데이터 유형에 대한 처리가 수행되지 않았습니다. 이는 이후 프로세스에서 업데이트됩니다

(3) 컨트롤 값 간 소스코드 파싱 비교
jQuery 컨트롤 값 간 소스코드 파싱 비교

코드 복사 코드는 다음과 같습니다.

/**
* onFocusText: 포커스 프롬프트 텍스트 가져오기
* onFocusClass: 포커스 스타일 가져오기
* onEmptyText: 입력 항목이 비어 있을 때 텍스트 표시
* onEmptyClass: 입력 항목이 비어 있을 때 스타일 표시
* onErrorText :검증 오류 표시 텍스트
* onErrorClass: 입력 검증 오류 표시 스타일
* onSuccessText: 입력 성공 표시 텍스트
* onSuccessClass: 입력 성공 표시 스타일
* comType: 비교 유형
* dataType: 입력 비교 내용의 데이터 유형
* comId: 비교 대상 컨트롤 ID
* targetId: 프롬프트 정보를 표시하는 데 사용되는 컨트롤 ID
* @param {Object} inputArg
*/
$.fn.extend({
checkCompare:function(inputArg){
//입력란 정보만 확인
if($ (this).is("input") || $(this).is("textarea")){
if($(this).attr ("type")!="radio" && $(this ).attr("type")!="checkbox"){
//포커스 이벤트 바인딩
$(this).bind("focus ",function(){
var value=$ (this).val();
if(value!=undefine && value!=""){
}else{
//표시 초점이 맞춰진 텍스트
addText(inputArg.targetId,inputArg .onEmptyText);
//스위치 스타일
addClass(inputArg.targetId,inputArg.onEmptyClass)
}
}); >//포커스 손실 이벤트 바인딩
$( this).bind("blur",function(){
var value=$(this).val();
if(value==undefine || value==""){
/ /포커스된 텍스트 표시
addText(inputArg.targetId,inputArg.onEmptyText)
//스타일 전환
addClass(inputArg.targetId,inputArg. onEmptyClass);
}else{
var targetValue=$("#" inputArg.comId).val()
var flag=false; 케이스 "텍스트":
if(inputArg.comType == "=="){
flag=value==targetValue?true:false
}else if(inputArg.comType=="!= "){
flag=value!=targetValue? true:false;
}
break;
case "number":
if(inputArg.comType=="=="){
flag=value==targetValue?true:false ;
}else if(inputArg.comType=="!="){
flag=value!=targetValue?true:false; else if(inputArg.comType==">") {
flag=value>targetValue?true:false
}else if(inputArg.comType==">="){
플래그 =value>=targetValue?true:false;
}else if(inputArg.comType=="<"){
flag=value}else if(inputArg. comType=="<="){
flag=value<=targetValue?true:false
}
break
case "date":
break;
if(flag){
// 포커스가 있는 텍스트 표시
addText(inputArg.targetId, inputArg.onSuccessText)
//스타일 전환
addClass(inputArg.targetId, inputArg.onSuccessClass );
}else{
// 포커스가 있는 텍스트 표시
addText(inputArg.targetId, inputArg.onErrorText)
//스타일 전환
addClass(inputArg.targetId, inputArg.onErrorClass) );
}
})
}
}
});
이 코드는 복잡한 판단을 포함하지 않고 단지 서로 다른 유형의 값을 비교하기 때문에 실제로 매우 간단하며 비교 제어 유형인 텍스트 및 텍스트 영역 요소도 제한합니다. 이는 검증의 복잡성을 크게 단순화합니다. 이 코드는 또한 상대적으로 간소화되었습니다. 여기서 단순화는 기능을 줄이는 것이 아니라 코드를 재구성하고 메서드를 추출하는 것입니다. 여기서는 이전 기사의 기능적 메서드를 사용하여 텍스트를 추가하고 스타일 정보를 수정했습니다.
텍스트 및 스타일 정보 추가 기능 코드 분석

코드 복사 코드는 다음과 같습니다.

 
/**
* 다양한 유형의 입력 상자를 기준으로 결정 
* @param {Object} 플래그 
* @param {Object} inputArg 
*/ 
function addMessage(flag,inputArg){ 
if(flag){ 
//올바른 메시지 텍스트 표시
addText( inputArg.targetId, inputArg.onSuccessText); 
//스타일 전환
addClass(inputArg.targetId,inputArg.onSuccessClass) 
}else{ 
//오류 메시지 텍스트 표시
addText( inputArg.targetId, inputArg.onErrorText); 
//스타일 전환
addClass(inputArg.targetId,inputArg.onErrorClass) 
} 
} 
/**
* 표시된 텍스트 정보를 대상 컨트롤에 추가 
* @param {Object} targetId 대상 컨트롤 id 
* @param {Object} text 표시할 텍스트 정보 
*/ 
function addText (targetId,text){ 
if(text==undefine){ 
text=""; 
} 
$("#" targetId).html(" " " text ); 
 } 
/**
* 스타일 전환 
* @param {Object} targetId 대상 컨트롤 ID 
* @param {Object} className 표시되는 스타일 이름 
*/ 
function addClass(targetId,className){ 
if(className!=undefine && className!=""){ 
$( "#" targetId) .removeClass(); 
$("#" targetId).addClass(className); 
} 
} 