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 相关文章推荐
jquery获取table中的某行全部td的内容方法
Mar 08 Javascript
jquery map方法使用示例
Apr 23 Javascript
Jquery树插件zTree用法入门教程
Feb 17 Javascript
分享12个实用的jQuery代码片段
Mar 09 Javascript
Jquery $when done then的用法详解
May 20 Javascript
后端接收不到AngularJs中$http.post发送的数据原因分析及解决办法
Jul 05 Javascript
vue组件传递对象中实现单向绑定的示例
Feb 28 Javascript
Vue filter介绍及详细使用
Apr 04 Javascript
微信小程序登录按钮遮罩浮层效果的实现方法
Dec 16 Javascript
三分钟教你用Node做一个微信哄女友(基友)神器(面向小白)
Jun 21 Javascript
vue中如何实现后台管理系统的权限控制的方法步骤
Sep 05 Javascript
Vue2.0 $set()的正确使用详解
Jul 28 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数组遍历知识汇总(包含遍历方法、数组指针操作函数、数组遍历测速)
2014/07/05 PHP
PHP查询快递信息的方法
2015/03/07 PHP
PHP处理会话函数大总结
2015/08/05 PHP
Javascript 解疑
2009/11/11 Javascript
javascript 面向对象继承
2009/11/26 Javascript
javascript 数字格式化输出的实现代码
2013/12/10 Javascript
基于Bootstrap的Metronic框架实现条码和二维码的生成及打印处理操作
2016/08/29 Javascript
Javascript数组循环遍历之forEach详解
2016/11/07 Javascript
AngularJS基于ui-route实现深层路由的方法【路由嵌套】
2016/12/14 Javascript
快速入门Vue
2016/12/19 Javascript
ng-repeat指令在迭代对象时的去重方法
2018/10/02 Javascript
vue插件draggable实现拖拽移动图片顺序
2018/12/01 Javascript
详解使用Nuxt.js快速搭建服务端渲染(SSR)应用
2019/03/13 Javascript
弱类型语言javascript开发中的一些坑实例小结【变量、函数、数组、对象、作用域等】
2019/08/07 Javascript
vue+element tabs选项卡分页效果
2020/06/29 Javascript
javascript设计模式 ? 简单工厂模式原理与应用实例分析
2020/04/09 Javascript
js+canvas实现图片格式webp/png/jpeg在线转换
2020/08/22 Javascript
vue 使用原生组件上传图片的实例
2020/09/08 Javascript
[00:59]DOTA2荣耀之路1:Doom is back!weapon X!
2018/05/22 DOTA
windows下python模拟鼠标点击和键盘输示例
2014/02/28 Python
python实现清屏的方法
2015/04/30 Python
Python中shutil模块的常用文件操作函数用法示例
2016/07/05 Python
Python实现的概率分布运算操作示例
2017/08/14 Python
Python爬虫框架Scrapy实例代码
2018/03/04 Python
python psutil库安装教程
2018/03/19 Python
python清除字符串中间空格的实例讲解
2018/05/11 Python
django组合搜索实现过程详解(附代码)
2019/08/06 Python
django-rest-swagger对API接口注释的方法
2019/08/29 Python
浅谈django channels 路由误导
2020/05/28 Python
Django中和时区相关的安全问题详解
2020/10/12 Python
html5手机键盘弹出收起的处理
2020/01/20 HTML / CSS
Maisons du Monde德国:法国家具和装饰的市场领导者
2019/07/26 全球购物
2014年精神文明工作总结
2014/12/23 职场文书
学习《中小学教师职业道德规范》心得体会
2016/01/18 职场文书
导游词之无锡唐城
2019/12/12 职场文书