웹 프론트엔드 JS 튜토리얼 jQuery 양식 유효성 검사 확장 (4)_jquery

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

May 16, 2016 pm 06:18 PM
양식 유효성 검사

주말에 작성된 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>
< /span>






숫자간 인증

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

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

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

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




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





p>








저도 설명하고 싶지 않아요 기사의 내용은 이전 기사와 마찬가지로 매우 간단합니다. 양식 유효성 검사 확장 프로그램은 지속적으로 업데이트되고 있으며 후속 조치를 기대합니다......
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

핫 AI 도구

Undresser.AI Undress

Undresser.AI Undress

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

AI Clothes Remover

AI Clothes Remover

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

Undress AI Tool

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

Clothoff.io

AI 옷 제거제

AI Hentai Generator

AI Hentai Generator

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

뜨거운 도구

메모장++7.3.1

메모장++7.3.1

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

SublimeText3 중국어 버전

SublimeText3 중국어 버전

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

스튜디오 13.0.1 보내기

스튜디오 13.0.1 보내기

강력한 PHP 통합 개발 환경

드림위버 CS6

드림위버 CS6

시각적 웹 개발 도구

SublimeText3 Mac 버전

SublimeText3 Mac 버전

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

Flask-WTF를 사용하여 양식 유효성 검사를 구현하는 방법 Flask-WTF를 사용하여 양식 유효성 검사를 구현하는 방법 Aug 03, 2023 pm 06:53 PM

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

Laravel 개발: Laravel 유효성 검사를 사용하여 양식 요청의 유효성을 검사하는 방법은 무엇입니까? Laravel 개발: Laravel 유효성 검사를 사용하여 양식 요청의 유효성을 검사하는 방법은 무엇입니까? Jun 13, 2023 pm 01:34 PM

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

Golang을 사용하여 웹 애플리케이션에 대한 양식 유효성 검사를 구현하는 방법 Golang을 사용하여 웹 애플리케이션에 대한 양식 유효성 검사를 구현하는 방법 Jun 24, 2023 am 09:08 AM

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

PHP에서 CodeIgniter4 프레임워크를 사용하는 방법은 무엇입니까? PHP에서 CodeIgniter4 프레임워크를 사용하는 방법은 무엇입니까? May 31, 2023 pm 02:51 PM

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

PHP 양식 유효성 검사 팁: filter_input 함수를 사용하여 사용자 입력을 확인하는 방법 PHP 양식 유효성 검사 팁: filter_input 함수를 사용하여 사용자 입력을 확인하는 방법 Aug 01, 2023 am 08:51 AM

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

Laravel에서 미들웨어를 사용하여 양식 유효성 검사를 처리하는 방법 Laravel에서 미들웨어를 사용하여 양식 유효성 검사를 처리하는 방법 Nov 02, 2023 pm 03:57 PM

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

PHP의 양식 유효성 검사 및 필터링 방법? PHP의 양식 유효성 검사 및 필터링 방법? Jun 29, 2023 pm 10:04 PM

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

ThinkPHP6에서 양식 유효성 검사를 수행하는 방법은 무엇입니까? ThinkPHP6에서 양식 유효성 검사를 수행하는 방법은 무엇입니까? Jun 12, 2023 am 09:36 AM

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

See all articles