JavaScript验证



JavaScript表单验证

HTML表单验证可以通过JavaScript实现

如果一个表单字段(fname)是空的,这个函数通知消息,并返回false,防止表单提交:


function validateForm() {
    var x = document.forms["myForm"]["fname"].value;
    if (x == "") {
        alert("Name must be filled out");
        return false;
    }
}

当提交表单时,可以调用该函数:

<form name="myForm" action="demo_form.asp" onsubmit="return validateForm()" method="post">
Name: <input type="text" name="fname">
<input type="submit" value="Submit">
</form>

让我试试


JavaScript可以验证数字输入

JavaScript经常用来验证数字输入:

Please input a number between 1 and 10

让我试试

自动HTML表单验证

HTML表单验证可以通过浏览器自动执行:

如果一个表单字段(fname)是空的,required属性可以防止表单被提交

<form action="demo_form.php" method="post">
  <input type="text" name="fname" required>
  <input type="submit" value="Submit">
</form>

让我试试

自动HTML表单验证在Internet Explorer 9或更早的版本不工作。


数据验证

数据验证是确保用户输入干净、正确和有用的信息。

典型的验证任务有:

  • 用户是否填写所有必填字段?
  • 用户是否输入了有效日期?
  • 用户是否在数字字段中输入文本?

大多数情况下,数据验证的目的是确保用户输入正确.

验证可以由许多不同的方法定义,并以许多不同的方式部署.

服务器端验证 在输入已发送到服务器后,由web服务器执行。

客户端验证 在输入被发送到web服务器之前,由web浏览器执行。


HTML约束验证

HTML5 绍了一种新的HTML验证概念称为约束验证

HTML 约束验证基于以下几个方面:

  • 约束验证 HTML 输入属性
  • 约束验证 CSS 伪选择器
  • 约束验证 DOM 属性和方法

约束验证HTML输入属性

属性 描述
disabled 指定应禁用输入元素
max 指定输入元素的最大值
min 指定输入元素的最小值
pattern 指定输入元素的值模式
required 指定输入字段必须元素
type  指定输入元素的类型

完整的列表, 请参考 HTML Input 属性.


约束验证CSS伪选择器

选择器 描述
:disabled 选择指定的“disabled”属性的输入元素
:invalid 选择无效值的输入元素
:optional 选择没有指定"required"属性的输入元素
:required 选择指定"required"属性的输入元素
:valid 使用有效值选择输入元素

完整列表, 请参考 CSS 伪类.