武林網(www.vevb.com)文章簡介:HTML5教程:Form表單自動驗證.
1、required屬性:
<form>
<input id=webjx_required name=webjx.com required type=text/>
<input type=submit value=提交/>
</form>
required屬性可以用用在大多數的輸入元素上(除了隱藏元素、圖片元素按鈕上等)。
required屬性表示此輸入框是必填項,當提交的時候,如果此輸入框為空,那麼將提示用戶輸入後提交。
<form>
<input id=webjx_required name=webjx.com required type=text/>
<input type=submit value=提交/>
< /form>
2、pattern屬性:
<form>
<input id=webjx_pattern name=webjx.com required pattern=/d{3} type=text/>
<input type=submit value=提交/>
</form>
pattern屬性的值一般為正則表達式,當用戶輸入的內容符合一定的格式,那麼才能提交,否則將提示用戶不符合要求,如上所示必須輸入3位數字。
立即運行:
< form>
<input id=webjx_pattern name=webjx.com required pattern=/d{3} type=text/>
<input type=submit value=提交/>
< /form>
3、min屬性和max屬性:
<form>
<input id=webjx_min_max name=webjx.com required min=3 max=16 type=number/>
<input type=submit value=提交/>
</form>
min和max這兩個屬性是數值類型或日起類型的input元素的專有屬性,他限制了input元素中輸入的數值和日期範圍。屬性值為數字。
立即運行:
< form>
<input id=webjx_min_max name=webjx.com required min=3 max=16 type=number/>
<input type=submit value=提交/>
< /form>
4、step屬性:
<form>
<input id=webjx_step name=webjx.com required step=10 min=0 max=100 type=number/>
<input type=submit value=提交/>
</form>
step屬性控制input元素的值增加或減少的步幅,例如你想讓用戶輸入得值在0-100之間,但是必須是10的倍數時,則如上代碼所示,點擊下方運行看效果。
立即運行:
< form>
<input id=webjx_step name=webjx.com required step=10 min=0 max=100 type=number/>
<input type=submit value=提交/>
< /form>