JavaScript 表单
一、JavaScript 表单验证
HTML 表单验证可经过 JavaScript 来完成。
假如某个表单字段(fname)的值是否空值,如果是空值,就会弹出一条信息:
JavaScript 示例代码
function validateForm() {
var x = document.forms["myForm"]["fname"].value;
if (x == null || x == "") {
alert("输入你的名字。");
return false;
}
}
以上 JavaScript 代码能够经过 HTML 在表单提交时被调用:
HTML 表单示例代码
名称:
演示一下二、JavaScript 验证输入数字
JavaScript 通常用于对输入的数字验证:
请输入 1 到 10 之间的数字: 提交演示一下
三、HTML 自动验证表单
HTML 表单验证也能够经过浏览器来自动完成。
假如表单字段(fname)是空值,required 属性会制止表单提交:
示例代码
演示一下HTML 表单自动验证 Internet Explorer 9 、IE 的浏览器和之前老版本不支持表单自动验证。四、数据验证
数据验证指的是确保正确和用户输入的是否正确。
典型的有效数据验证:确认字段是没有输入?
确认用户是否输入了有效格式?
确认在数字字段是否输入了文本?
在无数环境下,数据验证的用途是确保精确的用户输入。
数据验证能够运用不同办法来定义,并经过多种方发来调用。
服务端验证是由web服务器执行的数据提交到服务器上后再验证。
客户端验证是由 web 浏览器执行输入的 web 服务器传送之前。
五、HTML 约束验证
HTML5 新增加了 HTML 表单的验证概念:约束验证为(constraint validation)。
HTML 约束验证基于:基于 HTML 输入属性
基于 CSS 伪类选择器
基于 DOM 属性和方法
六、约束验证 HTML 输入属性属性描述
disabled划定输入的元素不能用
max划定输入元素的非常大值
min划定输入元素的非常最小值
pattern划定输入元素值形式
required划定输入元素字段是必要的
type划定输入元素类型
查看完整列表,详情查看 HTML 输入属性。
七、约束验证 CSS 伪类选择器选择器描述
:disabled选定属性为 "disabled" 属性的 input 元素
:invalid选定值无效的 input 元素
:optional选定未配置"required"属性的 input 元素
:required选定配置有"required"属性的 input 元素
:valid选定有效值 input 元素
查看完整列表,详情查看 CSS 伪类
相关文章