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
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>
< /span>
숫자간 인증
디지털 인증으로 포커스 프롬프트 기능 확보
디지털 인증이 초점을 잃고 인증 실패
디지털 인증이 초점을 잃었고 인증에 성공했습니다
<제목>제목 없는 문서
="JavaScript" 유형 ="text/javascript" src="jquery-1.3.2.min.js">

핫 AI 도구

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

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

Undress AI Tool
무료로 이미지를 벗다

Clothoff.io
AI 옷 제거제

AI Hentai Generator
AI Hentai를 무료로 생성하십시오.

인기 기사

뜨거운 도구

메모장++7.3.1
사용하기 쉬운 무료 코드 편집기

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

스튜디오 13.0.1 보내기
강력한 PHP 통합 개발 환경

드림위버 CS6
시각적 웹 개발 도구

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

뜨거운 주제











Flask-WTF를 사용하여 양식 유효성 검사를 구현하는 방법 Flask-WTF는 웹 양식 유효성 검사를 처리하기 위한 Flask 확장으로 사용자가 제출한 데이터의 유효성을 검사하는 간결하고 유연한 방법을 제공합니다. 이 문서에서는 Flask-WTF 확장을 사용하여 양식 유효성 검사를 구현하는 방법을 보여줍니다. Flask-WTF 설치 Flask-WTF를 사용하려면 먼저 설치가 필요합니다. pip 명령을 사용하여 설치할 수 있습니다: pipinstallFlask-WTF F에서 필수 모듈 가져오기

Laravel은 개발자의 작업 속도를 높이기 위해 많은 편리한 기능을 제공하는 인기 있는 PHP 웹 개발 프레임워크입니다. 그 중 LaravelValidation은 양식 요청과 사용자가 입력한 데이터를 쉽게 검증하는 데 도움이 되는 매우 실용적인 기능입니다. 이 글에서는 LaravelValidation을 사용하여 양식 요청의 유효성을 검사하는 방법을 소개합니다. LaravelValidation이 무엇인가요?LaravelValidation은 La입니다.

양식 유효성 검사는 웹 애플리케이션 개발에서 매우 중요한 링크로, 애플리케이션의 보안 취약성과 데이터 오류를 방지하기 위해 양식 데이터를 제출하기 전에 데이터의 유효성을 확인할 수 있습니다. Golang을 사용하여 웹 애플리케이션에 대한 양식 유효성 검사를 쉽게 구현할 수 있습니다. 이 기사에서는 Golang을 사용하여 웹 애플리케이션에 대한 양식 유효성 검사를 구현하는 방법을 소개합니다. 1. 폼 유효성 검사의 기본 요소 폼 유효성 검사를 구현하는 방법을 소개하기 전에 먼저 폼 유효성 검사의 기본 요소가 무엇인지 알아야 합니다. 양식 요소: 양식 요소는

PHP는 매우 널리 사용되는 프로그래밍 언어이며 CodeIgniter4는 일반적으로 사용되는 PHP 프레임워크입니다. 웹 애플리케이션을 개발할 때 프레임워크를 사용하면 개발 프로세스 속도를 높이고 코드 품질을 향상시키며 유지 관리 비용을 줄일 수 있습니다. 이 기사에서는 CodeIgniter4 프레임워크를 사용하는 방법을 소개합니다. CodeIgniter4 프레임워크 설치 CodeIgniter4 프레임워크는 공식 홈페이지(https://codeigniter.com/)에서 다운로드할 수 있습니다. 아래에

PHP 양식 유효성 검사 팁: filter_input 함수를 사용하여 사용자 입력을 확인하는 방법 소개: 웹 애플리케이션을 개발할 때 양식은 사용자와 상호 작용하는 중요한 도구입니다. 사용자 입력의 유효성을 올바르게 검사하는 것은 데이터 무결성과 보안을 보장하는 주요 단계 중 하나입니다. PHP는 사용자 입력을 쉽게 확인하고 필터링할 수 있는 filter_input 함수를 제공합니다. 이 글에서는 filter_input 함수를 사용하여 사용자 입력을 확인하고 관련 코드 예제를 제공하는 방법을 소개합니다. 하나,

Laravel에서 미들웨어를 사용하여 양식 유효성 검사를 처리하는 방법에는 특정 코드 예제가 필요합니다. 소개: Laravel에서 양식 유효성 검사는 매우 일반적인 작업입니다. 사용자가 입력한 데이터의 유효성과 보안을 보장하기 위해 당사는 일반적으로 양식에 제출된 데이터를 확인합니다. Laravel은 편리한 양식 유효성 검사 기능을 제공하며 양식 유효성 검사를 처리하기 위한 미들웨어 사용도 지원합니다. 이 글에서는 미들웨어를 사용하여 Laravel에서 양식 유효성 검사를 처리하는 방법을 자세히 소개하고 구체적인 코드 예제를 제공합니다.

PHP는 웹 개발에 널리 사용되는 스크립팅 언어이며, 양식 유효성 검사 및 필터링은 매우 중요한 부분입니다. 사용자가 양식을 제출하면 데이터의 보안과 유효성을 보장하기 위해 사용자가 입력한 데이터를 확인하고 필터링해야 합니다. 이 기사에서는 PHP에서 양식 유효성 검사 및 필터링을 수행하는 방법에 대한 방법과 기술을 소개합니다. 1. 양식 유효성 검사 양식 유효성 검사는 사용자가 입력한 데이터를 확인하여 데이터가 특정 규칙 및 요구 사항을 준수하는지 확인하는 것을 의미합니다. 일반적인 양식 확인에는 필수 필드, 이메일 형식, 휴대폰 번호 형식에 대한 확인이 포함됩니다.

ThinkPHP6은 웹 애플리케이션 개발을 크게 단순화하는 PHP 기반 MVC 프레임워크입니다. 그 중 Form Validation은 매우 기본적이고 중요한 기능입니다. 이 기사에서는 ThinkPHP6에서 양식 유효성 검사 작업을 수행하는 방법을 소개합니다. 1. 유효성 검사 규칙 정의 ThinkPHP6에서는 컨트롤러에서 유효성 검사 규칙을 정의해야 하며 아래와 같이 컨트롤러에서 $validate 속성을 정의하여 규칙을 정의할 수 있습니다.
