對於HTML5表單錯誤消息，瀏覽器的行爲不同

我已創建登錄頁面。它有一個帶有用戶名和密碼字段的表單。用戶名應該是一個帶有電子郵件的文本字段，並且密碼將是一個需要滿足正則表達式模式的帶有類型密碼的文本字段。對於HTML5表單錯誤消息，瀏覽器的行爲不同

一切都按預期工作。我面臨的問題是，當用戶輸入無效的用戶名時，錯誤消息在不同的瀏覽器中以不同方式顯示，如下所示。

的Internet Explorer

谷歌瀏覽器

Mozilla Firefox瀏覽器

這是完全依賴瀏覽器行爲處理HTML5的方式嗎？是否有可能在不編寫大量代碼的情況下爲錯誤消息設計一個通用的設計。

在此先感謝

來源

2016-12-13 Shareer

根據經驗我可以告訴你，每個瀏覽器都有它自己的錯誤消息，但我不知道你是否可以重寫他們的消息。 – Tapaka

這取決於瀏覽器。如果你想在通用設計中顯示，你需要使用角度表單驗證ttps：//docs.angularjs.org/guide/forms（如果你使用的是angularjs）或者使用第三方表單驗證插件。 –

保證通用設計的唯一方法是自己實現驗證。但我必須問，這是否真的有問題？大多數人使用和堅持一個瀏覽器，他們會習慣看本地錯誤信息。 – Ankh

我認爲你不能修改默認行爲，但你可以使用角度驗證了點。

事情是這樣的：

<form name="signUpForm"> 
      <div> 
       <input name="email" type="email" required autocomplete="off" ng-model="formData.Email" /> 
       <div class="error-message" ng-show="signUpForm.email.$error.required">UserName is required</div> 
       <div class="error-message" ng-show="signUpForm.email.$error.email">Not Valid Email</div> 
      </div> 
     </form>

然後，您可以根據需要自定義錯誤消息類。爲了僅在發佈表單時才顯示消息，需要進行一些修改，但是您可以明白。

看到這一點：Angular Forms

這個：Angular Forms Validation

獲取更多信息。

來源

2016-12-13 09:56:22

對於HTML5表單錯誤消息，瀏覽器的行爲不同

回答

相關問題