今天來為大家介紹個(gè)有關(guān)于：“如何使用html5表單中的required屬性？”這方面的相關(guān)問題，希望對(duì)于剛?cè)腴T的小伙伴們有所幫助！
描述
今天無意之中發(fā)現(xiàn)form有自帶非空判斷功能,查了資料發(fā)現(xiàn),required 屬性是 HTML5 中的新屬性
定義和用法
required 屬性是一個(gè)布爾屬性
required 屬性規(guī)定必需在提交之前填寫輸入字段。
如果使用該屬性，則字段是必填（或必選）的。
注釋：required 屬性適用于以下 類型：text, search, url, telephone, email, password, date pickers, number, checkbox, radio 以及 file。
語(yǔ)法使用
<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"效果是一樣的,只不過前者是簡(jiǎn)寫
2:必須要用form標(biāo)簽把代碼包裹起來才有效
3:點(diǎn)擊的按鈕必須要是submit類型,類型為button無效
效果
就是一個(gè)簡(jiǎn)單的提示要輸入改文本框
如何自定義提示文字
用戶名
<input type="text" id="username" required oninvalid="setCustomValidity('請(qǐng)輸入您的姓名');" 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屬性，禁用整個(gè)表單的驗(yàn)證功能。
<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屬性 - 使用正則表達(dá)式驗(yàn)證
（1）不必使用^和$字符表示要匹配字段值得開頭和結(jié)尾。
（2）只設(shè)置pattern的話，空值也會(huì)通過。如果不允許空，則還要加上required屬性。
到這邊我們今天有關(guān)于：“如何使用html5表單中的required屬性？ ”這方面的相關(guān)內(nèi)容分享就到這里了！更多有關(guān)于html5這方面的使用和學(xué)習(xí)內(nèi)容我們都可以在W3Cschool中進(jìn)行學(xué)習(xí)！
