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

이 글을 읽기 전에 처음 두 글을 읽어보세요. 양식 유효성 검사 입력 범위 유효성 검사가 원래 기반으로 다시 작성되었습니다.



(1). 입력 범위 검증 문제

두 번째 글에서 언급한 문제는 원래 검증에도 존재하는 문제입니다. 물론 이러한 문제 중 일부는 이번 재작성에서도 해결되었습니다. 라디오, 체크박스 및 선택 요소에 대한 유효성 검사도 추가되었습니다. 물론, 시간에 대한 검증은 아직 해결되지 않았으며, 후속 과정에서 추가될 예정입니다!



(2). 검증 매개변수 설계

onEmptyText: 입력 내용이 비어 있을 때 텍스트 표시

onEmptyClass: 입력 내용이 비어 있을 때 표시되는 스타일

onSuccessText: 검증 성공 시 표시되는 텍스트

onSuccessClass: 검증 성공 시 표시되는 스타일

onErrorText: 검증 실패 시 표시되는 텍스트

onErrorClass: 검증 실패 시 표시되는 스타일

onFocusText: 포커스 획득 시 표시되는 텍스트

onFocusClass: 포커스 획득 시 표시되는 스타일 초점은

dataType: 입력 데이터 유형

min: 입력 최소값

max: 입력 최대값

targetId: 표시되는 요소 ID 프롬프트 메시지



새로 작성한 부분은 프롬프트 텍스트와 스타일을 별도로 분리하여 양식 검증을 보다 유연하게 운영할 수 있도록 하는 것입니다!

다시 작성된 기사는 텍스트, 숫자, 날짜의 세 가지 데이터 형식을 지원하며 라디오, 체크박스, 선택 확인도 업데이트되었습니다.

라디오, 체크박스, 선택 확인은 선택 여부만 확인하며 여기서 선택은 블러 이벤트에 민감하지 않으므로 여기서 변경 이벤트를 이용하여 확인하는 것이 좋습니다.



(3).검증 범위 소스코드 분석

jQuery 입력 항목 범위 소스코드 분석
/**
* onEmptyText: 입력 내용이 비어 있을 때 표시되는 텍스트
* onEmptyClass: 입력 내용이 비어 있을 때 표시되는 스타일
* onSuccessText: 검증 성공 시 표시되는 텍스트
* onSuccessClass: 표시되는 스타일 검증 성공 시
* onErrorText: 검증 실패 시 표시되는 텍스트
* onErrorClass: 검증 실패 시 표시되는 스타일
* onFocusText: 포커스 획득 시 표시되는 텍스트
* onFocusClass: 표시되는 스타일 포커스를 얻었을 때
* dataType: 입력 데이터 타입
* min: 최소값 입력
* max: 최대값 입력
* targetId: 프롬프트 메시지를 표시할 요소 id
* @param { 개체} inputArg
* /
$.fn.extend({
checkRange:function(inputArg){
//포커스 이벤트 바인딩
$(this).bind("focus",function(){
var flag=true;
if($(this).is("input") || $(this).is("textarea")){
if($(this).attr(" type")=="radio" || $(this).attr("type")=="checkbox"){
var name=$(this).attr("name");
var items=$('input[@name="" name ""][checked]')
if(items.length>0){
flag=false;
}else {
if($(this).val()!=undefine && $(this).val()!=""){
flag=false;
}
}
}else{ //select에 개선이 필요합니다. Select에는 포커스 이벤트가 없으며 변경 이벤트로 변경되어야 합니다

}
if (flag) {
//포커스된 텍스트 표시
addText(inputArg.targetId , inputArg.onFocusText);
//스타일 전환
addClass(inputArg.targetId, inputArg.onFocusClass)
}
}); 손실된 포커스 이벤트 바인딩
$(this).bind("blur",function(){
var flag=false;
if($(this).is("input") || $ (this).is ("textarea")){
if($(this).attr("type")=="radio" || $(this).attr("type")=="checkbox "){
var name=$(this).attr("name");
var items=$('input[@name="" name ""][checked]');
if(items!= 정의되지 않음 && items.length>=inputArg.min && items.lengthflag=true;
}
}else{
var value=$( this).val( );
if (값 == 정의되지 않음 || 값 == "") {
//포커스된 텍스트 표시
addText(inputArg.targetId,inputArg.onEmptyText)
//스위치 스타일
addClass(inputArg.targetId,inputArg.onEmptyClass);
}else {
switch (inputArg.dataType) {
case "text":
if(value. 길이 < inputArg.min || value.length >= inputArg.max){
flag=false;
}else{

}
>case "번호" :
if (isNaN(값)) {
flag = false
}
else {
if (value < inputArg.min || value >= inputArg.max) {
flag = false;
}
else {
flag = true
}
break
case; 🎜>break;
}
}
}
}else{ //select

}
if(flag){
//포커스된 텍스트 표시
addText(inputArg .targetId, inputArg.onSuccessText);
//스타일 전환
addClass(inputArg.targetId, inputArg.onSuccessClass)
}else{
//포커스된 텍스트 표시
addText(inputArg .targetId, inputArg.onErrorText);
//스타일 전환
addClass(inputArg.targetId, inputArg.onErrorClass)
}
}); //선택 상자 선택 이벤트 선택
if ($(this).is("select")) {
$(this).bind("change", function(){
var items=$ (this).find ("option:selected");
if(items!=undefine && items.length>=inputArg.min && items.length//포커스된 텍스트 표시
addText( inputArg.targetId, inputArg.onSuccessText);
//스타일 전환
addClass(inputArg.targetId, inputArg.onSuccessClass)
}else{
//포커스된 텍스트 표시
addText( inputArg.targetId, inputArg.onErrorText);
//스타일 전환
addClass(inputArg.targetId, inputArg.onErrorClass)
}
}); 🎜>}
});


여기서 더 중요한 것은 선택 항목을 여러 개 선택할 수 있는지 확인하는 것입니다. 라디오, 확인란 및 선택은 선택 길이만 확인하고 텍스트와 날짜는 확인하지 않습니다. 이것은 이 글의 중요한 부분입니다. 소스 코드도 리팩토링되었으며 공통 부분이 많이 추출되어 코드 양이 크게 줄었습니다. 동시에 jQuery 양식 유효성 검사 확장(2)의 일부 메서드도 사용되었습니다.



(4). 공통코드 분석 추출

두 번째 글의 공개 메소드
/**
* 다양한 유형의 입력 상자를 기준으로 결정
* @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 = =정의되지 않음){
text="";
}
$("#" targetId).html(" " " text);
}
/**
* 스타일 전환
* @param {Object} targetId 대상 컨트롤 ID
* @param {Object} className 표시되는 스타일 이름
*/
function addClass(targetId,className){
if(className!=undefine && className!=""){
$("#" targetId).removeClass()
$("# " targetId).addClass(className);
}
}


이 코드는 주로 텍스트 프롬프트 및 스타일 문제를 추가하는 데 사용됩니다.

선택 요소에 대한 인증 코드
//선택 상자 선택 이벤트
if ($(this).is("select")) {
$(this).bind( " 변경", function(){
var items=$(this).find("option:selected");
if(items!=undefine && items.length>=inputArg.min && items.length< ; inputArg.max){
//포커스된 텍스트 표시
addText(inputArg.targetId, inputArg.onSuccessText)
//스타일 전환
addClass(inputArg.targetId, inputArg.onSuccessClass); 🎜>}else{
//포커스된 텍스트 표시
addText(inputArg.targetId, inputArg.onErrorText)
//스타일 전환
addClass(inputArg.targetId, inputArg.onErrorClass); 🎜>}
})
}


이 코드는 선택 상자 요소를 확인하는 데 사용되며 다중 선택 확인을 지원합니다.




(5) 인증 사용 예시

텍스트 상자 입력 확인

입력 내용의 길이가 맞지 않는 경우

입력한 문자열이 현재 요구 사항을 충족하는지 확인

텍스트가 입력되지 않은 경우 확인

숫자확인

포커스 프롬프트 질문 받기

입력한 숫자가 범위에 맞지 않습니다

인증 성공

체크박스 확인

체크박스 그룹 중 하나가 포커스를 받습니다

데이터 만족을 위한 선택

수량 이상 선택

객관식 선택

선택지가 너무 많습니다

인증 성공(6). 인증 테스트 코드

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

<머리>







<본문>

이름:

年龄:

描述:

密码1:

密码2:

성별:
<스팬>
男    
女

爱好:
<스팬>
aa    
bb   
aa    
bb   

地区:
<스팬>

<옵션 값="0">00000
11111
22222
33333
44444