?驗證的常見方式

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

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

前面兩種我們都是非常的熟悉以及想到的，但是我們有時候想要的反而是第三種，因為這樣可以避免非法的輸入。第三張限制輸入不外乎就是實現輸入的實時監聽，然后使用正則表達式來進行對輸入的值驗證，

驗證通過就保留，驗證不通過就刪除掉。當然也并非一定這樣，有些也是可以實時監聽后做提示的。看個人意愿。

主要是實現實時監聽值事件

一般我們實現實時監聽事件可以是onkeyup，oninput和onpropertychange。

?onkeyup

事件介紹：onkeyup事件是在輸的時候在鍵盤松開的時候進行觸發驗證。

示例代碼：

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

? ? ? ??

?oninput

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

示例代碼：

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

? ? ? ?

onpropertychange

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

示例代碼：

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

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

補充方法說明：

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

?平時記錄收藏的正則表達式：

?驗證中文，數字，英文：/^[a-zA-Z0-9\u4E00-\u9FA5] $/

?驗證只運行輸入字母或者數字：/^[0-9a-zA-Z] $/

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

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

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

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

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

驗證數字包含正負小數：/[^\ |\-|\d|\.]/g

驗證不可為空：/\s /g

?

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

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。