HTML5表单之自动验证属性

前面已经了解过HTML5针对表单新增的一个form属性,随着后面的深入了解,大家会发现HTML5在表单这块的改善是多么令人兴奋。大家都知道,表单是用来收集网站客户群信息的,那么为了提高信息的有效性,我们需要在前端就做一些基本的判断,比如说必填项,咱不能说收集到的信息该有的没有,却只收集到一些附填项吧。而之前做这样的判断都是需要用JS来实现的,现在好了,HMTL5一个简单的属性就做到啦。今天咱就先来看几个实现表单基本验证的新属性:
1、 required 。该属性用于大多数的输入元素(除了隐藏元素、图片元素按钮等)。用法:
<form>
<input name="http://www.ccjk.com" required type="text"/>
<input value="提交"/>
</form>
顾名思义,required属性表示此输入框是必填项,提交表单的时候,若此输入框为空,那么将提示用户输入后提交。如图:
 
2、 pattern。先看用法:
<form>
<input id="CCJK.com_pattern" required pattern="d{8}"/>
<input type="submit" value="提交"/>
</form>
该属性的值一般为正则表达式,当用户输入的内容符合一定的格式,才能提交成功,否则将提示用户匹配相应格式,上面的“d{8}”表示必须输入8位数字。我只输入7位,看看结果:
3、minmax。很显然这两个属性是与数字相关类型的输入框专用的,它可以用来限制数值或日期范围,属性值显然是数字了。如限定一个大于8小于11的输入范围写法为:
<form>
<input id="CCJK.com_min_max" required min="8" max="11"/>
<input type="submit" value="提交"/>
</form>
4、step。该属性控制输入框的值增加或减少的步幅,举个例子来看看具体用法:比如想让用户输入的值在0-20之间,并且要是是4的倍数,那么就这么写:
<form>
<input id="CCJK.com_step" required step="4" min="0" max="20"/>
<input type="submit" value="提交"/>
</form>
针对后面两个属性,火狐表示不再支持,不过大家可以在谷歌和Opera里看到效果,我用谷歌的故意输入错误信息的效果分别如下:

Need a translation service?

Please enter your personal details and we will contact you shortly

Words translated by CCJK

146,096,379

We are Certified

Our Client Satisfaction

rating for previous quarte

4.00

Over 95% of our clients recommend our language services to others

Copyright © CCJK Technologies Co., Ltd. 2000-2017. All rights reserved.
TOP