浅谈HTML5表单验证技术

查看演示 下载地址

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

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

下面来看一看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表单验证方面的知识。

查看演示 下载地址