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.οninput=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>