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<=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);
}
}

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

(4) 사용예

문자열 간 렌더링 비교

초점을 맞출 때 알림

초점 상실 확인 오류 메시지

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

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

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

< ;p>
비밀번호 1: < /span>

비밀번호 2:

숫자간 인증

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

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

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

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

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

p>

비밀번호 2:

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

본 웹사이트의 성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

핫 AI 도구

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

AI 옷 제거제

Video Face Swap

완전히 무료인 AI 얼굴 교환 도구를 사용하여 모든 비디오의 얼굴을 쉽게 바꾸세요!

더보기

인기 기사

어 ass 신 크리드 그림자 : 조개 수수께끼 솔루션

3 몇 주 전 By DDD

Windows 11 KB5054979의 새로운 기능 및 업데이트 문제를 해결하는 방법

3 몇 주 전 By DDD

Atomfall에서 크레인 제어 키 카드를 찾을 수 있습니다

3 몇 주 전 By DDD

<s> : 데드 레일 - 모든 도전을 완료하는 방법

4 몇 주 전 By DDD

Atomfall Guide : 항목 위치, 퀘스트 가이드 및 팁

1 몇 달 전 By DDD

더보기

뜨거운 도구

메모장++7.3.1

사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전

중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기

강력한 PHP 통합 개발 환경

드림위버 CS6

시각적 웹 개발 도구

SublimeText3 Mac 버전

신 수준의 코드 편집 소프트웨어(SublimeText3)

더보기

뜨거운 주제

Gmail 이메일의 로그인 입구는 어디에 있나요?

7689

15

자바 튜토리얼

1639

14

Cakephp 튜토리얼

1393

52

라라벨 튜토리얼

1287

25

PHP 튜토리얼

1229

29

더보기