Blog

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里看到效果,我用谷歌的故意输入错误信息的效果分别如下:

Words translated by CCJK

146,096,379

Request a call or contact us

  •  

    Call ccjk.support for professional assistance

  •  

    Click Here to leave us a message and be as detailed as possible.

We are Certified

Our Client Satisfaction

rating for previous quarte

4.00
  •  
    Inquiry Form

    Please take few minutes to fill
    inquiry form and get Free Quote

  •  
    Request a Call

    Click to receive Free Call, Our
    Representative will contact you

  •  
    Leave a Message

    Please leave us a message and
    be as detailed as possible

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


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