H5 form表单类型

emali:电子邮箱文本框,跟普通的没什么区别

  -当输入不是邮箱的时候,验证通不过

  -移动端的键盘会有变化

<form>

  <input type="email">

  <input type="submit">

</form>

tel:电话号码 

  tel的功能主要在移动端,一个键盘的切换

url:网页的URL

<form>

  <input type="url">

  <input type="submit">

</form>

search:搜索引擎

   ----charome下输入文字后,会多出一个关闭的X

<form>

  <input type="search">

  <input type="submit">

</form>

range:特定范围内的数值选择器

   -min、max、step(步数)

   -例子:用JS来显示当前数值

<form>

  <input type="range" step="2" min="0" max="10" value="2">

  <input type="submit">

</form>

number:只包含数字的输入框

<form>

  <input type="numberl">

  <input type="submit">

</form>

color:颜色选择器

<form>

  <input type="colorl">

  <input type="submit">

</form>

datetime:显示完整的日期

<form>

  <input type="datetime">

  <input type="submit">

</form>

datetime-local:显示完整日期 不含时区

<form>

  <input type="datetime-local">

  <input type="submit">

</form>

time:显示时间,不含时区

<form>

  <input type="time">

  <input type="submit">

</form>

date:显示时间

<form>

  <input type="date">

  <input type="submit">

</form>

week:显示周

<form>

  <input type="weekl">

  <input type="submit">

</form>

month:显示月

<form>

  <input type="month">

  <input type="submit">

</form>

placeholder:输入框提示信息

<form>

  <input type="text" placeholder="输入4~16个字符">

  <input type="submit">

</form>

autocomplete:是否保存用户输入值

  -默认为on,关闭提示选择off

<form>

  <input type="text" name="" autocomplete="off">

  <input type="submit">

</form>

autofocus:指定表单获取输入焦点

<form>

  <input type="text" name="user" autofocus>

  <input type="password" name="password">

  <input type="submit">

</form>

required:此项必填,不能为空

<form>

  <input type="text" name="user" required>

  <input type="password" name="password" required>

  <input type="submit">

</form>

patten:正则验证 pattern="\d{1,5}"

<form>

  <input type="text" name="user" pattern=“\d{1,5}’”>

  <input type="submit">

</form>

formaction在submit里定义提交地址

<form>

  <input type="text" name="user" pattern="\d{1,5}">

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

  <input type="submit" vaue="保存至草稿箱" formaction="www.baidu.com">

</form>

validity对象,通过下面的valid可以查看验证是否通过,如果八种验证都通过返回true一种验证失败返回false

-oText.addEventListener("invalid",fn1,false);

-ev.preventDefault() ; 阻止默认事件

-valueMissing : 输入值为空时

-typeMismatch : 控件值与预期类型不匹配

-patternMismatch : 输入值不满足pattern正则

-tooLong : 超过maxLength最大限制

-rangeUnderflow : 验证的range最小值

-rangeOverflow:验证的range最大值

-stepMismatch: 验证range 的当前值 是否符合min、max及step的规则

-customError 不符合自定义验证

      》setCustomValidity(); 自定义验证

typeMismatch:控件值与预期类型不匹配返回true

<form>

   <input type= “email" id= “text">

  <input type= "submit“>

</form>

patternMismatch:输入值不满足pattern正则返回true

<form>

   <input type= "txet" id= “text" pattern="\d{1,5}">

  <input type= "submit“>

</form>

tooLong:超过maxLength最大限制

<form>

   <input type= “email" id= “text" maxlength="5">

  <input type= "submit“>

</form>

rangeUnderflow:验证的range最小值

rangeOverflow:验证的range最大值

stepMismatch:验证range的当前值是否符合min、max及step的规则

<form>

   <input type= “range" value="0" min="2" max="10" step="2">

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

</form>

customError:不符合自定义验证

oText.oninput = function(){

   if(this.value=="敏感词"){

    this.setCustomValidity("请不要输入敏感词");

  }else{

    this.setCustomValidity("")

    }

}

function fn(){

      alert(this.validity.customError)

      ev.preventDefault()

}

<form>

   <input type= “text" id= “text">

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

</form>

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>

posted @ 2019-05-15 11:11  逐梦醉伊人  阅读(1320)  评论(0编辑  收藏  举报