來吧,讓狗日的驗證來的更猛烈些吧!

2022-01-28 20:04:40 字數 3885 閱讀 5348

你是否被頁面上這樣的驗證煩死:

function checkform()
又或者你已經封裝了js庫,又或者你在用一些js驗證外掛程式,但是還是得不停的一遍一遍寫著正則,提示資訊,等待返回結果.恩,我跟你一樣,也煩透了!於是,我便做了個毛坯,到今天,把這個毛坯蓋成了個茅草屋。好吧,來看看驗證要做些什麼工作吧。

step 1:引入js檔案和css檔案

step 2:拖入乙個驗證控制項 選擇驗證型別,能否為空,提示資訊等自己所需要的東西,這個例子中,我只選擇了驗證型別為郵箱,然後預設的允許為空改成了no,不允許為空,其餘都使用預設設定,

step 3:開始吧

3.1: 這時候,滑鼠hover上文字框的時候,右邊出現了預設的提示,當然,有時候根據布局,你也可以調整tip的方向,忘了說了,頁面上還放了個提交按鈕,給它新增了乙個客戶端事件

3.2: 點選提交按鈕,頁面無變化,驗證不通過

3.3: 輸入不匹配的字元,當文字框失去焦點的時候,提示驗證沒通過

3.4:輸入格式正確,ok

恩,其實驗證我們就選了兩下,驗證就搞定了,我覺得蠻好,你覺得呢?

其實文字框的完成,基本的驗證已經可以了,但是還有諸多的控制項radio,radiobuttonlist,check,checkboxlist,select... 去他大爺的.ok,罵了它我也心裡爽多了,繼續吧:

看下源**,什麼都知道了,textbox通過瀏覽器檢視到的html**是:

<

input

type

="text"

canempty

="no"

tip="請輸入正確的郵箱位址格式"

reg="^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$"

id="tctextbox1"

name

="tctextbox1"

gtbfieldid

="19"

class

="verifyfailure"

>

select,checkboxlist,checkbox的html**是:

<

select

reg="0"

tip="請選者乙個"

id="dropdownlist1"

name

="dropdownlist1"

gtbfieldid

="20"

class

="verifyfailure"

>

<

option

value

=""selected

="selected"

>

option

>

<

option

value

="aaaaaaa"

>

aaaaaaa

option

>

<

option

value

="bbbbbbb"

>

bbbbbbb

option

>

<

option

value

="cvvvvvv"

>

cvvvvvv

option

>

select

>

<

table

border

="0"

reg="0"

tip="請選者3個"

id="checkboxlist1"

original-title

=""class

="verifyfailure"

>

<

tbody

><

tr>

<

td><

input

type

="checkbox"

name

="checkboxlist1$0"

id="checkboxlist1_0"

><

label

for="checkboxlist1_0"

>

aaaa

label

>

td><

td><

input

type

="checkbox"

name

="checkboxlist1$1"

id="checkboxlist1_1"

><

label

for="checkboxlist1_1"

>

bbblabel

>

td><

td><

input

type

="checkbox"

name

="checkboxlist1$2"

id="checkboxlist1_2"

><

label

for="checkboxlist1_2"

>

ccclabel

>

td>

tr>

tbody

>

table

>

<

span

reg="0"

tip="請選者"

class

="verifyfailure"

><

input

type

="radio"

value

="radiobutton1"

name

="radiobutton1"

id="radiobutton1"

>

span

>

恩,擴充套件textbox控制項,新增了自定義屬性reg 正規表示式,tip 提示資訊,canempty 能否為空,然後用js進行正則驗證,通過驗證的結果來新增 刪除css,這裡要注意的是,checkbox,radio生成出來的**多了乙個span標籤,checkboxlist,radiobuttonlist生成出來之後多了table標籤,在js檔案中,我把它們的驗證和文字框的驗證分開了,獨立了乙個checkaspnetradiocheckbox方法來進行驗證。本來可以擴充套件這些控制項來新增標籤,但是我覺得驗證控制項一多,對程式設計師反而是不好的事,找還找半天。權衡一下,還是用醜陋的方法實現比較划得來。

tip使用的是乙個jquery外掛程式,tipsy,有興趣的同志可以去研究一下。

其實要做的還有很多:組驗證,2個文字框值比較,ajax驗證,想到不常用,所以沒必要加上,不能把功能越做越多,使得使用更複雜,而且js功力不深,功能越多只能使**越亂,這些需求還是靠自己的雙手來完成吧 - -!

恩,總體來說沒有什麼技術含量,純體力活,發出來是希望,1.為不知道的朋友提供乙個思路 2.希望大家能幫助指點,讓這個東東能更好用,說實在的,如果開發中小型專案,用起來還是挺爽的。3.在大家的幫助下,自己的能力也同時得到提高。恩,晚安大夥,明天見。關於服務端的驗證可以看我這篇文章:commonlibrary之validation,我希望在後面做的**生成器中,能把2種驗證給結合起來。

讓暴風雨來的更猛烈些吧!

羽泉的一首非主流歌曲,歌詞很現實也很無奈,就像我們的人生,很喜歡。到這裡試聽 這首歌讓我們談談自己 不帶一點虛榮心 撕掉皇帝身上穿的華麗新衣 說出真相不怕樹敵 袁濤是老闆也是十年的兄弟 我們現 在只剩互體諒的默契 蘇文捷不賣唱片改賣了彩鈴 sp的報表確是不能說的秘密 翟佳天天在想著那炒作的話題 幾千...

讓自由軟體的風暴來的更猛烈吧!

9月20 日,這一天全球自由軟體志願者走上街頭,向社會公眾宣講自由軟體,宣傳智財權保護的意識 注,智財權保護不代表只涉及商業軟體,也包括自由軟體 正因為自由軟體作者沒有完全放棄自己的智財權,所以,他們才有資格宣稱自己的軟體作品必須遵守 gpl 或是某種自由軟體 規則。今年8月 13日,美國最高上訴法...

彈性公升級訣竅分享 讓雙11來的更猛烈些吧

全面賦能,雙11電商解決方案上新,全新75折 9月23日由阿里雲主辦的第二期 電商大咖直播 備戰雙11最佳實踐 線上分享圓滿結束,來自 管家的ceo劉義分享了彈性公升級在電商大促中的應用。1.雙11銷量是平時的5倍以上,資源緊張 it系統資源 人力資源 所以我們應該做到充分預估資源,尋找現有系統存在...