java表单验证_JavaScript 表单 约束验证 HTML 输入属性

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 伪类

相关文章