js html form,JavaScript 表单
JavaScript 表單
JavaScript 表單驗(yàn)證
HTML 表單驗(yàn)證可以通過(guò) JavaScript 來(lái)完成。
以下實(shí)例代碼用于判斷表單字段(fname)值是否存在, 如果不存在,就彈出信息,阻止表單提交:
JavaScript 實(shí)例
functionvalidateForm(){varx=document.forms["myForm"]["fname"].value;if(x==null||x==""){alert("需要輸入名字。");returnfalse;}}
以上 JavaScript 代碼可以通過(guò) HTML 代碼來(lái)調(diào)用:
HTML 表單實(shí)例
名字:
嘗試一下 ?
JavaScript 驗(yàn)證輸入的數(shù)字
JavaScript 常用于對(duì)輸入數(shù)字的驗(yàn)證:
請(qǐng)輸入 1 到 10 之間的數(shù)字:
提交
嘗試一下 ?
HTML 表單自動(dòng)驗(yàn)證
HTML 表單驗(yàn)證也可以通過(guò)瀏覽器來(lái)自動(dòng)完成。
如果表單字段 (fname) 的值為空, required 屬性會(huì)阻止表單提交:
實(shí)例
嘗試一下 ?
Internet Explorer 9 及更早 IE 瀏覽器不支持表單自動(dòng)驗(yàn)證。
數(shù)據(jù)驗(yàn)證
數(shù)據(jù)驗(yàn)證用于確保用戶輸入的數(shù)據(jù)是有效的。
典型的數(shù)據(jù)驗(yàn)證有:
必需字段是否有輸入?
用戶是否輸入了合法的數(shù)據(jù)?
在數(shù)字字段是否輸入了文本?
大多數(shù)情況下,數(shù)據(jù)驗(yàn)證用于確保用戶正確輸入數(shù)據(jù)。
數(shù)據(jù)驗(yàn)證可以使用不同方法來(lái)定義,并通過(guò)多種方式來(lái)調(diào)用。
服務(wù)端數(shù)據(jù)驗(yàn)證是在數(shù)據(jù)提交到服務(wù)器上后再驗(yàn)證。
客戶端數(shù)據(jù)驗(yàn)證 side validation是在數(shù)據(jù)發(fā)送到服務(wù)器前,在瀏覽器上完成驗(yàn)證。
HTML 約束驗(yàn)證
HTML5 新增了 HTML 表單的驗(yàn)證方式:約束驗(yàn)證(constraint validation)。
約束驗(yàn)證是表單被提交時(shí)瀏覽器用來(lái)實(shí)現(xiàn)驗(yàn)證的一種算法。
HTML 約束驗(yàn)證基于:
HTML 輸入屬性
CSS 偽類(lèi)選擇器
DOM 屬性和方法
約束驗(yàn)證 HTML 輸入屬性
屬性
描述
disabled
規(guī)定輸入的元素不可用
max
規(guī)定輸入元素的最大值
min
規(guī)定輸入元素的最小值
pattern
規(guī)定輸入元素值的模式
required
規(guī)定輸入元素字段是必需的
type
規(guī)定輸入元素的類(lèi)型
約束驗(yàn)證 CSS 偽類(lèi)選擇器
選擇器
描述
:disabled
選取屬性為 "disabled" 屬性的 input 元素
:invalid
選取無(wú)效的 input 元素
:optional
選擇沒(méi)有"required"屬性的 input 元素
:required
選擇有"required"屬性的 input 元素
:valid
選取有效值的 input 元素
完整列表,請(qǐng)查看 CSS
偽類(lèi)。
總結(jié)
以上是生活随笔為你收集整理的js html form,JavaScript 表单的全部?jī)?nèi)容,希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇: image copy oracle,RM
- 下一篇: Php循环函数嵌套javascript,