使用正則表達式構造定製的HTML5輸入框

時間 2019-11-06

原文原文鏈接

正則表達式（點此在線編輯測試）是一個功能強大的靈活而簡潔的匹配文本字符串的工具，好比匹配特定的字符、單詞等。正則表達式經過一個語言規則來書寫，經過正則表達式處理器來處理。維基百科有詳細解釋，這裏再也不贅述。維基百科：http://en.wikipedia.org/wiki/Regular_expression 。HTML5容許經過正則表達式的方式檢測用戶輸入。javascript

瞭解一下：

在HTML4中，你須要經過Javascript來實現這個功能。下面是代碼：css

<input type="text" name="ssn" onblur="if (!^\d{3}-\d{2}-\d{4}$this.value) alert(this.title+'\nAn error occurred. Please verify your data.');" title="The Social Security Number"/>

當輸入框的onblur事件觸發的時候，一段javascript代碼執行了，他控制了輸入的匹配規則，若是輸入不匹配他也提供了一段錯誤提示消息。可是在HTML5中，input標籤增長了一個屬性容許你經過正則表達式來驗證輸入，使用起來很是簡單。廢話很少述看代碼。html

<input type="text" name="ssn" pattern="(!^\d{3}-\d{2}-\d{4}$"

pattern屬性中的值指定了輸入的內容必須符合javascript規則的正則表達式。（這裏有詳細描述，http://www.ecma-international.org/publications/files/ECMA-ST/ECMA-262.pdf ）注：符合條件的JavaScript模式意味着用於此屬性的正則表達式語言跟Javascript中正則表達式的語言是相同的。（這就是爲何在表達式的開頭有一個 ^(?: 在結尾有個 )$ 。），若是想爲用戶提供輸入提示的話，可使用title屬性。html5

<input type="text" name="ssn" pattern="(!^\d{3}-\d{2}-\d{4}$" title="The Social Security Number" />

怎麼構建

在下面的文章中咱們使用正則表達式來驗證美國郵編：java

這裏有完整代碼（將正則表達式插入到文本輸入框的屬性中）git

在線演示： http://www.osctools.net/jsbin/biyqiyqi/1/edit#html,live github

<!DOCTYPE html> <html> <head> <title> </title> </head> <body> <form id="myForm"> <fieldset> <legend>Solution 4-8: Creating custom input types using regular expressions</legend> <label> Insert a valid American Zip code: <input type="text" name="ssn" pattern="(\d{5}([\-]\d{4})?)" title="Zip Code" /> </label> <p><input type="submit" value="Check Zip code" /> </p> </fieldset> </form> </body> </html>

當你將上述代碼放在瀏覽器中執行的時候，例如在Opera中（支持pattern屬性），單擊表單的提交按鈕。瀏覽器會控制輸入框中的輸入符合要匹配指定的正則表達式，若是驗證失敗將會返回一個錯誤消息。web

提示：

並非全部瀏覽器都支持這個強大的正則表達式屬性，幸運的是咱們能夠找到一些庫來填補這個空缺：你可經過以下網址https://github.com/westonruter/webforms2 Google's Web Forms 2。這個項目就像他網站上描述的同樣是一個跨瀏覽器的Form2.0的規範的實現。當頁面加載的時候若是瀏覽器不支持HTML5的某些功能，例如pattern屬性，而這個庫恰好有這個的實現的話，這個庫會幫你搞定。你能夠經過以下方式導入這個庫：正則表達式

<script type="text/javascript" src="YOUR_FOLDER/webforms2_src.js"></script>

不管你是使用webforms2.js或者webforms2p.js你都須要保證webforms2.css和webforms2-msie.js位於同一個目錄。express

OSChina.NET原創翻譯/原文連接

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。