jQuery 検証プラグイン Web フロントエンドデザインパターン (asp.net)

設計目標: jQuery フレームワークに基づいたユニバーサル Web 検証プラグインを構築します...

設計要件: 1. 美しい CSS スタイルと小さなアイコンの装飾が必要です...
2. jQuery フレームワークに基づいています。 . .
3. .net Web サービスを呼び出してデータベースとの非同期対話を実現します。

解決策: 1. まず、Web の外観をユーザーに表示する 3 つのクラスを設計します。。感知。それらは
.msg_warning{font-family:Arial,Helvetica,sans-serif,simsun; 背景:#e7f7ff url(register/MsgWarning.gif) no-repeat;border:solid 1px #6cf;color:#333 ;パディング:0 0 0 36px !重要;幅:220px;マージン左: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 !重要;幅 : 220px; margin-left:20px;}
これらは、検証エラー、検証警告、および正しい検証の異なるスタイルです...
2. スタイルに示されているように、MsgWarning を含め、対応する位置に画像を配置します。 gif、MsgError.jpg、および MsgOk.gif は、.msg_warning に対応する 3 つの小さな画像です。

3. スクリプトの作成を開始します。
(1)、//null 値を削除します。

コードをコピーコードは次のとおりです。

 
String.prototype.trim = function() 
{ 
var x = this; 
x = x.replace(/^s*(.*)/, "$1"); 
return x; 🎜> 
この関数は、テキスト ボックス内の空の位置を削除 (トリム) するために使用されます... 

(2) 検証をトリガーするときにプロンプトステートメントとスタイルを保存する 2 つの配列を書き込みます...
var ErrorWords = ['正解! 』、『空にはなれない！ '、'メールアドレスの長さは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() // 
{ 
 $(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| 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|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| |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 = 新しい 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("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("スパン"); 
$(this).after("" ErrorWords[check] ""); 
}) 
} 
}) 
=============== ======================== = ======== 
//実行したい場合 
jQuery.fn.extend({ 
"checkCPName":function() 
{ 
$(this) .blur(function(){ 
var チェック; 
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(🎜>{ var check; 
var names=$(this). attr("name"); $("input[name='" names "']").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)) check=9; $("input[name='" names "']").eq(1).next().remove(" " 
$("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 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() delete(" スパン"); 
$(this).after("" ErrorWords[check] "");リターンチェック; 
}) 
} 
}) 
============================ ==== ============================================ == 
//携帯電話番号の確認
jQuery.fn.extend({ 
"checkPhone":function() 
{ 
$(this).blur(function(){ 
var check; 
var telephone=$(this).val(); 
var reg=/^[0-9]{11}$/; =='' ) check=1; 
else if(!reg.test(telephone)) check=13; 
$(this).next().remove("スパン"); 
$(this).after("" ErrorWords[check] ""); 
}) 
} 
}) 
====================================== ======= ========================================== ===== 
//郵便番号チェック
jQuery.fn.extend({ 
"checkPCode":function() 
{ 
$(this).blur(function( ){ 
var check ; 
var PCode=$(this).val(); 
var reg=/^[0-9]{6}$/; '') check=1; 
else if(!reg.test(PCode)) check=14; 
$(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 || ユーザー名.length>15) check= 15; 
$(this).next().remove("span"); class='" ErrorClass[check ] "'>" 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 
$(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"); after("" ErrorWords[check] ""); 
} 
else if(logname.length<3||logname .length>15) 
{ 
 check=15; 
$(this).next().remove("span"); ='" ErrorClass[check] "'>" 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(" "); 
} 
}) 
} 
}) 
} 
}) 

 

対応する Web サービス メソッド: 




コードをコピー


 コードは次のとおりです:

 
///  
///ここではログイン名が存在するかどうかを確認します。ここではランダム検証を使用します
///  ///  
///  
[WebMethod] 
public bool checkLogoName(string lognames) 
{ 
ランダム r = new Random(); 
int i = r.Next(1, 10000); 
if (i % 2 == 0) 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) { $(this).next().remove(" span"); $ (this).after("" ErrorWords[check] ""); } 
else if(email. search(re) = = -1) { check=3; $(this).next().remove("span"); $(this).after("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] "} 
}) 
} 
}) 
} 
}) 

 
対応する Web サービス メソッド: 

コードをコピーコードは次のとおりです:

///

/// チェックメールボックスが存在するかどうか、ここではランダム検証を使用します
/// ///  ;returns>[WebMethod] 
public bool checkLogEmail(string logemails) 
{ 
Random r = new Random() 
int i = r.Next(1) , 10000); 
 if (i % 2 == 0) true を返す 
} 

========= ======= ========================================== ======= ============= 
//最終送信
jQuery.fn.extend({ 
"toReg":function(num) //ここの修道女に注意してください。上記の 15 個の検証をすべて有効にしたため、[検証がある限り多くの番号を書き込む] を有効にしてください... 
{ 
$(this).click(function(){ 
var erolen) =$(".msg_error ").length; 
var warlen=$(".msg_warning").length; 
var oklen=$(".msg_ok").length; =num) 
 {alert("検証に合格しました..."); } 
else warning("エラー: " erolen "、警告: " warlen "、パス: " oklen "、情報を完全に入力してください！ "); 
}) 
} 
}) 
})(jQuery); 
===================== = ================================================ = ====================== 

 
4. Web ページにスクリプトを導入します 



 

コードをコピーします

コードは次のとおりです:

5. Web ページの HTML ソースコード

コードをコピーしますコードは次のとおりです。

ユーザーログイン名の検証:
;br />
メールの検証:

パスワードの検証:

パスワードを変更します:

会社名チェック:

電話番号: 市外局番:
-

FAX: 市外局番:
-

< br />ユーザーQQ:

会社住所:

ユーザーの本名:

携帯電話番号の検証:

郵便番号の検証: < ;input type="text" id="PCodes"/>

ドメイン名の検証:
< br /> 検証:

設計概要: 予期せぬ検証など、まだ不完全な点が多くあります。コードの冗長性も多すぎます。使用するときに自分で改善できればと思います...
ソースコードのダウンロードアドレス
http:/ /xiazai.jb51.net/201010/yuanma/jqueryRegister.rar

jQuery 検証プラグイン Web フロントエンド デザイン パターン (asp.net)_jquery

jQuery 検証プラグイン Web フロントエンドデザインパターン (asp.net)_jquery