前面已经了解过HTML5针对表单新增的一个form属性,随着后面的深入了解,大家会发现HTML5在表单这块的改善是多么令人兴奋。大家都知道,表单是用来收集网站客户群信息的,那么为了提高信息的有效性,我们需要在前端就做一些基本的判断,比如说必填项,咱不能说收集到的信息该有的没有,却只收集到一些附填项吧。而之前做这样的判断都是需要用JS来实现的,现在好了,HMTL5一个简单的属性就做到啦。今天咱就先来看几个实现表单基本验证的新属性:

1、 required 。该属性用于大多数的输入元素(除了隐藏元素、图片元素按钮等)。用法:

required type=”text”/>

顾名思义,required属性表示此输入框是必填项,提交表单的时候,若此输入框为空,那么将提示用户输入后提交。如图:
2、 pattern。先看用法:

该属性的值一般为正则表达式,当用户输入的内容符合一定的格式,才能提交成功,否则将提示用户匹配相应格式,上面的“d{8}”表示必须输入8位数字。我只输入7位,看看结果:

3、minmax。很显然这两个属性是与数字相关类型的输入框专用的,它可以用来限制数值或日期范围,属性值显然是数字了。如限定一个大于8小于11的输入范围写法为:

4、step。该属性控制输入框的值增加或减少的步幅,举个例子来看看具体用法:比如想让用户输入的值在0-20之间,并且要是是4的倍数,那么就这么写:

针对后面两个属性,火狐表示不再支持,不过大家可以在谷歌和Opera里看到效果,我用谷歌的故意输入错误信息的效果分别如下: