다시 한 번 말씀드리지만, 플러그인 문제가 많으므로 나중에 하나씩 해결하겠습니다. 나쁜 말은 하지 마세요. 좋은 제안과 말씀 많이 주시길 바랍니다. 1. 폼 검증의 기본 상황을 분석합니다 웹 개발 과정에서 다양한 검증을 접하게 됩니다. 정리하면 기본적으로는 (1) 항목이 필수인지 여부 [아주 기본입니다] (2) 입력 매개변수에서 범위 확인 (3)입니다. ) 입력 매개변수와 다른 컨트롤의 값 비교 (4). 입력 매개변수의 정규식 확인 2. 필수 필드 확인 다음과 같은 상황이 있습니다. : (1) 입력 상자가 포커스를 잃고 (2) 입력 상자가 포커스를 잃고 확인 오류 메시지가 나타남 (3) 입력 상자가 포커스를 잃고 확인 메시지가 올바르게 표시됨 먼저 입력 상자가 필요한지 여부를 확인한 다음 메시지의 실제 위치를 묻는 메시지가 나타납니다. 위 상황에 따라 다음 매개변수를 결정합니다. required: 필수 항목인지 여부, true 및 false, true는 필수 항목임을 의미합니다(*) onFocus: 포커스를 가져오기 위한 텍스트 프롬프트( 스타일을 지정하는 경우 스타일 이름 앞에 @를 추가하면 텍스트 프롬프트의 첫 글자에 @가 포함될 수 없습니다. onBlur: 포커스를 잃는 텍스트 프롬프트(스타일을 지정하는 경우 스타일 이름 앞에 @를 추가하고, 따라서 텍스트 프롬프트의 첫 글자에는 @가 포함될 수 없습니다. (검증 실패 프롬프트) onSucces: 검증 성공을 위한 텍스트 프롬프트(스타일이 지정된 경우 스타일 이름 앞에 @를 추가하면 텍스트 프롬프트의 첫 글자가 포함될 수 없습니다. have @) tipId: 프롬프트 정보를 표시하는 데 사용되는 컨트롤 ID(*) 조합 예: {required:true,onFocus:"Required",onBlur:"@error",onSucces:"Success",tipId: "tipid"} 참고: 위에 정의된 일부 규칙은 구현되지 않을 수 있으며 이후 프로세스에서 점진적으로 개선됩니다.
/** * 입력란 필수 여부 확인 * 입력 매개변수: * 필수: 필수 여부, true 및 false, true는 필수를 의미함(*) * onFocus: 포커스를 얻는 텍스트 프롬프트 (스타일이 지정된 경우 스타일 이름 앞에 @가 추가되므로 텍스트 프롬프트의 첫 글자에는 @가 포함될 수 없습니다.) * onBlur: 포커스를 잃은 텍스트 프롬프트(스타일이 지정된 경우 스타일 앞에 @가 추가됩니다) 스타일 이름이므로 텍스트 프롬프트에 첫 번째 문자는 @를 가질 수 없습니다. (검증 실패 프롬프트) * onSucces: 성공적인 검증을 위한 텍스트 프롬프트(스타일이 지정된 경우 스타일 이름 앞에 @를 추가하여 스타일의 첫 글자가 텍스트 프롬프트에는 @를 사용할 수 없습니다. * TipId: 프롬프트 정보 표시에 사용되는 컨트롤 ID(*)(*) * 조합 예: {required:true,onFocus:"Required",onBlur:"@error", onSucces:"성공",tipId:"tipid"} */ $ .fn.extend({ checkRequired:function(inputArg){ if(inputArg.required){ if($(this).is("input") || $(this ).is ("textarea")){ //포커스 이벤트 바인딩 $(this).bind("focus",function(){ if(inputArg.onFocus!=undefine){ $("#" inputArg.tipId).html(inputArg.onFocus); } }) //포커스 손실 이벤트 바인딩 $(this).bind( "흐림",function(){ if($(this).val()!=undefine && $(this).val()!=""){ $("#" inputArg.tipId ).html(inputArg.onSucces); }else{ $("#" inputArg.tipId).html(inputArg.onBlur) } } } } })
/** * 입력 항목의 범위를 확인하세요 * 입력 매개변수: * onFocus: 포커스를 얻기 위한 텍스트 프롬프트(스타일이 지정된 경우 스타일 이름 앞에 @를 추가하여 의 첫 글자가 텍스트 프롬프트에는 @를 사용할 수 없습니다. * onEmpty: 입력 항목이 비어 있는 경우의 텍스트 프롬프트(스타일을 지정한 경우 스타일 이름 앞에 @를 추가하므로 텍스트 프롬프트의 첫 글자에는 @를 사용할 수 없습니다.) * onSucces: 검증 성공 시 텍스트 프롬프트(스타일이 지정된 경우 스타일 이름 앞에 @가 추가되므로 텍스트 프롬프트의 첫 글자에는 @가 포함될 수 없음) * onBlur: 포커스를 잃은 텍스트 프롬프트 (스타일이 지정된 경우 스타일 이름 앞에 @를 추가하여 텍스트 프롬프트의 첫 글자에 @를 사용할 수 없음) (검증 실패 프롬프트) * dataType : 데이터 유형 매개변수(텍스트, 숫자, 날짜) * min : 입력된 최소값 * max : 입력된 최대값 * TipId : 프롬프트 정보 표시에 사용되는 컨트롤 ID (*) * */ $.fn.extend({ checkRange :function(inputArg){ if ($(this).is("input") || $(this).is(" textarea")) { //포커스 바인딩 가져오기 $( this).bind("focus",function(){ if(inputArg.onFocus!=undefine){ $( "#" inputArg.tipId).html(inputArg.onFocus); } }); //포커스 바인딩 상실 $(this).bind("blur",function( ){ if($(this).val()==undefine || $(this).val()==""){ $("#" inputArg.tipId).html(inputArg .onEmpty) }else{ switch(inputArg.dataType); 대소문자 "텍스트": if($(this).val().length>=parseInt(inputArg.min ) && $(this).val().length$("#" inputArg.tipId).html(inputArg.onSucces); }else{ $("#" inputArg.tipId).html(inputArg.onBlur); } break; case "번호": if(!isNaN($(this).val() )){ if(parseInt($(this).val())> ;parseInt(inputArg.min) && parseInt($(this).val())$("#" inputArg.tipId).html(inputArg.onSucces); 🎜>}else{ $("#" inputArg.tipId).html(inputArg.onBlur) } } break; case "date": break ; } } }) } } })
/** * 컨트롤 값 비교 * 입력 매개변수: * onFocus: 포커스를 얻기 위한 텍스트 프롬프트(스타일이 지정된 경우 스타일 이름 앞에 @를 추가하여 텍스트 프롬프트의 첫 글자가 @를 가질 수 없음) * onEmpty: 입력 항목이 비어 있을 때의 텍스트 프롬프트(스타일이 지정된 경우 스타일 이름 앞에 @가 추가되므로 텍스트 프롬프트의 첫 글자에 @를 가질 수 없음) * onSucces : 검증 성공 시 텍스트 프롬프트(스타일이 지정된 경우 스타일 이름 앞에 @가 추가됨) 텍스트 프롬프트의 첫 글자에는 @가 포함될 수 없습니다. * onBlur: 포커스를 잃은 텍스트 프롬프트(스타일이 지정된 경우 스타일이 지정되면 스타일 이름 앞에 @를 추가하여 텍스트 프롬프트의 첫 글자에 @를 사용할 수 없습니다. (유효성 검사 실패 프롬프트) * dataType: 데이터 유형 매개변수(텍스트, 숫자, 날짜) * comType: 비교 유형 (=,>,>=,<,<=,!=) * TipId: 프롬프트 정보 표시에 사용되는 컨트롤 ID (*) * targetId: 비교 대상 컨트롤 ID */ $.fn.extend({ checkCompare:function(inputArg){ if($(this).is("input") || $(this).is(" textarea")){ //포커스 바인딩 가져오기 $(this).bind("focus",function(){ if(inputArg.onFocus!=undefine){ $(" #" inputArg.tipId).html(inputArg.onFocus); } }); //포커스 바인딩 손실 $(this).bind("blur",function(){ var targetValue=$("#" inputArg.targetId).val(); if(targetValue!=undefine && targetValue! =null){ if($(this).val()! =정의되지 않음 && $(this).val()!=""){ if(inputArg.dataType=="text"){ switch(inputArg.comType){ case "=": if(targetValue==$(this).val()){ $("#" inputArg.tipId).html (inputArg.onSucces) }else{ $(" #" inputArg.tipId).html(inputArg.onBlur); } break; case "!=": if(targetValue!=$(this).val()){ $("#" inputArg.tipId).html(inputArg.onSucces); }else{ $(" #" inputArg.tipId).html(inputArg.onBlur) } break; } }else if(inputArg.dataType=="number"){ if (isNaN (targetValue) == false && isNaN($(this).val()) == false) { switch (inputArg.comType) { case "=": if (targetValue == $ (this).val()) { $("#" inputArg .tipId).html(inputArg.onSucces); } else { $("#" inputArg.tipId) .html(inputArg.onBlur) } break; 🎜>case "!=": if (targetValue != $(this).val()) { $(" #" inputArg.tipId).html(inputArg.onSucces) } else { $("#" inputArg.tipId).html(inputArg.onBlur) } break case ">": if ($( this).val() > targetValue) { $("#" inputArg.tipId).html(inputArg.onSucces); } else { $("#" inputArg. TipId).html(inputArg.onBlur); } break; case ">=": if ($(this).val() >= targetValue) { $("#" inputArg.tipId).html(inputArg.onSucces); } else { $( "#" inputArg.tipId).html(inputArg.onBlur); } break; case "<": if ($(this).val() < targetValue) { $("#" inputArg.tipId).html(inputArg. onSucces); } else { $("#" inputArg.tipId).html(inputArg.onBlur) break case "<=" : if ($(this).val() <= targetValue) { $("#" inputArg.tipId) .html(inputArg.onSucces) } else { $("#" inputArg.tipId).html(inputArg.onBlur); } break; } }else{ $("#" inputArg.tipId) .html(inputArg.onBlur); } }else if(inputArg.dataType=="date"){ } }else{ $("#" inputArg.tipId ).html(inputArg.onEmpty); } } }) } }
/** * 정규 표현식 검증 * 입력 매개변수: * onFocus: 포커스를 얻기 위한 텍스트 프롬프트(스타일이 지정된 경우 스타일 이름 앞에 @를 추가하여 텍스트 프롬프트의 첫 글자가 @를 가질 수 없음) * onEmpty: 입력 항목이 비어 있을 때의 텍스트 프롬프트(스타일이 지정된 경우 스타일 이름 앞에 @가 추가되므로 텍스트 프롬프트의 첫 글자에는 @가 포함될 수 없음) * onSucces : 검증 성공 시 텍스트 프롬프트(스타일이 지정된 경우 스타일 이름 앞에 @가 추가되므로 텍스트 프롬프트의 첫 글자에는 @가 포함될 수 없습니다.) * onBlur: 포커스를 잃은 텍스트 프롬프트(스타일이 지정된 경우 스타일이 지정되면 스타일 이름 앞에 @를 추가하므로 텍스트 프롬프트의 첫 글자에 @가 포함될 수 없습니다. (유효성 검사 실패 프롬프트) * regExp : 정규식 *tipId : 팁 정보를 표시하는 데 사용되는 컨트롤 ID( *) */
초점이 맞춰지면 다음과 같은 프롬프트 효과
포커스를 잃었을 때 입력 프롬프트 효과가 없습니다
문자를 입력하면 성공효과가 뜹니다
코드 복사
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
