jquery.form.js用法之清空form的方法


Posted in Javascript onMarch 07, 2014

本段代码摘取自jquery.form.js中,由于觉得该方法的使用性非常强,同时也可独立拿出来使用。
该段代码言简意赅可以很好的作为学习参考。

/**
 * Clears the form data. Takes the following actions on the form's input fields:
 * - input text fields will have their 'value' property set to the empty string
 * - select elements will have their 'selectedIndex' property set to -1
 * - checkbox and radio inputs will have their 'checked' property set to false
 * - inputs of type submit, button, reset, and hidden will *not* be effected
 * - button elements will *not* be effected
 */
$.fn.clearForm = function(includeHidden) {
    return this.each(function() {
        $('input,select,textarea', this).clearFields(includeHidden);   //this表示设置上下文环境,有多个表单时只作用调用的表单
    });
};
$.fn.clearFields = $.fn.clearInputs = function(includeHidden) {
    var re = /^(?:color|date|datetime|email|month|number|password|range|search|tel|text|time|url|week)$/i; // 'hidden' is not in this list
    return this.each(function() {
        var t = this.type, tag = this.tagName.toLowerCase();
        if (re.test(t) || tag == 'textarea') {
            this.value = '';
        }
        else if (t == 'checkbox' || t == 'radio') {
            this.checked = false;
        }
        else if (tag == 'select') {
            this.selectedIndex = -1;
        } 
        else if (t == "file") {
            if (/MSIE/.test(navigator.userAgent)) {
                 $(this).replaceWith($(this).clone(true));
            } else {
                 $(this).val('');
            }
       }
        else if (includeHidden) {
            // includeHidden can be the value true, or it can be a selector string
            // indicating a special test; for example:
            // $('#myForm').clearForm('.special:hidden')
            // the above would clean hidden inputs that have the class of 'special'
            if ( (includeHidden === true && /hidden/.test(t)) ||
                 (typeof includeHidden == 'string' && $(this).is(includeHidden)) ) {
                this.value = '';
            }
        }
    });
};
Javascript 相关文章推荐
JS中实现replaceAll的方法(实例代码)
Nov 12 Javascript
js控制href内容的连接内容的变化示例
Apr 30 Javascript
多个checkbox被选中时如何判断是否有自己想要的
Sep 22 Javascript
AngularJS基础 ng-mousemove 指令简单示例
Aug 02 Javascript
基于vuejs实现一个todolist项目
Apr 11 Javascript
浅谈Angular 中何时取消订阅
Nov 22 Javascript
vue中element 上传功能的实现思路
Jul 06 Javascript
angular5 子组件监听父组件传入值的变化方法
Sep 30 Javascript
详解项目升级到vue-cli3的正确姿势
Jan 28 Javascript
JS代码优化的8点建议
Feb 04 Javascript
extjs图形绘制之饼图实现方法分析
Mar 06 Javascript
Element Dropdown下拉菜单的使用方法
Jul 26 Javascript
jquery设置按钮停顿3秒不可用
Mar 07 #Javascript
jquery 实现两级导航菜单附效果图
Mar 07 #Javascript
document.addEventListener使用介绍
Mar 07 #Javascript
开发中可能会用到的jQuery小技巧
Mar 07 #Javascript
javascript匿名函数应用示例介绍
Mar 07 #Javascript
js登录弹出层特效
Mar 07 #Javascript
JavaScript通过正则表达式实现表单验证电话号码
Mar 07 #Javascript
You might like
php 无限极分类
2008/03/27 PHP
php _autoload自动加载类与机制分析
2012/02/10 PHP
非集成环境的php运行环境(Apache配置、Mysql)搭建安装图文教程
2016/04/12 PHP
golang 调用 php7详解及实例
2017/01/04 PHP
PHP开发之归档格式phar文件概念与用法详解【创建,使用,解包还原提取】
2017/11/17 PHP
PHP实现长轮询消息实时推送功能代码实例讲解
2021/02/26 PHP
JavaScript 全角转半角部分
2009/10/28 Javascript
深入理解JavaScript定时机制
2010/10/29 Javascript
javascript获取URL参数与参数值的示例代码
2013/12/20 Javascript
利用jquery给指定的table动态添加一行、删除一行的方法
2016/10/12 Javascript
JavaScript实现页面无操作倒计时退出
2016/10/22 Javascript
通过js修改input、select默认字体颜色
2017/04/19 Javascript
vue单文件组件lint error自动fix与styleLint报错自动fix详解
2019/01/08 Javascript
基于jsbarcode 生成条形码并将生成的条码保存至本地+源码
2020/04/27 Javascript
vue项目在线上服务器访问失败原因分析
2020/08/14 Javascript
详解React路由传参方法汇总记录
2020/11/29 Javascript
[01:17]Ti4 循环赛第一日回顾
2014/07/11 DOTA
[01:20:06]TNC vs VG 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
[01:20]DOTA2更新全新英雄 天涯墨客现已加入游戏
2018/08/25 DOTA
Python中文件操作简明介绍
2015/04/13 Python
Python get获取页面cookie代码实例
2018/09/12 Python
python之pexpect实现自动交互的例子
2019/07/25 Python
详解如何用TensorFlow训练和识别/分类自定义图片
2019/08/05 Python
详谈tensorflow gfile文件的用法
2020/02/05 Python
为什么说python适合写爬虫
2020/06/11 Python
基于python实现简单C/S模式代码实例
2020/09/14 Python
单身旅行者的单身假期:Just You
2018/04/08 全球购物
美国男士和女士奢侈品折扣手表购物网站:Certified Watch Store
2018/06/13 全球购物
物流专业大学的自我评价
2014/01/11 职场文书
物业品质提升方案
2014/06/08 职场文书
体育教师个人工作总结
2015/02/09 职场文书
2016年国陪研修感言
2015/11/18 职场文书
《没有任何借口》读后感:完美的执行能力
2020/01/07 职场文书
css height属性中的calc方法详解
2021/06/03 HTML / CSS
正则表达式拆分url实例代码
2022/02/24 Java/Android
iSCSI服务器CHAP双向认证配置
2022/04/01 Servers