成都百度快照优化|成都百度关键词排名优化|成都SEO【思为网络】 --【思为网络】成都专业网站优化公司,公司拥有专业搜索引擎优化团队,提供网站整站优化(网站结构优化、网站内容优化、网站外部优化)、百度排名首页优化、GOOGLE优化排名
成都百度关键词排名优化--成都百度快照首页排名优化
你的位置:首页 » 网页设计制作 » 正文

网页设计中灵活使用HTML5表单验证技术

2016-6-16 23:57:50 | 作者:sw996 | 0个评论 | 人浏览

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


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

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

 

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

1、新的INPUT TYPES类型

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

下面是新的HTML5 type类型:

  1.  color

  2. date

  3. datetime

  4. datetime-local

  5. email

  6.  month

  7. number

  8. range

  9.  search

  10. tel

  11.  time

  12. url

  13. 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伪类来为表单的各种状态提供样式。

o :valid

o :invalid

o :required

o :optional

o :in-range

o :out-of-range

o :read-only

o :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表单验证方面的知识。


已有0位网友发表了一针见血的评论,你还等什么?

必填

选填

选填

记住我,下次回复时不用重新输入个人信息

必填,不填不让过哦,嘻嘻。

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。