表格验证
HTML5添加了一些允许表单验证的属性。例如,require 属性可以添加到输入字段,以使其强制填写。
更复杂的表单验证可以使用JavaScript来完成。
表单元素具有可以处理以执行验证的 onsubmit 事件。
例如,我们创建一个带有两个输入框和一个按钮的窗体。两个字段中的文本应该相同,不能为空,才可通过验证。
1 2 3 4 5 6 7 | <form onsubmit= "return validate()" method= "post" >
Number: <input type= "text" name= "num1" id= "num1" />
<br />
Repeat: <input type= "text" name= "num2" id= "num2" />
<br />
<input type= "submit" value= "Submit" />
</form>
|
现在我们需要定义 validate() 函数:
1 2 3 4 5 6 7 8 9 10 11 | function validate() {
var n1 = document.getElementById( "num1" );
var n2 = document.getElementById( "num2" );
if (n1.value != "" && n2.value != "" ) {
if (n1.value == n2.value) {
return true ;
}
}
alert( "输入两个值不相等,请重新输入!" );
return false ;
}
|
只有当值不为空且相等时才返回 true 。
提示: 如果其 onsubmit 事件返回 false,表单将不会被提交。