一.使用校验属性执行校验
HTML5为表单控件新增了如下几个校验属性
required:该属性指定该表单控件必须填写。该属性值必须是required或完全省略属性值。
pattern:该属性指定该表单控件的值必须符合指定了正则表达式。该属性的值必须是一个合法的正则表达式。
min、max、step:这3个属性只对数值类型、日期类型的﹤input.../﹥元素有效,这3个属性控制该表单控件的值必须在min~max之间,并符合step步长。
使用上面这几个属性可以非常方便的完成客户点校验。
二.调用check Validity方法进行校验
前面介绍的通过校验属性执行的输入校验简单、易用,但略显 “呆板”,如果开发者想使用对话框来弹出错误提示,或者有其他校验要求,则可借助于 HTML 5为表单、表单控件提供的 check Validity()方法进行校验。
如果表单对象调用 checkValidity()方法返回 true,则表明该表单内的所有表单控件都有效。只要有任意一个表单控件不能通过输入校验,表单对象的 checkValidity()
方法就会返回 false。
如果表单对象调用 checkValidity()方法返回 true,则表明该表单控件可以通过输入校验;否则返回 false。
三.自定义错误提示
在默认情况下,HTML 5 要求浏览器为每个校验规则都提供相应的错误提示,这些错误提示信息是固定的。但在有些情况下,如果我们希望 “定制” 自己的错误提示信息,而不是显示默认的提示信息,则可以借助于 HTML 5 为表单控件新增的 setCustomValidity( )方法来实现,该方法接受一个字符串参数,该字符串将会作为用户 “自定义” 的错误提示。
需要指出的是,只要调用了某个表单控件的 setCustomValidity( )方法,就意味着该表单控件没有通过输入校验。因此只有当表单控件本身没有通过输入校验时才能调用该方法,而不是“不问青红皂白”地直接调用该方法来改交错误提示;否则可能导致本来可以通过输入校验的表单控件也变成不能通过输入校验了。
四.关闭校验
在某些时候,如果希望暂时关闭HTML5对表单控件的输入校验,则可通过如下两种方式来实现
为﹤form.../﹥元素增加 novalidate 属性,该属性的值要么是novalidate,要么省略属性值。
为 type="submit”的﹤input.../﹥或﹤button.../﹥元素设置 formnovalidate 属性,该属性的值要么是novalidate,要么省略属性值。
第一种方式将会直接关闭表单的输入校验功能,无论通过哪个按钮提交该表单,该表单
都不会执行输入校验;第二种方式则由指定的提交按钮来关闭表单的输入校验,只有当用户
通过指定了 formnovalidate 属性的按钮提交表单时才会关闭表单的输入校验。