?驗(yàn)證的常見方式

我們在寫前端的時(shí)候或多或少的會遇到一些驗(yàn)證格式問題，通常我們有三種解決辦法。

• 第一種就是在輸入完成后在輸入框附近驗(yàn)證給出提示
• 第二種就是在輸入完成后在提交的時(shí)候排著驗(yàn)證提示
• 第三張就是限制輸入

前面兩種我們都是非常的熟悉以及想到的，但是我們有時(shí)候想要的反而是第三種，因?yàn)檫@樣可以避免非法的輸入。第三張限制輸入不外乎就是實(shí)現(xiàn)輸入的實(shí)時(shí)監(jiān)聽，然后使用正則表達(dá)式來進(jìn)行對輸入的值驗(yàn)證，

驗(yàn)證通過就保留，驗(yàn)證不通過就刪除掉。當(dāng)然也并非一定這樣，有些也是可以實(shí)時(shí)監(jiān)聽后做提示的。看個(gè)人意愿。

主要是實(shí)現(xiàn)實(shí)時(shí)監(jiān)聽值事件

一般我們實(shí)現(xiàn)實(shí)時(shí)監(jiān)聽事件可以是onkeyup，oninput和onpropertychange。

?onkeyup

事件介紹：onkeyup事件是在輸?shù)臅r(shí)候在鍵盤松開的時(shí)候進(jìn)行觸發(fā)驗(yàn)證。

示例代碼：

onkeyup="value=value.replace(/[^\d|\.]/g,'')"

? ? ? ??

?oninput

事件介紹：oninput事件在用戶常識輸入時(shí)觸發(fā)，該事件類似于?onchange?事件。不同之處在于 oninput 事件在元素值發(fā)生變化是立即觸發(fā)， onchange 在元素失去焦點(diǎn)時(shí)觸。

示例代碼：

oninput="var ary = this.value.match(/(\d (\.\d{0,2})?)/);this.value=ary==null?'':ary[0];"

? ? ? ?

onpropertychange

事件介紹：onpropertychange事件可以說是ie瀏覽器的專屬了，不用考慮是否失去焦點(diǎn)，不管js操作還是鍵盤鼠標(biāo)手動操作，只要HTML元素屬性發(fā)生改變即可立即捕獲到：

示例代碼：

onpropertychange="var ary = this.value.match(/(\d (\.\d{0,2})?)/);this.value=ary==null?'':ary[0];"

?注：該事件為ie專屬，反正我在使用中是你要是ie9以上就不要使用他有時(shí)候會不好使，這樣你可以使用oninput，能不用最好別用。

補(bǔ)充方法說明：

• match：?match() 方法可在字符串內(nèi)檢索指定的值，或找到一個(gè)或多個(gè)正則表達(dá)式的匹配。類似于indexOf() 和 lastIndexOf()，但是他返回的是值不是位置。什么意思哪，通俗的講就是在給定的字符串內(nèi)找到和表達(dá)式匹配的值例如?math（“34”），然后我要匹配的字符串是：143474534634。然后通過匹配得到的就是一個(gè)數(shù)組：【“34”,“34”,“34”】，分別是字符串（143474534634）中的位置2和3，7和8,10和11.就是返回字符串中所有匹配的值然后返回給你。就是這個(gè)意思，當(dāng)然要返回多個(gè)匹配還是要在正則表達(dá)式后面加g標(biāo)志。
• replace（regexp/substr，replacement）：replace() 方法用于在字符串中用一些字符替換另一些字符，或替換一個(gè)與正則表達(dá)式匹配的子串。這個(gè)好理解，就是替換調(diào)驗(yàn)證不通過的字符串。替換內(nèi)容為第二個(gè)參數(shù)。

?平時(shí)記錄收藏的正則表達(dá)式：

?驗(yàn)證中文，數(shù)字，英文：/^[a-zA-Z0-9\u4E00-\u9FA5] $/

?驗(yàn)證只運(yùn)行輸入字母或者數(shù)字：/^[0-9a-zA-Z] $/

?驗(yàn)證數(shù)字：/^[ |-]{0,1}(\d )$|^[ |-]{0,1}(\d \.\d )$/

?驗(yàn)證郵政編碼：/^[1-9]\d{5}$/i

?驗(yàn)證年齡：/^(?:[1-9][0-9]?|1[01][0-9]|120)$/i

只能輸入正整數(shù)數(shù)字：/[^\d|\.]/g

只能輸入包含兩位小數(shù)的正整數(shù)數(shù)字：/(\d (\.\d{0,2})?)/

驗(yàn)證數(shù)字包含正負(fù)小數(shù)：/[^\ |\-|\d|\.]/g

驗(yàn)證不可為空：/\s /g

?

更多專業(yè)前端知識，請上 【猿2048】www.mk2048.com

總結(jié)

以上是生活随笔為你收集整理的关于html以及js相关格式验证的记录的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。