JavaScript 表单 -HTML教程 -css5.net


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 表单示例代码

<form name="myForm" action="pkdemo_form.php" onsubmit="return validateForm()" method="post">

名称: <input type="text" name="fname">

<input type="submit" value="确认提交">

</form>


演示一下

二、JavaScript 验证输入数字

JavaScript 通常用于对输入的数字验证:

请输入 1 到 10 之间的数字:



演示一下

三、HTML 自动验证表单

HTML 表单验证也能够经过浏览器来自动完成。

假如表单字段(fname)是空值,required 属性会制止表单提交:

示例代码

<form action="pkdemo_form.php" method="post">

 <input type="text" name="fname" required="required">

 <input type="submit" value="确认提交">

</form>


演示一下

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


八、相关参考文章

Bootstrap 布局组件:Bootstrap 标签

Copyright © 2017 CSS5.NET教程.CSS5 内容仅用于学习和测试参考。 css5.net All Rights Reserved