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 相关文章推荐
7个Javascript地图脚本整理
Oct 20 Javascript
js控制浏览器全屏示例代码
Feb 20 Javascript
在JavaScript里防止事件函数高频触发和高频调用的方法
Sep 06 Javascript
node.js中的fs.readlink方法使用说明
Dec 17 Javascript
浅谈javascript的分号的使用
May 12 Javascript
基于jQuery实现搜索关键字自动匹配功能
Mar 26 Javascript
微信js-sdk上传与下载图片接口用法示例
Oct 12 Javascript
Html5+jQuery+CSS制作相册小记录
Dec 30 Javascript
jQuery validate 验证radio实例
Mar 01 Javascript
layui对工具条进行选择性的显示方法
Sep 19 Javascript
vue element-ui读取pdf文件的方法
Nov 26 Javascript
Ant Design Pro 下实现文件下载的实现代码
Dec 03 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简单封装了一些常用JS操作
2007/02/25 PHP
PHP 删除文件与文件夹操作 unlink()与rmdir()这两个函数的使用
2011/07/17 PHP
PHP fastcgi模式上传大文件(大约有300多K)报错
2014/09/28 PHP
PHP中PDO事务处理操作示例
2018/05/02 PHP
浅谈PHP中的Trait使用方法
2019/03/22 PHP
javascript innerText和innerHtml应用
2010/01/28 Javascript
映彩衣的js随笔(js图片切换效果)
2011/07/31 Javascript
使用JavaScript构建JSON格式字符串实现步骤
2013/03/22 Javascript
动态的创建一个元素createElement及删除一个元素
2014/01/24 Javascript
JavaScript中的eval()函数使用介绍
2014/12/31 Javascript
jQuery实现渐变弹出层和弹出菜单的方法
2015/02/20 Javascript
js实现的彩色方块飞舞奇幻效果
2016/01/27 Javascript
原生js三级联动的简单实现代码
2016/06/07 Javascript
Vue 2.0中生命周期与钩子函数的一些理解
2017/05/09 Javascript
在vscode中统一vue编码风格的方法
2018/02/22 Javascript
浅谈Vue Element中Select下拉框选取值的问题
2018/03/01 Javascript
详解Vue源码之数据的代理访问
2018/12/11 Javascript
Vue自动构建发布脚本的方法示例
2020/07/24 Javascript
[02:12]打造更好的电竞完美世界:完美盛典回顾篇
2018/12/19 DOTA
[01:32]TI珍贵瞬间系列(一)
2020/08/26 DOTA
Python实现全角半角转换的方法
2014/08/18 Python
python2.7无法使用pip的解决方法(安装easy_install)
2018/04/03 Python
Django保护敏感信息的方法示例
2019/05/09 Python
Python用字典构建多级菜单功能
2019/07/11 Python
PYTHON EVAL的用法及注意事项解析
2019/09/06 Python
python Tensor和Array对比分析
2020/01/08 Python
关于Tensorflow分布式并行策略
2020/02/03 Python
jupyter notebook 增加kernel教程
2020/04/10 Python
tensorflow 2.1.0 安装与实战教程(CASIA FACE v5)
2020/06/30 Python
前端面试必备之html5的新特性
2017/09/05 HTML / CSS
仿CSDN Blog返回页面顶部功能实现原理及代码
2013/06/30 HTML / CSS
HTML5 canvas基本绘图之图形变换
2016/06/27 HTML / CSS
美国成衣女装品牌:CHICO’S
2016/09/19 全球购物
美国顶级户外凉鞋品牌:Chacos
2017/03/27 全球购物
音乐幼师求职信
2014/07/09 职场文书
Redis高并发防止秒杀超卖实战源码解决方案
2021/11/01 Redis