jQuery 양식 유효성 검사 확장 코드 (2)

jQuery 양식 유효성 검사 확장 코드 (2)_jquery

WBOY

풀어 주다： 2016-05-16 18:18:06

원래의

879명이 탐색했습니다.

1. 기존 문제
이전 기사에서 언급한 것처럼 확인 프롬프트는 텍스트와 스타일 두 가지 방식으로 프롬프트 메시지를 표시하려고 하므로 두 프롬프트 모두 단독으로 사용할 수 있습니다. 새로운 콘텐츠와 새로운 콘텐츠를 함께 사용할 수 있도록 확장이 이루어졌습니다. 이전 글에서 작성한 필수 필드 확인은 Text 및 TextArea 두 가지 양식 요소에만 적용됩니다. 새 확장에서는 radio 및 checkbox 두 가지 요소도 지원됩니다.

2. 검증 매개변수 설계
다중 선택을 고려하여 일부 필수 매개변수 목록을 다음과 같이 확장했습니다.
필수 여부. 필수, true 및 false, true는 필수 항목을 나타냅니다(*)
onFocusText: 포커스를 얻기 위한 텍스트 프롬프트
onFocusClass: 포커스를 얻은 후 스타일
onErrorText: 검증 오류에 대한 텍스트 프롬프트
onErrorClass: 검증 error 스타일 프롬프트
onSuccessText: 검증 성공 텍스트 프롬프트
onSuccessClass: 검증 성공 스타일 프롬프트
targetId: 프롬프트 정보 요소

의 ID 번호가 이전에 비해 수정되었습니다. 이전 기사에서 알 수 있듯이 스타일과 텍스트를 혼합하기 전에 별도로 분리했습니다. 이는 확장 요구를 고려한 단계이기도 합니다. 그런 다음 오류 메시지 프롬프트 매개변수의 이름을 변경했습니다.

3. 소스코드 분석
jQuery 폼 유효성 검사 확장 프로그램의 필수 항목 소스코드인지 확인

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

 
$.fn.extend({ 
checkRequired:function(inputArg){ 
//필수 필드만 필수 항목이 아닌 항목은 의미가 없습니다
if(inputArg.required){ 
//입력 상자 형식인지 확인
if($(this).is("input") || $(this).is ("textarea")){ 
//포커스 프롬프트 가져오기
$(this).bind("focus",function(){ 
//텍스트가 존재하는 경우, 프롬프트 스타일을 바꾸지 마세요
if ($(this).val() != undefine && $(this).val() != "") { 
//올바른 정보 텍스트 표시
 addText(inputArg.targetId,inputArg.onSuccessText); 
//스타일 전환
addClass(inputArg.targetId,inputArg.onSuccessClass) 
}else{ 
//포커스 텍스트 표시
 addText(inputArg.targetId,inputArg.onFocusText); 
//스타일 전환
addClass(inputArg.targetId,inputArg.onFocusClass) 
} 
}); 
$(this).bind(" 흐림",function(){ 
if($(this).attr("type")=="radio" || $(this).attr("type ")=="checkbox"){ 
var name=$(this).attr("name"); 
var items=$('input[@name="" name ""][checked] '); 
if(items.length> ;0){ 
addMessage(true,inputArg) 
}else{ 
addMessage(false,inputArg) 
} 
}else { 
if($(this).val()!=undefine && $(this).val()!=""){ 
addMessage(true,inputArg) 
}else{ 
addMessage(false,inputArg); 
 } 
} 
}) 
} 
} 
} 
}); / 
function addMessage(flag,inputArg) { 
if(flag){ 
//올바른 정보 텍스트 표시
addText(inputArg.targetId,inputArg.onSuccessText) 
//Switch style
addClass(inputArg.targetId,inputArg.onSuccessClass); 
}else{ 
//오류 메시지 텍스트 표시
addText(inputArg.targetId,inputArg.onErrorText) 
//Switch style
addClass(inputArg.targetId,inputArg.onErrorClass) 
} 
} 
/**
* 다양한 유형의 입력 상자를 기준으로 결정 
* @param {Object} 플래그 
* @param {Object} inputArg 
*/ 
function addText(targetId,text){ 
if( text==정의되지 않음){ 
text=" " 
} 
$("#" targetId).html(" " " text); 
} 
/**
* 표시된 텍스트 정보를 대상 컨트롤에 추가 
* @param {Object} targetId 대상 컨트롤 id 
* @param {Object} text 표시할 텍스트 정보 
 */ 
function addClass(targetId,className){ 
if(className!=undefine && className!=""){ 
$("#" targetId).removeClass() 
$( "#" targetId).addClass(className); 
} 
} 

 
jQuery를 사용해 본 사람이라면 누구나 jQuery가 확장하기 매우 쉬운 프레임워크라는 것을 알고 있을 것입니다. 핵심 라이브러리를 확장합니다. 이 양식 유효성 검사는 이 확장 기능을 기반으로 확장됩니다. 
여기서 일부 코드 재사용성 문제도 고려되었으며, 공통 코드가 분리되어 최종 코드가 크게 줄어듭니다. 
jQuery 양식 유효성 검사 확장 필수 공통 메서드 추출 

코드 복사

코드는 다음과 같습니다.

/**
* 根据输入框的不同类型来判断
* @param {Object} flag
* @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==undefined){
text="";
}
$("#"+targetId).html(" "+text);
}
/**
* 切换样式
* @param {Object} targetId 目标控件id
* @param {Object} className 显示的样式名称
*/
function addClass(targetId,className){
if(className!=undefined && className!=""){
$("#"+targetId).removeClass();
$("#"+targetId).addClass(className);
}
}
/code]
每次不同的验证都会涉及到添加文本消息，表单元素的不同添加文本消息，和样式的替换，于是分离出来上面三个公用方法。
在源码中 if($(this).attr("type")=="radio" || $(this).attr("type")=="checkbox") 这句是比较重要的一句，因为它涉及到了验证元素的扩展。

四. 使用例子

文本框测试样图

输入文本框获得焦点提示