HTML5之表单

HTML5之表单

Forms

 

l  新的输入型控件

•     email  : 电子邮箱文本框，跟普通的没什么区别

–    当输入不是邮箱的时候，验证通不过

–    移动端的键盘会有变化

 

<form>

<inputtype="email" />

<inputtype="submit" />

</form>

 

•     tel   :  电话号码

 

•     url   :  网页的URL

 

•     search  : 搜索引擎

–    chrome下输入文字后，会多出一个关闭的X

 

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

–    min、max、step(步数 )

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

<form>

    <inputtype="range" step="2" min="0" max="10"value="2" />

    <inputtype="submit" />

</form>

 

l  新的输入型控件_2

•     number  : 只能包含数字的输入框

<form>

      <inputtype="number"/>

      <inputtype="submit" />

</form>

•     color  : 颜色选择器

 

•     datetime  : 显示完整日期

 

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

 

•     time  : 显示时间，不含时区

•     date  :   显示日期

•     week  : 显示周

•     month  : 显示月

 

l  新的表单特性和函数

•     placeholder  : 输入框提示信息

–    例子 : 微博的密码框提示

<form>

<inputtype="text" placeholder="请输入4-16个字符" />

<inputtype="submit" />

</form>

注意：与value类似，只是当鼠标一点上，提示语自动消失

 

•     autocomplete  : 是否保存用户输入值

–    默认为on，关闭提示选择off

 

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

 

<form>

      <inputtype="text" placeholder="请输入4-16个字符" name="user" autocomplete="off" />

   <input type="password" placeholder="请输入4-16个字符" name="password"autocomplete="off" autofocus />

      <inputtype="submit" />

</form>

•     list和datalist : 为输入框构造一个选择列表

–    list值为datalist标签的id

 

•     required  : 此项必填，不能为空

 

<form>

      <inputtype="text" placeholder="请输入4-16个字符" name="user" autocomplete="off" required/>

   <input type="password" placeholder="请输入4-16个字符" name="password"autocomplete="off" required />

      <inputtype="submit" />

</form>

•     Pattern :正则验证  pattern="\d{1,5}“

•     Formaction在submit里定义提交地址

 

                <formaction="http://www.baidu.com">

       <inputtype="text" placeholder="请输入4-16个字符" name="user" autocomplete="off"pattern="\d{1,5}" />

       <inputtype="submit" value="提交" />

    <inputtype="submit" value="保存至草稿箱" formaction="http://www.qq.com" />

</form>

 

l  表单验证

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

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

–    ev.preventDefault()

–     

<form>

<inputtype="text" required id="text"/>

<inputtype="submit" />

</form>

<script>

varoText=document.getElementById("text");

oText.addEventListener("invalid",fn,false);

function fn()

{

alert(this.validity.valid);

ev.preventDefault();

}

</script>

 

–    valueMissing  : 输入值为空时

 

<script>

varoText=document.getElementById("text");

oText.addEventListener("invalid",fn,false);

function fn()

{

alert(this.validity.valueMissing);

ev.preventDefault();

}

 

//valueMissing   当输入值为空的时候返回true

 

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

 

<form>

<inputtype="email" id="text"/>

<inputtype="submit" />

</form>

<script>

varoText=document.getElementById("text");

oText.addEventListener("invalid",fn,false);

function fn()

{

alert(this.validity.typeMismatch);

ev.preventDefault();

}

 

//valueMissing   当输入值为空的时候返回true

//typeMismatch   当输入类型和要求的类型不一致的时候返回true

</script>

 

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

 

<form>

<inputtype="text" id="text" pattern="\d{1,5}"/>

<inputtype="submit" />

</form>

<script>

varoText=document.getElementById("text");

oText.addEventListener("invalid",fn,false);

function fn()

{

alert(this.validity.patternMismatch);

ev.preventDefault();

}

 

//valueMissing   当输入值为空的时候返回true

//typeMismatch   当输入类型和要求的类型不一致的时候返回true

//patternMismatch 当用户输入的内容和预期的正则要求不匹配 返回true

</script>

 

–    tooLong  : 超过maxLength最大限制

//tooLong 当用户输入的长度 超出了maxlength的限制 返回true

–    rangeUnderflow :验证的range最小值

–    rangeOverflow：验证的range最大值

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

–    customError不符合自定义验证

»    setCustomValidity();自定义验证

 

<form>

   <inputtype="text" id="text" />

   <inputtype="submit" />

</form>

<script>

varoText=document.getElementById("text");

oText.addEventListener("invalid",fn,false);

oText.oninput=function()

{

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

   {

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

   }

   else

   {

          this.setCustomValidity("");

   }

};

function fn()

{

   alert(this.validity.customError);

   ev.preventDefault();

}

 

//valueMissing   当输入值为空的时候返回true

//typeMismatch   当输入类型和要求的类型不一致的时候返回true

//patternMismatch 当用户输入的内容和预期的正则要求不匹配 返回true

//tooLong 当用户输入的长度 超出了maxlength的限制 返回true

//customError  不符合在定义验证的时候返回true

</script>

 

 

l  表单验证

•     Invalid事件  : 验证反馈 input.addEventListener('invalid',fn,false)

–    阻止默认验证：ev.preventDefault()

•     formnovalidate属性  : 关闭验证

 

 

保存到草稿箱，不需要进行验证，则可以关闭验证，实现提交时，验证，而保存到草稿箱则不验证的功能

<form action="http://www.baidu.com">

       <inputtype="text" placeholder="请输入4-16个字符" name="user" pattern="\d{1,5}" required />

       <inputtype="submit" value="提交" />

    <inputtype="submit" value="保存至草稿箱" formaction="http://www.qq.com"formnovalidate />

</form>