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

設計目標: 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

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。