HTML5驗證 - 簡單的方法來實時驗證？

我正在使用HTML5進行用戶驗證。這裏是我的代碼片段：HTML5驗證 - 簡單的方法來實時驗證？

<input type="text" name="name" id="usernametb" title="Minimum 8 Characters, only letters 
and numbers" pattern="^[A-Za-z0-9]{8,40}$" placeholder="Enter a Valid UserName" required />

我想爲用戶，因爲他們鍵入這並不符合驗證模式或當他們標籤到下一個字段用戶名得到一個錯誤信息或者儘快。有沒有一種簡單的方法可以用HTML5做到這一點。

現在，錯誤消息不會顯示，直到我點擊「提交」並強制回發。

來源

2013-07-15 andy_coder

使用javascript，例如'onkeyup =「validateUsername（this.value）」'。 –

這是jQuery的html5驗證插件：http://ericleads.com/h5validate/。從插件網站

報價：

最佳實踐實時jQuery的HTML5表單驗證。適用於所有流行的瀏覽器，包括IE6等舊版瀏覽器。

如果你想使用自己的javascript，使用類似：

onkeyup="validateUsername(this)"

＆hellip;因此，例如：

<input type="text" name="name" id="usernametb" title="Minimum 8 Characters, only letters and numbers" pattern="^[A-Za-z0-9]{8,40}$" placeholder="Enter a Valid UserName" onkeyup="validateUsername(this)" required />

也看看這個：http://livevalidation.com/

快樂編碼！

來源

2013-07-15 21:55:17

我實際上能夠使用HTML5和CSS（在現代瀏覽器中工作）獲得實時客戶端驗證。有關詳細信息，請閱讀此文章：http://www.the-art-of-web.com/html/html5-form-validation/#.UeWC0o2G3-t –

我有好的經驗與parsley.js庫：

http://parsleyjs.org/

而且對其它輸入類型（如電話，電子郵件，網址），HTML5可以自己驗證，將無法修復的例子你有，但它是非常強大的，當它適合時，一個瘋狂的輕量級工具。

如：

<input type="tel" name="cellPhone"></input>

祝你好運！

來源

2013-07-22 22:15:57

HTML5驗證 - 簡單的方法來實時驗證？

回答

相關問題