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

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") 这句是比较重要的一句，因为它涉及到了验证元素的扩展。

四. 使用例子

文本框测试样图

 输入文本框获得焦点提示

 输入文本框失去焦点错误提示

 输入文本验证正确提示

 

radio 测试样图

  

checkbox 测试样图

  checkbox 验证失败提示

 체크박스 验证成功提示
测试代码
[코드]

이름:

성별:

男    
女

爱好:

aa    
bb   
aa    
bb   

这里不多说了,文章持续更新中!有问题进一步做修改中......