html5表單的required屬性使用
我要評論描述
今天無意之中發(fā)現(xiàn)form有自帶非空判斷功能,查了資料發(fā)現(xiàn),required 屬性是 HTML5 中的新屬性
定義和用法
required 屬性是一個布爾屬性
required 屬性規(guī)定必需在提交之前填寫輸入字段。
如果使用該屬性，則字段是必填（或必選）的。
注釋：required 屬性適用于以下 類型：text, search, url, telephone, email, password, date pickers, number, checkbox, radio 以及 file。
語法使用
<input required="required">
<form method="post" action="">
用戶名<input type="text" id="username" required="required"><br>
密碼<input type="password" id="password" required><br>
<input type="submit" value="登錄" >
</form>
注意:
1:required和required="required"效果是一樣的,只不過前者是簡寫
2:必須要用form標簽把代碼包裹起來才有效
3:點擊的按鈕必須要是submit類型,類型為button無效
效果
就是一個簡單的提示要輸入改文本框
如何自定義提示文字
用戶名<input type="text" id="username" required oninvalid="setCustomValidity('請輸入您的姓名');" oninput="setCustomValidity('');">
如何讓required失效
1:把按鈕類型變成button而不是submit
2:提交按鈕添加formnovalidate屬性
<form method="post" action=""> 用戶名<input type="text" id="username" required="required"><br> 密碼<input type="password" id="password" required><br> <input type="submit" value="登錄" formnovalidate > </form>
3:在元素中添加novalidate屬性，禁用整個表單的驗證功能
<form method="post" action="" novalidate> 用戶名<input type="text" id="username" required="required"><br> 密碼<input type="password" id="password" required><br> <input type="submit" value="登錄" > </form>
4，pattern屬性 - 使用正則表達式驗證
（1）不必使用^和$字符表示要匹配字段值得開頭和結尾。
（2）只設置pattern的話，空值也會通過。如果不允許空，則還要加上required屬性。
到此這篇關于html5表單的required屬性使用的文章就介紹到這了,更多相關html5表單required屬性內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持腳本之家！
相關文章
wordpress添加Html5的表單驗證required方法小結
這篇文章主要介紹了wordpress添加Html5的表單驗證required方法小結,本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參2020-08-18html5的input的required使用中遇到的問題及解決方法
這篇文章主要介紹了h5的input的required使用中遇到的問題及解決方法，文中給大家介紹的非常詳細，具有參考借鑒價值，需要的朋友參考下吧2018-04-24html5中valid、invalid、required的定義
HTML5的出現(xiàn)為我們提供一些屬性，不用編寫js和正則即可解決這個檢驗表單內容，下面為大家介紹下valid、invalid、required的定義2014-02-21
