jQuery 양식 유효성 검사 확장 (4)_jquery

주말에 작성된 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}
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);
}
}

내용은 여전히 ​​동일합니다. 변경된 사항이 없으며 여기에 다시 게시되었습니다. 이 코드는 메서드 본문을 쉽게 볼 수 있도록 포함되었으며 다른 목적은 없습니다!

(4) 사용예

문자열 간 렌더링 비교

초점을 맞출 때 알림

초점 상실 확인 오류 메시지

초점을 잃고 인증에 성공했습니다

위의 문자비교검증은 아래와 같습니다.

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

< ;p>
비밀번호 1:

비밀번호 2:

숫자간 인증

디지털 인증으로 포커스 프롬프트 기능 확보

디지털 인증이 초점을 잃고 인증 실패

디지털 인증이 초점을 잃었고 인증에 성공했습니다

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

제목 없는 문서
="JavaScript" 유형 ="text/javascript" src="jquery-1.3.2.min.js">

p>

비밀번호 2:

저도 설명하고 싶지 않아요 기사의 내용은 이전 기사와 마찬가지로 매우 간단합니다. 양식 유효성 검사 확장 프로그램은 지속적으로 업데이트되고 있으며 후속 조치를 기대합니다......