jQuery 유효성 검사 플러그인 웹 프런트엔드 디자인 모드(asp.net)
설계 요구사항: 1.예쁜 css 스타일과 작은 아이콘의 윤색이 필요합니다.
2. jQuery 프레임워크 기반...
3. 호출.net 웹 서비스로 데이터베이스와의 비동기적 상호작용...
해결 방안: 첫째, 우리는 세 가지 종류를 디자인하여 각각 웹이 사용자에게 주는 시각적 감지를 나타낸다.각각
.msg_warning{font-family:Arial,Helvetica,sans-serif,simsun; background:#e7f7ff url(register/MsgWarning.gif) no-repeat;border:solid 1px #6cf;color:#333;padding:0 0 0 36px !important;width:220px; margin-left:20px;}
.msg_error{font-family:Arial,Helvetica,sans-serif,simsun;background:#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;background:#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_error;.msg_ok;
3. 스크립트 작성 시작
(1),//공백값 제거
String.prototype.trim = function()
{
var x = this;
x = x.replace(/^\s*(.*)/, "$1");
return x;
}
이 함수는 텍스트 상자의 빈 위치를 제거하는 데 사용됩니다. (trim)
(2) 트리거 검증을 할 때의 알림문과 스타일을 저장하기 위해 두 개의 그룹을 쓴다...
var ErrorWords = ['정답!','비워둘 수 없습니다!','E-mail 주소 길이는 50자리를 넘으면 안 됩니다!','올바른 메일 형식을 입력하십시오!','비밀번호는 6개 이상, 16개 미만이어야 합니다!'"키가 맞지 않습니다!"회사명은 50위를 넘으면 안 됩니다!"구역 번호와 번호가 모두 비어 있지 않습니다!""구역 번호는 4자리 숫자!""7-10자리 숫자!""QQ번호는 5-12자리 숫자!"주소 길이가 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() // checkEmail()
{
$(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|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;
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]+"");
})
}
})
===========================================================
// s
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;
else check=0;
$(this).next().remove("span");
$(this).after(""+ErrorWords[check]+"");
})
}
})
==========================================================================
// /
jQuery.fn.extend({
"checkTel":function()
{
$(this).blur(function(){
var check;
var names=$(this).attr("name");
var check1=$("input[name='"+names+"']").eq(0).val();
var check2=$("input[name='"+names+"']").eq(1).val();
var path1 = /^[0-9]{4}$/;
var path2= /^[0-9]{7,10}$/;
if(check1.trim() == ''|| check2.trim()=='') check=7;
else if(!path1.test(check1)) check=8;
else if(!path2.test(check2)) check=9;
else check=0;
$("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 path= /^[0-9]{5,12}$/;
if(CPQQ.trim()=='') check=1;
else if(!path.test(CPQQ)) check=10;
else check=0;
$(this).next().remove("span");
$(this).after(""+ErrorWords[check]+"");
})
}
})
=======================================================================================
//
jQuery.fn.extend({
"checkAdd":function()
{
$(this).blur(function(){
var check;
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().remove("span");
$(this).after(""+ErrorWords[check]+"");
return 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.length<3 || UserName.length>15) 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.length<3||logname.length>15)
{
check=15;
$(this).next().remove("span");
$(this).after(""+ErrorWords[check]+"");
}
else
{
$.ajax({
type: "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(""+ErrorWords[check]+"");
}
})
}
})
}
})
해당되는 웹 서비스 방법:
///
/// ，
///
///
///
[WebMethod]
public bool checkLogoName(string lognames)
{
Random r = new Random();
int i = r.Next(1, 10000);
if (i % 2 == 0) return true;
return false;
}
=========================================================================================
// （ Web ）
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; $(this).next().remove("span"); $(this).after(""+ErrorWords[check]+""); }
else if(email.search(re) == -1) { check=3; $(this).next().remove("span"); $(this).after(""+ErrorWords[check]+""); }
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]+"");
}
})
}
})
}
})
해당되는 웹 서비스 방법:
///
/// ，
///
///
///
[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) // nun ， ， 15 ...
{
$(this).click(function(){
var erolen=$(".msg_error").length;
var warlen=$(".msg_warning").length;
var oklen=$(".msg_ok").length;
if(oklen==num)
{ alert(" ..."); }
else alert(" ："+erolen+", ："+warlen+", ："+oklen+", ！");
})
}
})
})(jQuery);
=============================================================================================
4. 웹 페이지에 스크립트 도입
<br>$(document).ready(function(){
<br>$("#Emails").checkEmail();// Email
<br>$("#Codes").checkCode();//
<br>$("#Codes2").checkCode2("#Codes");// , ID
<br>$("#CPNames").checkCPName();//
<br>$("input[name='tel']").checkTel();// （ ： name ， tel）
<br>$("input[name='fax']").checkTel();// （ ： name ， tel）
<br>$("#QQs").checkQQ();// QQ
<br>$("#CPAdds").checkAdd();//
<br>$("#RealName").checkRealName();// ,10
<br>$("#Phones").checkPhone();// ，11
<br>$("#PCodes").checkPCode();// ，6
<br>$("#UserName").checkUserName();//
<br>$("#WebSites").checkSite();//
<br>$("#usernameAjax").nameAjax("checkLogoName","lognames");//Web ， ； WebService
<br>$("#uemailAjax").emailAjax("checkLogEmail","logemails");//Web ， ； WebService
<br>
<br>$("#register").toReg(15);//
<br>})
<br>
5. 웹 페이지의 HTML 소스
：
：
：
：
：
: ：
-
: ：
-
QQ：
：
：
：
：
：
（ ） ：
（ ） ：
//
디자인 소결: 그리고 미비한 부분도 있다. 예를 들어 생각지도 못한 검증, 그리고 코드의 군더더기가 너무 커서 사용할 때 스스로 개량할 수 있기를 바란다.
소스 코드 다운로드 주소http://xiazai.jb51.net/201010/yuanma/jqueryRegister.rar
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
다양한 언어의 JSONJSON은 Javascript 표기법을 사용하여 데이터 구조를 레이아웃하는 데이터 형식입니다. 그러나 Javascript가 코드에서 이러한 구조를 나타낼 수 있는 유일한 언어는 아닙니다. 저는 일반적으로 '객체'{}...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
