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经常用来验证数字输入：

自动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输入属性

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

约束验证CSS伪选择器

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