技术控

    今日:3| 主题:49249
收藏本版 (1)
最新软件应用技术尽在掌握

[其他] JavaScript 表单脚本

[复制链接]
心控2star 发表于 2016-10-1 01:49:33
107 2

立即注册CoLaBug.com会员,免费获得投稿人的专业资料,享用更多功能,玩转个人品牌!

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
       
  • 通过      document.forms可以获得一个包含当前页面中所有表单的集合  
      HTMLFormElement 接口  

  下面是这个接口常用的属性和方法:
  
       
  •       action:接受请求的 URL,等价于 HTML 中的 action 特性。   
  •       elements:返回表单中所有控件(或表单字段)的集合(HTMLFormControlsCollection)。需要注意的是,      其中不包括 type 等于 image 的 input 元素。   
  •       enctype:请求的编码类型,HTML 提供了3种编码类型
              
    •           application/x-www-form-urlencoded:默认的编码类型        
    •           multipart/form-data:在上传文件时使用(<input type=”file” />)        
    •           text/plain:在 HTML5 中引进,但是不建议使用        
    • 【参考】:          What does enctype=’multipart/form-data’ mean?      
            
  •       length:表单中控件的数量   
  •       method:要发送的 HTTP 请求类型(get 或 post),等价于 HTML 中的 method 特性   
  •       name:表单的名称,等价于 HTML 中的 name 特性   
  •       noValidate:是否验证表单,若它的值为 true,则表示禁止验证表单   
  •       reset():将该表单下的所有表单域重置为默认值   
  •       submit():提交表单  
  重置或提交表单  

  在 HTML 中,重置表单的方式有以下 2 种:  
  1. <!-- 通用重置按钮 -->
  2. <inputtype="reset"value="重置表单"/>
  3. <!-- 自定义重置按钮 -->
  4. <buttontype="reset">重置表单</button>
复制代码
用户点击重置按钮重置表单时,会在重置表单之前触发 reset 事件。利用这个事件,我们可以取消不必要的重置操作。
  当然,也可以通过 JavaScript 调用    reset()方法来重置表单,这个方法也会像单击重置按钮一样触发    reset 事件。  
  1. varform1 =document.getElementById("form1");
  2. form1.reset();
复制代码
在 HTML 中,提交表单的方式有以下 3 种:  
  1. <!-- 通用提交按钮 -->
  2. <inputtype="submit"value="提交"/>
  3. <!-- 自定义提交按钮 -->
  4. <buttontype="submit">提交</button>
  5. <!-- 图像提交按钮 -->
  6. <inputtype="image"src="1.png"alt="图片提交按钮"/>
复制代码
以上面这 3 种方式提交表单时,    浏览器会在将请求发送给服务器之前触发 submit 事件,这样,我们就可以利用这个事件对表单进行验证,并据以决定是否提交表单。  
  注意:submit 事件只能在 form 元素上触发,不能在提交按钮上触发!

  Note that submit is fired only on the form element, not the button or submit input.
  我们也可以通过 JavaScript 的    submit()方法来提交表单,但是不会触发 submit 事件。因此注意在使用此方法之前先验证表单。  
  1. varform1 =document.getElementById("form1");
  2. form1.submit();
复制代码
See the Pen    submit or reset event for formby percy (    @percy507) on    CodePen.  
  
       
  •       防止重复提交表单  
  在有提交按钮的表单中,我们防止表单重复提交的方法有 2 种:    1. 利用 submit 事件来禁用表单提交按钮,    2. 利用 onsubmit 事件处理程序取消后续的表单提交操作  
  表单控件共有的属性和方法  

  除了 <fieldset> 元素之外,所有表单控件都拥有相同的一组属性:
  
       
  •       disabled:布尔值,表示当前控件是否被禁用   
  •       form:只读,指向当前控件所属的表单   
  •       name:当前控件的名称   
  •       readOnly:布尔值,表示当前控件的值是否只读,若为 true,则控件的 value 是不能被修改的   
  •       type:当前控件的类型   
  •       value:当前控件将被提交给服务器的值  
  共有的方法:    focus()和    blur()。  
  HTML5 中新添加了一个    autofocus 属性。设置这个属性的表单控件会自动获取焦点。  
      HTMLInputElement 接口  

  
       
  •       通用属性
              
    •           formAction:重写 form 元素的 action 属性        
    •           formEncType:重写 form 元素的 enctype 属性        
    •           formMethod:重写 form 元素的 method 属性        
    •           labels:A list of          elements that are labels for this element      
            
  •       type=”text”
              
    •           maxLength:设置文本框可接受的最大字符数        
    •           size:设置文本框中可以显示的字符数        
    •           value:设置文本框的初始值        
    •           placeholder:设置文本框的提示内容      
            
  •       type=”radio” 或 type=”checkbox”
              
    •           checked:检测 type 为 radio 或 checkbox 的表单控件是否被选中      
          
  除了 type=”text” 的文本框,还有一种文本框    <textarea>。    这两种文本框都支持 select() 方法,用于选择文本框中的所有文本。这种技术能够大幅度地提升表单的易用性。  
  
       
  • 文本框获得焦点时,选中其中所有的文本  
  思路:利用焦点事件(focus 事件),在文本框获得焦点时,利用其 select() 方法选中所有文本。  
  See the Pen    select eventby percy (    @percy507) on    CodePen.  
  
       
  • 自动切换焦点  
  思路:利用 keyup 事件检测用户输入新字符后,文本框内的字符串是否已经达到最大长度,若达到最大长度,则将焦点切换至下一个文本框。  
  See the Pen    auto change focusby percy (    @percy507) on    CodePen.  
  HTML5 约束验证 API  

  
       
  • 必填字段:使用 required 属性  
  1. <inputtype="text"name="user"placeholder="用户名"required/>(必填)
复制代码

       
  • 输入模式:使用 pattern 属性,这个属性的值是一个正则表达式,用于匹配文本框中的值  
  1. <inputtype="text"name="password"placeholder="6位纯数字密码"maxLength="6"pattern="[0-9]{6}"required/>
复制代码

       
  • 禁用验证:通过为表单设置 novalidate 属性,可以告诉表单不进行验证  
  1. <formmethod="post"action="#"novalidate>
  2. ....
  3. </form>
复制代码

       
  • 自定义验证  
  HTML5 也规定了一组 JavaScript 属性方法,用来增强自定义表单验证机制。最常用的就是    setCustomValidity()方法,基于这个方法可以针对特定字段编写自定义的验证逻辑,并强制利用 HTML5 的验证机制。  
  See the Pen    using setCustomValidity()by percy (    @percy507) on    CodePen.
友荐云推荐




上一篇:Knuth&#x27;s Challenge – Analyze everything your computer does in one second
下一篇:Audio Fingerprinting with Python and Numpy
酷辣虫提示酷辣虫禁止发表任何与中华人民共和国法律有抵触的内容!所有内容由用户发布,并不代表酷辣虫的观点,酷辣虫无法对用户发布内容真实性提供任何的保证,请自行验证并承担风险与后果。如您有版权、违规等问题,请通过"联系我们"或"违规举报"告知我们处理。

yang1987621 发表于 2016-10-1 03:32:55
经验告诉哥,不能弯腰捡肥皂啊!
回复 支持 反对

使用道具 举报

qwer111 发表于 2016-10-1 05:16:29
占位编辑
回复 支持 反对

使用道具 举报

*滑动验证:
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

我要投稿

推荐阅读

扫码访问 @iTTTTT瑞翔 的微博
回页顶回复上一篇下一篇回列表手机版
手机版/CoLaBug.com ( 粤ICP备05003221号 | 文网文[2010]257号 )|网站地图 酷辣虫

© 2001-2016 Comsenz Inc. Design: Dean. DiscuzFans.

返回顶部 返回列表