Jquery表單驗證

Jquery表單驗證javascript

轉載原文:http://www.cnblogs.com/knowledgesea/archive/2012/05/21/2511936.htmlcss

 

 

使用插件:formValidator html

下載連接:http://www.cnblogs.com/wzmaodong/archive/2008/01/11/1034901.htmljava

使用步驟:jquery

1.首先在項目中添加必備jscss ajax

 

 

2.代碼中添加引用(必備引用)正則表達式

 

 

    <script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script> <!--jquery必須庫-->    <script src="formValidator1/formValidator-4.0.1.min.js" type="text/javascript"></script> <!--表單驗證必須庫-->    <script src="formValidator1/formValidatorRegex.js" type="text/javascript"></script> <!--表單驗證擴展庫-->    <link href="formValidator1/style/validator.css" rel="stylesheet" type="text/css" /><!--表單驗證樣式表-->json

 

 

3.<body>中要驗證的標籤(作一些經常使用的演示)數組

 

 

<table border="0px" style="font-size:12px">  <tr>       <td colpan="3"><input type="submit" name="button" id="button" value="提交" /></td>    </tr>    <tr>       <td align="right">身份證(正則表達式庫):</td>      <td><input name="sfz" type="text" id="sfz" /></td>      <td><div id="sfzTip" style="width:300px"></div></td>  <!--必須注意這裏提示驗證信息中的div的id值,跟要驗證控件中的id值多了一個Tip,下面的都是這樣。必須多的是Tip,也必需要多。-->    </tr>    <tr>       <td align="right">身份證(外部函數):</td>      <td><input type="text" id="sfz1" style="width:120px" /></td>      <td><div id="sfz1Tip" style="width:300px"></div></td>    </tr>    <tr>       <td align="right">整數:</td>      <td><input type="text" id="zs" style="width:120px" /></td>      <td><div id="zsTip" style="width:300px"></div></td>    </tr>    <tr>       <td align="right">正整數:</td>      <td><input type="text" id="zzs" style="width:120px" /></td>      <td><div id="zzsTip" style="width:300px"></div></td>    </tr>    <tr>       <td align="right">負整數:</td>      <td><input type="text" id="fzs" style="width:120px" /></td>      <td><div id="fzsTip" style="width:300px"></div></td>    </tr>    <tr>       <td align="right">數字:</td>      <td><input type="text" id="sz" style="width:120px" /></td>      <td><div id="szTip" style="width:300px"></div></td>    </tr>    <tr>       <td align="right">正數(正整數 + 0):</td>      <td><input type="text" id="zs1" style="width:120px" /></td>      <td><div id="zs1Tip" style="width:300px"></div></td>    </tr>    <tr>       <td align="right">負數(負整數 + 0):</td>      <td><input type="text" id="fs" style="width:120px" /></td>      <td><div id="fsTip" style="width:300px"></div></td>    </tr>    <tr>       <td align="right">浮點數:</td>      <td><input type="text" id="fds" style="width:120px" /></td>      <td><div id="fdsTip" style="width:300px"></div></td>    </tr>    <tr>       <td align="right">正浮點數:</td>      <td><input type="text" id="zfds" style="width:120px" /></td>      <td><div id="zfdsTip" style="width:300px"></div></td>    </tr>    <tr>       <td align="right">負浮點數:</td>      <td><input type="text" id="ffds" style="width:120px" /></td>      <td><div id="ffdsTip" style="width:300px"></div></td>    </tr>    <tr>       <td align="right">非負浮點數(正浮點數 + 0):</td>      <td><input type="text" id="fffds" style="width:120px" /></td>      <td><div id="fffdsTip" style="width:300px"></div></td>    </tr>    <tr>       <td align="right">非正浮點數(負浮點數 + 0):</td>      <td><input type="text" id="fzfds" style="width:120px" /></td>      <td><div id="fzfdsTip" style="width:300px"></div></td>    </tr>    <tr>       <td align="right">顏色:</td>      <td><input type="text" id="ys" style="width:120px" /></td>      <td><div id="ysTip" style="width:300px"></div></td>    </tr>    <tr>       <td align="right">你的EMAIL:</td>      <td><input type="text" id="email" style="width:120px" /></td>      <td><div id="emailTip" style="width:300px"></div></td>    </tr>    <tr>       <td align="right">手機:</td>      <td><input type="text" id="sj" style="width:120px" /></td>      <td><div id="sjTip" style="width:300px"></div></td>    </tr>    <tr>       <td align="right">郵編:</td>      <td><input type="text" id="yb" style="width:120px" /></td>      <td><div id="ybTip" style="width:300px"></div></td>    </tr>    <tr>       <td align="right">非空:</td>      <td><input type="text" id="fk" style="width:120px" /></td>      <td><div id="fkTip" style="width:300px"></div></td>    </tr>    <tr>       <td align="right">圖片:</td>      <td><input type="text" id="tp" style="width:120px" /></td>      <td><div id="tpTip" style="width:300px"></div></td>    </tr>    <tr>       <td align="right">壓縮文件:</td>      <td><input type="text" id="rar" style="width:120px" /></td>      <td><div id="rarTip" style="width:300px"></div></td>    </tr>    <tr>       <td align="right">ip4:</td>      <td><input type="text" id="ip4" style="width:120px" /></td>      <td><div id="ip4Tip" style="width:300px"></div></td>    </tr>    <tr>       <td align="right">QQ號碼:</td>      <td><input type="text" id="qq" style="width:120px" /></td>      <td><div id="qqTip" style="width:300px"></div></td>    </tr>    <tr>       <td align="right">國內電話:</td>      <td><input type="text" id="dh" style="width:120px" /></td>      <td><div id="dhTip" style="width:300px"></div></td>    </tr>    <tr>       <td align="right">用戶名:</td>      <td><input type="text" id="yhm" style="width:120px" /></td>      <td><div id="yhmTip" style="width:300px"></div></td>    </tr>    <tr>       <td align="right">字母:</td>      <td><input type="text" id="zm" style="width:120px" /></td>      <td><div id="zmTip" style="width:300px"></div></td>    </tr>    <tr>       <td align="right">大寫字母:</td>      <td><input type="text" id="dxzm" style="width:120px" /></td>      <td><div id="dxzmTip" style="width:300px"></div></td>    </tr>    <tr>       <td align="right">小寫字母:</td>      <td><input type="text" id="xxzm" style="width:120px" /></td>      <td><div id="xxzmTip" style="width:300px"></div></td>    </tr>    <tr>       <td align="right">身份證:</td>      <td><input type="text" id="sfz" style="width:120px" /></td>      <td><div id="sfzTip" style="width:300px"></div></td>    </tr>  </table>服務器

 

 

 

 

4.<script>中的代碼

 

<script type="text/javascript">        $(document).ready(function () {            $.formValidator.initConfig({ formID: "form1", onError: function () { alert("校驗沒有經過,具體錯誤請看錯誤提示") } });            $("#sfz").formValidator({ onShow: "請輸入15或18位的身份證", onfocus: "輸入15或18位的身份證", onCorrect: "輸入正確" }).regexValidator({ regExp: "idcard", dataType: "enum", onError: "你輸入的身份證格式不正確" }); ;            $("#sfz1").formValidator({ onShow: "請輸入15或18位的身份證", onfocus: "輸入15或18位的身份證", onCorrect: "輸入正確" }).functionValidator({ fun: isCardID });             $("#zs").formValidator({ onShow: "請輸入整數", onCorrect: "謝謝你的合做,你的整數正確" }).regexValidator({ regExp: "intege", dataType: "enum", onError: "整數格式不正確" });            $("#zzs").formValidator({ onShow: "請輸入正整數", onCorrect: "謝謝你的合做,你的正整數正確" }).regexValidator({ regExp: "intege1", dataType: "enum", onError: "正整數格式不正確" });            $("#fzs").formValidator({ onShow: "請輸入負整數", onCorrect: "謝謝你的合做,你的負整數正確" }).regexValidator({ regExp: "intege2", dataType: "enum", onError: "負整數格式不正確" });            $("#sz").formValidator({ onShow: "請輸入數字", onCorrect: "謝謝你的合做,你的數字正確" }).regexValidator({ regExp: "num", dataType: "enum", onError: "數字格式不正確" });            $("#zs1").formValidator({ onShow: "請輸入正數", onCorrect: "謝謝你的合做,你的正數正確" }).regexValidator({ regExp: "num1", dataType: "enum", onError: "正數格式不正確" });            $("#fs").formValidator({ onShow: "請輸入負數", onCorrect: "謝謝你的合做,你的負數正確" }).regexValidator({ regExp: "num2", dataType: "enum", onError: "負數格式不正確" });             $("#sj").formValidator({ onShow: "請輸入你的手機號碼", onfocus: "必須是13或15打頭哦", onCorrect: "謝謝你的合做,你的手機號碼正確" }).regexValidator({ regExp: "mobile", dataType: "enum", onError: "手機號碼格式不正確" });            //$("#").formValidator({onShow:"",onfocus:"請輸入",onCorrect:"謝謝你的合做,你的正確"}).regexValidator({regExp:"",dataType:"enum",onError:"格式不正確"});            $("#email").formValidator({ onShow: "請輸入你的email", onfocus: "請注意你輸入的email格式,例如:wzmaodong@126.com", onCorrect: "謝謝你的合做,你的email正確" }).regexValidator({ regExp: "email", dataType: "enum", onError: "email格式不正確" });            $("#fds").formValidator({ onShow: "請輸入浮點數", onCorrect: "謝謝你的合做,你的浮點數正確" }).regexValidator({ regExp: "decmal", dataType: "enum", onError: "浮點數格式不正確" });            $("#zfds").formValidator({ onShow: "請輸入正浮點數", onCorrect: "謝謝你的合做,你的正浮點數正確" }).regexValidator({ regExp: "decmal1", dataType: "enum", onError: "正浮點數格式不正確" });            $("#ffds").formValidator({ onShow: "請輸入負浮點數", onCorrect: "謝謝你的合做,你的負浮點數正確" }).regexValidator({ regExp: "decmal2", dataType: "enum", onError: "負浮點數格式不正確" });            $("#fffds").formValidator({ onShow: "請輸入非負浮點數", onCorrect: "謝謝你的合做,你的非負浮點數正確" }).regexValidator({ regExp: "decmal4", dataType: "enum", onError: "非負浮點數格式不正確" });            $("#fzfds").formValidator({ onShow: "請輸入非正浮點數", onCorrect: "謝謝你的合做,你的非正浮點數正確" }).regexValidator({ regExp: "decmal5", dataType: "enum", onError: "非正浮點數格式不正確" });            $("#ys").formValidator({ onShow: "請輸入16進制顏色", onCorrect: "謝謝你的合做,你的16進制顏色正確" }).regexValidator({ regExp: "color", dataType: "enum", onError: "16進制顏色格式不正確" });            $("#yb").formValidator({ onShow: "請輸入郵編", onfocus: "6位數字組成的哦", onCorrect: "謝謝你的合做,你的郵編正確" }).regexValidator({ regExp: "zipcode", dataType: "enum", onError: "郵編格式不正確" });            $("#ip4").formValidator({ onShow: "請輸入ip4", onfocus: "例如:172.16.201.18", onCorrect: "謝謝你的合做,你的ip4正確" }).regexValidator({ regExp: "ip4", dataType: "enum", onError: "ip4格式不正確" });            $("#fk").formValidator({ onShow: "請輸入非空字符", onCorrect: "謝謝你的合做,你的非空字符正確" }).regexValidator({ regExp: "notempty", dataType: "enum", onError: "非空字符格式不正確" });            $("#tp").formValidator({ onShow: "請輸入圖片名", onCorrect: "謝謝你的合做,你的圖片名正確" }).regexValidator({ regExp: "picture", dataType: "enum", onError: "圖片名格式不正確" });            $("#rar").formValidator({ onShow: "請輸入壓縮文件名", onCorrect: "謝謝你的合做,你的壓縮文件名正確" }).regexValidator({ regExp: "rar", dataType: "enum", onError: "壓縮文件名格式不正確" });            $("#qq").formValidator({ onShow: "請輸入QQ號碼", onCorrect: "謝謝你的合做,你的QQ號碼正確" }).regexValidator({ regExp: "qq", dataType: "enum", onError: "QQ號碼格式不正確" });            $("#dh").formValidator({ onShow: "請輸入國內電話", onfocus: "例如:0577-88888888或省略區號88888888", onCorrect: "謝謝你的合做,你的國內電話正確" }).regexValidator({ regExp: "tel", dataType: "enum", onError: "國內電話格式不正確" });            $("#yhm").formValidator({ onShow: "請輸入用戶名", onCorrect: "謝謝你的合做,你的用戶名正確" }).regexValidator({ regExp: "username", dataType: "enum", onError: "用戶名格式不正確" });            $("#zm").formValidator({ onShow: "請輸入字母", onCorrect: "謝謝你的合做,你的字母正確" }).regexValidator({ regExp: "letter", dataType: "enum", onError: "字母格式不正確" });            $("#dxzm").formValidator({ onShow: "請輸入大寫字母", onCorrect: "謝謝你的合做,你的大寫字母正確" }).regexValidator({ regExp: "letter_u", dataType: "enum", onError: "大寫字母格式不正確" });            $("#xxzm").formValidator({ onShow: "請輸入小寫字母", onCorrect: "謝謝你的合做,你的小寫字母正確" }).regexValidator({ regExp: "letter_l", dataType: "enum", onError: "小寫字母格式不正確" });            $("#sfz").formValidator({ onShow: "請輸入身份證", onCorrect: "謝謝你的合做,你的身份證正確" }).regexValidator({ regExp: "idcard", dataType: "enum", onError: "身份證格式不正確" });        });</script>

 

 

5.效果圖:

 

 

 

5.<script>中函數參數說明:

 

formValidator:

用來作初始化的類型,必須先執行。("√"爲showalert可用參數)

屬性

屬性名稱

默認值

showalert

詳細解釋

validatorgroup

校驗組

"1"

一個頁面的控件能夠分紅多個組,分開校驗

empty

是否能夠爲空

false

 

automodify

輸入錯誤離開焦點的時候,自動修復錯誤

true

先給出提示而後,自動修復,目前只支持text、file、textarea三種類型

onempty

空時候的提示

"輸入內容爲空"

 

能夠爲空,爲空時候的提示。爲空者不顯示

onshow

顯示時候的提示

"請輸入內容"

 

爲空者不顯示

onfocus

得到焦點的提示

"請輸入內容"

 

爲空者不顯示

oncorrect

輸入正確後的提示

"輸入正確"

 

當你焦點離開控件的時候,若是輸入正確將出現該提示。爲空者不顯示

tipid

顯示錯誤的容器ID

表單ID+"Tip"

 

若是不自動構建提示層,表示提示成的ID號
若是自動構建提示層,表示提示層相對的目標控件

tipcss

自動構建的提示層的樣式

"left":"10px",
"top":"1px",
"height":"20px",
"width":"250px"

 

主要用於定位自動構建的提示層

forcevalid

強制輸入的值必須有效

true

是否把一個全角字符當作2個長度的參數

ajax

提交服務器

true

ajaxValidator是否把該表單提交給服務器

defaultvalue

默認值

null

全部input和select表單。若是你不設置就保持原值,一旦設置就設爲默認值。

triggerevent

默認值

blur

當前支持2種屬性值:
blur:失去焦點的時候觸發
change:當輸入框裏的值發生改變的時候觸發

 

 

 

 

 

inputValidator:

 

屬性

屬性名稱

默認值

詳細解釋

type

比較類型

"size"

(對select無效)
"size":表示比較長度 ,默認值
"number":數值型比較
"string":字符型比較
"date":短日期類型
"datetime":長日期類型

min

最小長度/值

0

默認數值型。若是進行字符比較,請收入字符型
對select-one而言inputValidator裏的參數min和max表示選擇的索引號範圍 
對select-multiple而言inputValidator裏的參數min和max表示選擇的個數

max

最大長度/值

99999999999

同上

onerror

發生錯誤的提示

"輸入錯誤"

爲空者不顯示。

onerrormin

比min屬性小的提示

null

當用戶輸入的值比min屬性小的時候的錯誤提示

onerrormax

比max屬性大的提示

null

當用戶輸入的值比max屬性大的時候的錯誤提示

empty

控件文本值是否容許兩邊爲空

兩邊都容許出現空

默認值{leftempty:true,rightempty:true,emptyerror:null}
leftempty:表示左邊是否容許爲空
rightempty:表示右邊是否容許爲空 
emptyerror:出現該錯誤的時候的提示,若是爲null,則利用onerror屬性來提示錯誤。

 

 

 

 

 

compareValidator:

 

屬性

屬性名稱

默認值

詳細解釋

desid

要比較控件的ID

""

要跟源目標進行比較的目標ID

operateor

比較符號

"="

一共有以下幾種類型:=、!=、>、>=、<、<=

datatype

數據類型

"string"

目前只支持2種:"string"、"number","datetime","date"

onerror

發生錯誤的提示

"輸入錯誤"

爲空者不顯示。

 

 

 

 

 

regexValidator:

 

屬性

屬性名稱

默認值

詳細解釋

regexp

正則表達式或表達式數組

""

採用的是顯式構造函數new RegExp("pattern"[,"flags"]); 因爲Javascript 中'\' 被用做轉義字符,因此在使用顯示構造函數構造實例對象的時候,須要使用'\\' 代替'\' 

param

附加參數

"i"

g:表明能夠進行全局匹配。
i:表明不區分大小寫匹配。
m:表明能夠進行多行匹配。
能夠任意組合,固然也能夠不加參數 

comparetype

比較類型

"||"

"||"或的關係   "&&"並列

datatype

數據類型

"string"

"string":本身寫的表達式,"enum":枚舉名。具體請見demo3.htm
你能夠本身修改、添加formValidatorRegex.js裏的枚舉項目名和表達式。

onerror:

發生錯誤的提示

"輸入錯誤"

爲空者不顯示。

 

 

 

 

 

ajaxValidator:

幾乎全部的屬性跟$.ajax()的屬性同樣,請參考$.ajax()函數的幫助

屬性

屬性名稱

默認值

詳細解釋

type

請求的類型

"GET"

"POST" 或 "GET"

url

發送到的URL地址

""

在服務器端,你能夠經過name爲clientid獲取觸發驗證的控件ID名

datatype

返回的數據類型

"html"

xml、html、script、json、text

timeout

超時設置

999

 

data

數據

""

 

async

是否以異步的方式發送

true

 

success

當請求成功時調用的函數

null

 

processdata

自動處理返回的數據爲字符串

true

在默認的狀況下,若是data選項傳進的數據是一個對象而不是字符串,將會自動地被處理和轉換成一個查詢字符串

complete

當請求完成時調用的函數

null

 

beforesend

當請求前時調用的函數

null

有個一個參數,根$.ajax裏的beforeSend參數同樣。

buttons

你點提交的按鈕(組)jQuery對象

null

當你觸發了ajax校驗,buttons裏對應的按鈕(組)就會灰掉,一直等待服務器返回數據爲止

error

當請求失敗時調用的函數

"請求失敗"

你能夠本身定義這個錯誤,在error裏自動打出。爲空者不顯示。

 

 

functionValidator

屬性

屬性名稱

默認值

返回值的解釋

fun

外部函數名()
參數1:元素的值,
參數2:元素對象

默認看成處理過程

true/false

校驗成功/失敗

字符串

校驗失敗,返回值看成自定義錯誤

處理過程

 

onerror

發生錯誤的提示

"輸入錯誤"

函數return false的時候,顯示該錯誤信息

 

 

 

公共函數:

主要是設置全局參數和判斷是否經過校驗

函數名

函數說明

$.formValidator.initConfig

參數:配置類型 

屬性

默認值

說明

validatorgroup

"1"

你要針對哪一個組進行配置

formid

""

要自動註冊pageIsValid函數的表單ID號

alertmessage

false

是否彈出窗口

autotip

false

是否自動構建提示層

errorfocus

true

發生錯誤的時候,第一個出錯控件是否得到焦點

forcevalid

true

是否一直輸入正確爲止才容許離開焦點

wideword

true

是否把一個全角字符當作2個長度

onsuccess

null

該組校驗經過後的回調函數,返回false,阻止表單的提交

submitonce

false

校驗經過後,是否灰掉全部的提交按鈕

onerror

null

該組校驗失敗後的回調函數, 有兩個參數 

參數1

一個校驗沒有經過的錯誤信息

參數2

一個校驗沒有經過的元素對象

參數3

全部的錯誤信息數組,你能夠經過$.map來遍歷

 

debug

false

是否處於調試模式。true:不提交表單

 

$.formValidator.pageIsValid

一個參數: 不是配置類型 

validatorgroup

"1"

你要針對哪一個組進行驗證

 

$.formValidator.isOneValid

一個參數: 當時設置驗證的表單元素ID。
返回是否校驗成功的信息。 

$.formValidator.setFailState

function("tipid","顯示的信息")
在showword模式下,若是你的額外校驗沒有經過,你能夠經過它來設置成失敗信息和狀態 

$.formValidator.getLength

function("表單元素id")
checkbox或radiobutton表示(同組)選擇的個數。
對select-one,選擇索引的值
對select-multiple,inputValidator裏的參數min和max表示選擇的個數
其它input表示的表示字符長度。 

$.formValidator.retSetTipState

function(校驗組號) 來把該組的提示內容恢復到onshow狀態

$.formValidator.reloadAutoTip

從新定位自動構建的提示層

 

6.添加修改說明:

 $.formValidator.reloadAutoTip();  //從新加載表單驗證樣式               if(!$.formValidator.pageIsValid('1')) return false;    //若是不經過則不提交

 

        $(document).ready(function () {            $.formValidator.initConfig({ formID: "form1", onError: function () { alert("校驗沒有經過,具體錯誤請看錯誤提示") } });            $("#name").formValidator({ onShow: "請輸入姓名!", onFocus: "輸入一個到十個字符", onCorrect: "輸入正確,謝謝您的合做!" }).inputValidator({ min: 1, max: 20, onError: "輸入長度,不對!" });            $("#timelong").formValidator({ onShow: "請輸入路演時長!", onFocus: "輸入格式爲正整數!", onCorrect: "輸入正確,謝謝您的合做!" }).regexValidator({ regExp:"intege1",dataType: "enum", onError: "您輸入的時長格式不正確!" });            $("#address").formValidator({ onShow: "請輸入路演平臺名稱!", onFocus: "輸入一個到五十個字符", onCorrect: "輸入正確,謝謝您的合做!" }).inputValidator({ min: 1, max: 50, onError: "輸入長度,不對!" });            $("#urladdress").formValidator({ onShow: "請輸入路演連接地址!", onFocus: "輸入格式:http://www.baidu.com", onCorrect: "輸入正確,謝謝您的合做!" }).regexValidator({ regExp:"^(http|https|ftp)\://([a-zA-Z0-9\.\-]+(\:[a-zA-Z0-9\.&%\$\-]+)*@)*((25[0-5]|2[0-4][0-9]|[0-1]{1}[0-9]{2}|[1-9]{1}[0-9]{1}|[1-9])\.(25[0-5]|2[0-4][0-9]|[0-1]{1}[0-9]{2}|[1-9]{1}[0-9]{1}|[1-9]|0)\.(25[0-5]|2[0-4][0-9]|[0-1]{1}[0-9]{2}|[1-9]{1}[0-9]{1}|[1-9]|0)\.(25[0-5]|2[0-4][0-9]|[0-1]{1}[0-9]{2}|[1-9]{1}[0-9]{1}|[0-9])|localhost|([a-zA-Z0-9\-]+\.)*[a-zA-Z0-9\-]+\.(com|edu|gov|int|mil|net|org|biz|arpa|info|name|pro|aero|coop|museum|[a-zA-Z]{2}))(\:[0-9]+)*(/($|[a-zA-Z0-9\.\,\?\'\\\+&%\$#\=~_\-]+))*$", onError: "輸入格式不正確!" });            $("#time").formValidator({ onCorrect: "格式正確" }).functionValidator({fun:isDateTime, onError: "輸入格式,不對!" });            $("#txtcontent").formValidator({ onShow: "請輸入專家簡介!", onFocus: "輸入一個到一百個字符", onCorrect: "輸入正確,謝謝您的合做!" }).inputValidator({ min: 1, max: 100, onError: "輸入長度,不對!" });        });

 ajax驗證用戶是否存在

js代碼 (html中必定要設置name值,不然動態是獲取不到值的)

View Code 

$("#userID").formValidator({ ajax:true,onShow: "請輸入帳號", onfocus: "最好以字母開頭,只能由字母數字組成 ,不能少於6個字符。", onCorrect: "用戶名可使用,請完善下面信息。" }).regexValidator({ regExp: "username", dataType: "enum", onError: "你輸入的格式不正確!" }).inputValidator({ min: 6, max: 16, onError: "輸入長度不正確!" })             .ajaxValidator({                 dataType: "text",                 async: true,                 url: "Tool/AddUser.ashx",                 success: function (data) {                     if (data == "0") { return true; }                     else if (data == "null") { return "注意:用戶名不能少於6個字符。"; }                     else if (data == "false") { return "該用戶名已被註冊,請更換用戶名。"; }                 },                 buttons: $("#button"),                 error: function (jqXHR, textStatus, errorThrown) { alert("服務器沒有返回數據,可能服務器忙,請重試" + errorThrown); },                 onError: "該用戶名不可用,請更換用戶名",                 onWait: "正在對用戶名進行合法性校驗,請稍候..."             }).defaultPassed();   //這裏添加defaultPassed()的話,則默認驗證經過。

通常處理程序代碼

View Code 

  public void ProcessRequest(HttpContext context)        {            context.Response.ContentType = "text/plain";            #region 判斷用戶是否被註冊過            string returnStr = "";            //這裏實際上是context.Request.QueryString根據name獲取的值 必定要設置空間的name值            if (context.Request["userName"] != null && context.Request["userName"].ToString().Length > 0)            {                if (isExist(context.Request["userName"].ToString()))                {                    returnStr = "false";                }                else                {                    returnStr = "0";                }                            }            else            {                returnStr = "null";            }            context.Response.Write(returnStr);            context.Response.End();            #endregion        }         #region 判斷用戶是否被註冊過        public bool isExist(string userName)        {            Snet.BLL.UserAccount bll = new BLL.UserAccount();            return bll.Exists(userName);        }        #endregion

 

國內另一款表單驗證jshttp://validform.rjboy.cn/

相關文章
相關標籤/搜索