jQuery 유효성 검사 플러그인 웹 프런트 엔드 디자인 패턴(asp.net)_jquery

디자인 목표: jQuery 프레임워크 기반의 범용 웹 검증 플러그인 구축...

디자인 요구사항: 1. 아름다운 CSS 스타일과 작은 아이콘 장식이 필요합니다...
2. jQuery 프레임워크 기반. .
3. .net 웹 서비스를 호출하여 데이터베이스와 비동기식 상호 작용을 달성합니다...

해결책: 1. 먼저 사용자에게 웹의 시각적 모습을 표시하는 세 가지 클래스를 디자인해 보겠습니다. . 지각.
.msg_warning{font-family:Arial,Helvetica,sans-serif,simsun; background:#e7f7ff url(register/MsgWarning.gif) no-repeat;border:solid 1px #6cf;color:#333 ; 패딩:0 0 0 36px !important;너비:220px; 여백-왼쪽:20px;}
.msg_error{font-family:Arial,Helvetica,sans-serif,simsun;배경:#fff3ef url(register/MsgError . jpg) no-repeat;border:solid 1px #ff6610;color:#333;padding:0 0 0 36px !important;width:220px; margin-left:20px;}

.msg_ok{font- family :Arial,Helvetica,sans-serif,simsun;배경:#e7ffe7 url(register/MsgOk.gif) no-repeat;border:solid 1px #95e895;color:#333;padding:0 0 0 36px !important;width: 220px; margin-left:20px;}
검증 오류, 검증 경고, 올바른 검증의 스타일이 다릅니다...
2. MsgWarning을 포함하여 스타일에 표시된 대로 해당 위치에 이미지를 배치합니다. gif, MsgError.jpg 및 MsgOk.gif는 .msg_warning; .msg_ok에 해당하는 세 개의 작은 그림입니다.

3. 스크립트 작성 시작
(1), //null 값 제거

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

String.prototype.trim = function()
{
var x = this;
x = x.replace(/^s*(.*)/, "$1")
return x; 🎜>
이 함수는 텍스트 상자의 빈 위치(트림)를 제거하는 데 사용됩니다...

(2) 확인을 트리거할 때 프롬프트 문과 스타일을 저장하기 위해 두 개의 배열을 작성합니다...
var ErrorWords = ['맞습니다! ', '비워둘 수 없습니다! ', '이메일 주소 길이는 50자를 초과할 수 없습니다! ', '올바른 이메일 형식을 입력해주세요! ',"비밀번호는 6자 이상 16자 미만이어야 합니다!","키가 일치하지 않습니다!",'회사명은 50자리를 초과할 수 없습니다! ',"지역번호도, 전화번호도 모두 비어있습니다!","지역번호는 4자리입니다!","번호는 7~10자리입니다!","QQ번호는 5~12자리입니다!",'The 주소 길이는 50명을 넘지 않습니다! ','이름은 반드시 중국어로 10자 이내로 입력해야 합니다! ','휴대폰번호는 11자리입니다! ','우편번호는 6자리입니다! ','사용자 이름은 3~15자리입니다! ','도메인 이름 형식이 잘못되었습니다! ','이 사용자 이름이 등록되었습니다! ','등록된 이메일 주소입니다! ']

var ErrorClass = ['msg_ok', 'msg_warning', 'msg_warning', 'msg_error', 'msg_warning', 'msg_error', 'msg_warning', 'msg_warning', 'msg_error','msg_error ','msg_error','msg_error','msg_error','msg_error','msg_error','msg_error','msg_error','msg_error','msg_error']

(3), 쓰기 시작 다양한 검증 유형, 생각나는 대로 다 썼습니다...

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

;(function($){
//
jQuery.fn.extend({
"checkEmail":function() //
{
만큼 $(this).blur(function(){
var check;
var email=$(this).val().toLowerCase();
var strSuffix = " cc|com|edu|gov |int|net|org|biz|info|pro|name|coop|al|dz|ar|ae|aw|om|az|eg|et|ie|ee|ad|au|ai|ag|at|au |mo|bb|pg|bs|pk|py|ps|bh|pa|br|by|bm|bg|mp|bj|be|is|pr|ba|pl| bo|bz|bw|bt|bf |bi|bv|kp|gq|dk|de|tl|tp|tg|dm|do|ru|ec|er|fr|fo|pf|gf|tf|va| ph|fj|fi|cv|fk |gm|cg|cd|co|cr|gg|gd|gl|ge|cu|gp|gu|gy|kz|ht|kr|nl|an|hm|hn| ki|dj|kg|gn|gw |ca|gh|ga|kh|cz|zw|cm|qa|ky|km|ci|kw|cc|hr|ke|ck|lv|ls|la|lb| |lu|rw|ro|mg|im|mv|mt|mw|my|ml|mk|mh|mq|yt|mu|mr|us|um|as|vi|mn|ms|bd|pe|fm |mm|md|ma|mc|mz|mx|nr|np|ni|ne|ng|nu|no|nf|na|za|aq|gs|eu|pw| pn|pt|jp|se|ch |sv|ws|yu|sl|sn|cy|sc|sa|cx|st|sh|kn|lc|sm|pm|vc|lk|sk|si|sj|sz|sd|sr|sb|so |tj|tw|th|tz|to|tc|tt|t|tv|tr|tm|tk|wf|vu|gt|ve|bn|ug|ua|uy| uz|es|eh|gr|hk |sg|nc|nz|hu|sy|jm|ac|ye|iq|ir|il|it|in|id|uk|vg|io|jo|vn| zm|je|td|gi|cl|cf |cn";
var regu = "^[a-z0-9][_a-z0-9-]*([.][_a-z0-9- ] )*@([a-z0-9 -_] [.]) (" strSuffix ")$";
var re = new RegExp(regu);
if(email.trim()=='') check=1;
else if(email.length > 50) check=2;
else if(email.search(re) == -1) check=3;
else { check=0;}
$(this).next().remove("span");
$(this).after("" ErrorWords[check] "");
})
}
})
================================ =====================
//폴더 활동
jQuery.fn.extend({
" checkCode":function()
{
$(this).blur(function(){
var check;
var pwd=$(this).val();
var path = /^[a-zA- Z0-9_]{6,16}$/;
if(pwd.trim()=='') check=1
else if(!path.test(); pwd)) check=4;
else check=0;
$(this).next().remove("span"
$(this).after("" ErrorWords[check] "");
})
}
}) >jQuery.fn.extend({
"checkCode2":function(pwd)
{
$(this).blur(function(){
var check;
var pwd2=$ (this).val();
if(pwd2.trim()= ='') check=1
else if(pwd2!=$(pwd).val()) check=5 🎜>else check=0
$(this).next().remove(" span");
$(this).after("" ErrorWords[check] "");
})
}
})
======================================= = ========
//실행하려는 경우
jQuery.fn.extend({
"checkCPName":function()
{
$(this) .blur(function(){
var check;
var CPName=$(this).val();
if(CPName.trim()=='') check=1;
else if(CPName.length>50) check=6;
그렇지 않으면 확인=0;
$(this).next().remove("span");
$(this).after("" ErrorWords[check] "");
})
}
})

=======================


jQuery.fn.extend({
"checkTel":function()
{
$(this).blur(🎜>{ var check;
var names=$(this). attr("이름"); $("input[name='" 이름 "']").eq(0).val( )
var path2= /^[0-9]{7, 10}$/
if(check1.trim() == ''|| check2.trim()=='') 확인. =7;
else if(!path1.test(check1)) 확인 =8;
else if(!path2.test(check2)) $("input[name='" names "']").eq(1).next().remove("span "
$("input[name='" names "']"); .eq(1).after("" ErrorWords[check] " "
})
}
); })
========================= ========
//闭包QQ /MSN核对
jQuery.fn.extend({
"checkQQ":function()
{
$(this) .blur(function(){
var check;
var CPQQ=$(this).val();
var 경로= /^[0-9]{5,12}$/;
if(CPQQ.trim()=='') check=1;
else if(!path.test(CPQQ)) check=10;
그렇지 않으면 확인=0;
$(this).next().remove("span");
$(this).after("" ErrorWords[check] "");
})
}
})
================================ ================== ====
//
jQuery.fn.extend({
"checkAdd":function()
{
$(this).blur(function() {
var CPAdd=$(this).val();
if(CPAdd.trim()=='') check=1
else if(CPAdd.length> ;50) check=11;
else check=0;
$(this).next().remove("span"
$(this).after( "" ErrorWords[check] "")
})
}
})
============================================ ===========================================
//닫기 사용자 실명 확인은 프로그램 결과
jQuery.fn.extend({
"checkRealName":function()
{
var check;
$(this)를 반환하는 함수를 사용합니다. Blur(function (){
var realName=$(this).val();
var reg = /^[u4e00-u9fa5]{1,10}$/gi;
if(realName. Trim() =='') check=1;
else if(!reg.test(realName)) check=12;
else check=0
$(this).next(). 제거(" 스팬")
$(this).after("" ErrorWords[check] ""); 반품 확인
})
}
})
=========================== ==== ============================================= ==
//휴대폰 번호 확인 종료
jQuery.fn.extend({
"checkPhone":function()
{
$(this).blur(function(){
var check;
var Telephone=$(this).val();
var reg=/^[0-9]{11}$/
if(telephone.trim() =='' ) check=1;
else if(!reg.test(telephone)) check=13;
else check=0
$(this).next().remove(" span");
$(this).after("" ErrorWords[check] "");
})
}
})
====================================== ======= ========================================== =====
//폐쇄 우편번호 확인
jQuery.fn.extend({
"checkPCode":function()
{
$(this).blur(function( ){
var check ;
var PCode=$(this).val()
var reg=/^[0-9]{6}$/
if(PCode== '') check=1;
else if(!reg.test(PCode)) check=14;
else check=0
$(this).next().remove("span" );
$( this).after("" ErrorWords[check] "")
}); }
})
======================================= ========= ======================================== =

// 클로저 사용자 이름 확인
jQuery.fn.extend({
"checkUserName":function()
{
$(this).blur(function(){
var check;
var UserName=$(this).val()
if(UserName=='') check=1
else if(UserName.length15) check= 15;
else check=0
$(this).next().remove("span")
$(this).after("" ErrorWords[check] "");
})
}
})

==== ======= ========================================== ======= ===================

//클로저 도메인 이름 확인
jQuery.fn.extend({
"checkSite":function( )
{
$(this).blur(function(){
var check;
var WebSite=$(this).val();
var reg= /http(s )?://([w-] .) [w-] (/[w- ./?%&=]*)?
if(WebSite=='' ) check=1;
else if(!reg.test(WebSite)) check=16;
else check=0
$(this).next().remove("span");
$(this) .after("" ErrorWords[check] "")
})
}
})

======================================= ========== ====================================
/ /데이터베이스에 사용자 이름이 있는지 확인합니다(WebService 메서드 호출)
jQuery.fn.extend({
"nameAjax":function(LName,Lfun)
{
$(this). Blur(function(){
var check;
var thisid=$(this).attr("id");
var logname=$(this).val();
if( logname=='')
{
check=1;
$("#" thisid).next().remove("span")
$("#" thisid). after("" ErrorWords[check] "")
}
else if(logname.length15)
{
check=15;
$(this).next().remove("span")
$(this).after("" ErrorWords[check] "");
}
else
{
$.ajax({
유형: "POST",
contentType: "application/ json;utf-8",
url: "./WebService.asmx/" LName,
data:"{" Lfun ":'" logname "' }",
dataType: 'json',
anysc:false,
success:function(data)
{ if(data.d) check=17;
else check=0;
$("#" thisid).next ().remove("span")
$("#" thisid).after(" ");
}
})
}
})
}
})

해당 웹 서비스 방식 :

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

///

///여기서 로그인 이름이 존재하는지 확인합니다. 여기서는 게으른 확인을 사용합니다.
///

///
///
[WebMethod]
public bool checkLogoName(string lognames)
{
Random r = new Random();
int i = r.Next(1, 10000);
if (i % 2 == 0) return true;
}
========================================= === ===========================================
/ /사용자 확인 사서함이 데이터베이스에 있는지 여부(웹 서비스 호출 방법)
jQuery.fn.extend({
"emailAjax":function(Lemail,Lfun)
{
$(this ).blur(function (){
var check;
var thisid=$(this).attr("id");
var email=$(this).val().toLowerCase() ;
var strSuffix = "cc|com|edu|gov|int|net|org|biz|info|pro|name|coop|al|dz|af|ar|ae|aw|om|az|eg| et|ie|ee |ad|ao|ai|ag|at|au|mo|bb|pg|bs|pk|py|ps|bh|pa|br|by|bm|bg|mp|bj|be| is|pr|ba |pl|bo|bz|bw|bt|bf|bi|bv|kp|gq|dk|de|tl|tp|tg|dm|do|ru|ec|er|fr|fo| pf|gf|tf |va|ph|fj|fi|cv|fk|gm|cg|cd|co|cr|gg|gd|gl|ge|cu|gp|gu|gy|kz|ht|kr| nl|an|hm |hn|ki|dj|kg|gn|gw|ca|gh|ga|kh|cz|zw|cm|qa|ky|km|ci|kw|cc|hr|ke|ck| lv|ls|la |lb|lt|lr|ly|li|re|lu|rw|ro|mg|im|mv|mt|mw|my|ml|mk|mh|mq|yt|mu|mr| us|um|as |vi|mn|ms|bd|pe|fm|mm|md|ma|mc|mz|mx|nr|np|ni|ne|ng|nu|no|nf|na|za| aq|gs|eu |pw|pn|pt|jp|se|ch|sv|ws|yu|sl|sn|cy|sc|sa|cx|st|sh|kn|lc|sm|pm|vc| lk|sk|si |sj|sz|sd|sr|sb|so|tj|tw|th|tz|to|tc|tt|tn|tv|tr|tm|tk|wf|vu|gt|ve| bn|ug|ua |uy|uz|es|eh|gr|hk|sg|nc|nz|hu|sy|jm|am|ac|ye|iq|ir|il|it|in|id|uk| vg|io|jo |vn|zm|je|td|gi|cl|cf|cn";
var regu = "^[a-z0-9][_a-z0-9-]*([. ][_a-z0 -9-] )*@([a-z0-9-_] [.]) (" strSuffix ")$";
var re = new RegExp(regu);
if (email.trim( )=='') { check=1;$(this).next().remove("span") $(this).after(" " ErrorWords[check] "") }
else if(email.length > 50) { check=2; span"); $ (this).after("" ErrorWords[check] ""); }
else if(email. search(re) = = -1) { check=3; $(this).next().remove("span") $(this).after("" ErrorWords [확인] ""); }
else
{
$.ajax({
type: "POST",
contentType: "application /json;utf- 8",
url: "./WebService.asmx/" Lemail,
data:"{" Lfun ":'" email "'}",
dataType: 'json' ,
anysc :false,
success:function(data)
{ if(data.d) check=18;
else check=0
$("#" thisid). next().remove ("span");
$("#" thisid).after("" ErrorWords[check] "> ;");
}
})
}
})
}
})


해당 웹 서비스 방식 :

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

///

/// 확인 메일함이 존재하는지 여부는 여기에서 Lazy하고 무작위 확인을 사용합니다

///
/// /// > ;
[WebMethod]
public bool checkLogEmail(string logemails)
{
Random r = new Random()
int i = r.Next(1 , 10000);
if (i % 2 == 0) return true;
return false
}

============= ======= ========================================== ======= =============
//최종 제출
jQuery.fn.extend({
"toReg":function(num) // 여기서 수녀님을 참고하세요. 위의 15개 검증을 모두 활성화했기 때문에 검증이 있는 만큼 숫자 쓰기를 활성화하세요...
{
$(this).click(function(){
var erolen =$(".msg_error ").length;
var warlen=$(".msg_warning").length
var oklen=$(".msg_ok").
if(oklen= =num)
{ Alert("확인 통과...") }
else Alert("오류: " erolen ", 경고: " warlen ", 전달: " oklen ", 정보를 완전히 입력하세요. ! ");
})
}
})
})(jQuery);
===================== = ================================================ = =====================


4. 웹 페이지에 스크립트 도입

코드 복사

코드는 다음과 같습니다.

5. 웹페이지 HTML 소스코드

코드 복사

코드는 다음과 같습니다.

사용자 로그인 이름 확인:
< ;br />
이메일 확인:< ;input type="text" id="Emails"/>


비밀번호 확인: < ;br />

비밀번호 변경:


회사명 확인:

전화: 지역번호 :
-




팩스: 지역 코드:
-


사용자 QQ:

회사 주소:


사용자 실명:

휴대폰 번호 확인:

우편번호 확인: < ;input type="text" id="PCodes"/>


도메인 이름 확인:
확인:

//여기까지입니다



디자인 요약: 예상치 못한 검증 등 아직 부족한 부분이 많고, 코드 중복성도 너무 많아서 사용하면서 직접 개선했으면 좋겠습니다...
소스 코드 다운로드 주소
http:/ /xiazai.jb51.net/201010/yuanma/jqueryRegister.rar