表单验证

SRE实战 互联网时代守护先锋,助力企业售后服务体系运筹帷幄!一键直达领取阿里云限量特价优惠。

  Invalid事件 : 验证反馈

  input.addEventListener('invalid',fn,false)

  阻止默认验证:ev.preventDefault()

  formnovalidate属性 : 关闭验证

  <form action= "http://www.baidu.com">
    <input type= "text" id= "text" placeholder= "请输入4~16个字符" name= “user" pattern= "\d{1,5}" required />
    <input type= "submit" value= "提交"/>
    <input type= " submit" value= "保存至草稿箱" formaction= http://www.baidu.com formnovalidate/>
  </form>

H5表单属性 随笔 第1张

    新的输入型控件:

      <form>

        <input type="email" />  ·邮箱

        <input type="submit" value="提交"/>

      </form>

      H5表单属性 随笔 第2张

      -----------------------------------------------------------------------------

      <form>

        <input type="tel" />  ·电话号码

        <input type="submit" value="提交"/>

      </form>

       ------------------------------------------------------------------------------

      <form>

        <input type="url" />  ·网址

        <input type="submit" value="提交"/>

      </form>

      H5表单属性 随笔 第3张

      ------------------------------------------------------------------------------

      <form>

        <input type="search" />  ·搜索引擎

        <input type="submit" value="提交"/>

      </form>

      H5表单属性 随笔 第4张

      -------------------------------------------------------------------------------

       <form>

        <input type="range" step="2" min="0" max="10" value="2"/>  ·特定范围内的数值选择器

        <input type="submit" value="提交"/>

      </form>

      H5表单属性 随笔 第5张

      -------------------------------------------------------------------------

      <form>

        <input type="number" />  ·只能包含数字的输入框

        <input type="submit" value="提交"/>

      </form>

      H5表单属性 随笔 第6张

      -------------------------------------------------------------------------

      <form>

        <input type="color" />  ·颜色选择器

        <input type="submit" value="提交"/>

      </form>

      H5表单属性 随笔 第7张

      -----------------------------------------------------------------------

      <form>

        <input type="date" />  ·显示日期

        <input type="submit" value="提交"/>

      </form>

      H5表单属性 随笔 第8张

      ------------------------------------------------------------------------

      <form>

        <input type="time" />  ·显示时间,不含时区

        <input type="submit" value="提交"/>

      </form>  

       H5表单属性 随笔 第9张

       ------------------------------------------------------------------------

      <form>

        <input type="datetime-local" />  ·显示完整日期 不含时区

        <input type="submit" value="提交"/>

      </form>  

       H5表单属性 随笔 第10张

      ------------------------------------------------------------------------

      <form>

        <input type="date" />  ·显示周

        <input type="submit" value="提交"/>

      </form>  

      H5表单属性 随笔 第11张

       ------------------------------------------------------------------------

      <form>

        <input type="month" />  ·显示月

        <input type="submit" value="提交"/>

      </form>  

      H5表单属性 随笔 第12张

      ------------------------------------------------------------------------

      <form>

        <input placeholder="请输入4~16个字符" />  ·输入框提示信息

        <input type="submit" value="提交"/>

      </form> 

       H5表单属性 随笔 第13张

      ------------------------------------------------------------------------

      <form>

        <input name="a" autocomplete="off"/>  ·不保存用户输入值

        <input type="submit" value="提交"/>

      </form> 

       H5表单属性 随笔 第14张

      ------------------------------------------------------------------------

      <form>

        <input autofocus="autofocus" />  ·自动聚焦

        <input type="submit" value="提交"/>

      </form> 

      H5表单属性 随笔 第15张

      ------------------------------------------------------------------------

      <form>

        <input required="required" />  ·必须填

        <input type="submit" value="提交"/>

      </form> 

       H5表单属性 随笔 第16张

      ------------------------------------------------------------------------

      <form>

        <input pattern="\d{1,5}" />  ·正则验证,1-5位数字  ----了解

        <input type="submit" value="提交"/>

      </form> 

      H5表单属性 随笔 第17张

扫码关注我们
微信号:SRE实战
拒绝背锅 运筹帷幄