二十五岁时我们都一样愚蠢、多愁善感,喜欢故弄玄虚,可如果不那样的话,五十岁时也就不会如此明智。
标题: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 伪类.