当前位置主页 > 资料库 > 前端教程 > 浅谈HTML5表单验证技术

浅谈HTML5表单验证技术

2015-01-03

查看演示 下载地址

当你在网站中使用一个表单的时候,对某些字段进行验证是必须的。如果不这样做,有可能某些客户信息是错误的,还会在你的数据库中积累大量的垃圾数据,甚至会危害你的网站安全。表单验证已经成为大家的一个共识。在服务器端,我们可以通过程序很容易的控制它们,在客户端,我们通常是集成一些Javascript来实现客户端表单的验证。

现在,HMTL5给我们提供了一些特性来处理大多数你需要验证的字段。HTML5通过提供一些特殊属性、新的input类型来实现内置的表单验证支持,并且很容易通过CSS来控制它们的样式。

html5表单验证技术

下面来看一看HTML5表单验证的基本介绍。

1、新的input types类型

HTML5引进了不少新的input type类型。可以使用它们来创建结束制定data数据的input输入框。

下面是新的HTML5 type类型:

  • color
  • date
  • datetime
  • datetime-local
  • email
  • month
  • number
  • range
  • search
  • tel
  • time
  • url
  • week

可以像下面这样使用它们:

<input type="email"/>                                
                            

如果浏览器不支持该type类型,那么input就和普通的输入框一样。另外,一些input字段(例如:“email”和“tel”)可以自动打开移动手机的专门的键盘。

更多关于input types类型的细节,可以参考MDN wiki,点击这里查看

2、必填字段

通过简单的在<input><select><textarea>上添加“required”属性,可以将这些表单字段设置为必填字段。

<input type="checkbox" name="terms" required >                               
                            

这里有个问题,你可以在必填字段中随意填写任何数据,甚至是一个空格也可以,一会我们将教你如何解决这个问题。

当你在一个email字段或url字段中设置required,浏览器希望得到一个正确的email或url格式,但是,形如“z@zz”的电子邮件格式也会被认为是正确的。

3、范围限制

我们可以在number指定中设置一些限制条件如:max length 或 minimum、maximum等。要现在在input字段或textareas的文字长度,使用“maxlength”属性。如果你想通过粘贴一个长字符串来突破限制,表单将简单的进行字符串截断。

<input type="text" name="name" required  maxlength="15">                                
                            

<input type=”number”>字段使用“min”和“max”属性来创建一个范围。

<input type="number" name="age" min="18" required>                                
                            

4、样式

可以通过CSS3伪类来为表单的各种状态提供样式。

  • :valid
  • :invalid
  • :required
  • :optional
  • :in-range
  • :out-of-range
  • :read-only
  • :read-write

意思是说,你可以设置必填字段为一种样式,可选字段为另一种样式,等等...

在我们的DEMO中,我们通过“valid”和“invalid”选择器结合“focu”伪类来在用户使用该字段时将自动的颜色设置为红色或绿色。

input:focus:invalid,
textarea:focus:invalid{
    border:solid 2px #F5192F;
}

input:focus:valid,
textarea:focus:valid{
    border:solid 2px #18E109;
    background-color:#fff;
}                                
                            

5、工具提示(Tooltips)

当你没有正确填写表单而点击了提交按钮的时候,错误字段上会有一个提示出现。通过设置字段的“title”属性,我们可以在提示中显示一些额外的信息。

注意,不同的浏览器显示的提示样式是不同的。在Chrome浏览器中,title属性中的文字将出现在错误提示信息的下面,文字要小一号。在Firefox浏览器中不会显示你定制的title信息。

<input type="text" name="name" title="Please enter your user name.">                                 
                             

错误提示框和文本可以使用javascript很容易的改变,这些将在以后的教程中介绍。

模式(Patterns)

"pattern"属性可以让开发者设置一个正则表达式,浏览器将在表单提交前使用正则表达式来验证表单字段。这种验证方式显然要比data验证更灵活准确。

我们的DEMO中的email地址就是通过正则表达式来验证的。

<input type="email" name="email" required pattern="^\S+@\S+\.\S+$" title="example@mail.com">                                 
                             

教程就到这里,希望这篇教程能帮助你了解HTML5表单验证方面的知识。

查看演示 下载地址

Previous:
上一篇:如何使用CSS3创建3D文字效果
Next:
下一篇:使用6行javascript代码制作一个SVG模拟时钟
返回顶部