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 相关文章推荐
深入认识JavaScript中的函数
Jan 22 Javascript
JS连接SQL数据库与ACCESS数据库的方法实例
Nov 21 Javascript
图片翻转效果具体实现代码
Jan 09 Javascript
javascript中兼容主流浏览器的动态生成iframe方法
May 05 Javascript
JS实现动画兼容性的transition和transform实例分析
Dec 13 Javascript
javascript实现二叉树遍历的代码
Jun 08 Javascript
详解Angular之constructor和ngOnInit差异及适用场景
Jun 22 Javascript
浅谈JS中的反柯里化( uncurrying)
Aug 17 Javascript
深入浅析Vue.js计算属性和侦听器
May 05 Javascript
详解JavaScript添加给定的标签选项
Sep 17 Javascript
vue实现PC端录音功能的实例代码
Jun 05 Javascript
angular共享依赖的解决方案分享
Oct 15 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设计模式 Adapter(适配器模式)
2011/06/26 PHP
php中{}大括号是什么意思
2013/12/01 PHP
使用PHP生成PDF方法详解
2015/01/23 PHP
PHP序列化和反序列化深度剖析实例讲解
2020/12/29 PHP
js 数值项目的格式化函数代码
2010/05/14 Javascript
jquery 实现密码框的显示与隐藏示例代码
2013/09/18 Javascript
使用JavaScript和CSS实现文本隔行换色的方法
2015/11/04 Javascript
详解maxlength属性在textarea里奇怪的表现
2015/12/27 Javascript
jQuery验证插件validate使用详解
2016/05/11 Javascript
Javascript字符串常用方法详解
2016/07/21 Javascript
bootstrap响应式表格实例详解
2017/05/15 Javascript
运用jQuery写的验证表单(实例讲解)
2017/07/06 jQuery
Grunt针对静态文件的压缩,版本控制打包的实例讲解
2017/09/29 Javascript
jQuery实现图片简单轮播功能示例
2018/08/13 jQuery
原生js实现公告滚动效果
2021/01/10 Javascript
关于JavaScript 数组你应该知道的事情(推荐)
2019/04/10 Javascript
详解vuex持久化插件解决浏览器刷新数据消失问题
2019/04/15 Javascript
Vue3.0数据响应式原理详解
2019/10/09 Javascript
原生JS实现留言板功能
2020/02/08 Javascript
浅谈vue中使用编辑器vue-quill-editor踩过的坑
2020/08/03 Javascript
[02:58]献给西雅图的情书_高清
2014/05/29 DOTA
[01:00:30]TFT vs VGJ.T Supermajor 败者组 BO3 第一场 6.5
2018/06/06 DOTA
python检查指定文件是否存在的方法
2015/07/06 Python
python实现猜数字小游戏
2020/03/24 Python
python matplotlib画图库学习绘制常用的图
2019/03/19 Python
Python爬虫:将headers请求头字符串转为字典的方法
2019/08/21 Python
Pytorch 使用opnecv读入图像由HWC转为BCHW格式方式
2020/06/02 Python
详解CSS3开启硬件加速的使用和坑
2017/08/21 HTML / CSS
总结30个CSS3选择器
2017/04/13 HTML / CSS
Marks & Spencer爱尔兰:英国马莎百货
2016/04/20 全球购物
PHP中如何创建和修改数组
2012/05/02 面试题
这段代码难道不该打印出56吗
2013/02/27 面试题
西安众合通用.net笔试题
2013/03/18 面试题
中科方德软件测试面试题
2016/04/21 面试题
工商管理专业大学生职业生涯规划范文
2014/03/09 职场文书
大学生个人求职信例文
2014/07/07 职场文书