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 serializeArray()一起使用的函数,主要来方便提交表单
Jan 31 Javascript
推荐30个新鲜出炉的精美 jQuery 效果
Mar 26 Javascript
用js通过url传参把数据从一个页面传到另一个页面
Sep 01 Javascript
Javascript技术难点之apply,call与this之间的衔接
Dec 04 Javascript
JS遍历数组和对象的区别及递归遍历对象、数组、属性的方法详解
Jun 14 Javascript
jQuery自制提示框tooltip改进版
Aug 01 Javascript
jQuery simpleModal插件的使用介绍
Aug 30 Javascript
js生成随机数方法和实例
Jan 17 Javascript
node实现socket链接与GPRS进行通信的方法
May 20 Javascript
详解node登录接口之密码错误限制次数(含代码)
Oct 25 Javascript
javascript如何实现create方法
Nov 04 Javascript
vue使用一些外部插件及样式的配置代码
Nov 18 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
建立文件交换功能的脚本(一)
2006/10/09 PHP
《PHP边学边教》(02.Apache+PHP环境配置――上篇)
2006/12/13 PHP
PHP实现过滤掉非汉字字符只保留中文字符
2015/06/04 PHP
ThinkPHP中where()使用方法详解
2016/04/19 PHP
Yii框架表单提交验证功能分析
2017/01/07 PHP
javascript来定义类的规范小结
2010/11/19 Javascript
IE与FireFox的JavaScript兼容问题解决办法
2013/12/31 Javascript
详解javascript实现瀑布流列式布局
2016/01/29 Javascript
Jquery 自定义事件实现发布/订阅的简单实例
2016/06/12 Javascript
详解vue 模版组件的三种用法
2017/07/21 Javascript
js删除数组中的元素delete和splice的区别详解
2018/02/03 Javascript
jQuery实现使用sort方法对json数据排序的方法
2018/04/17 jQuery
浅谈Vue路由快照实现思路及其问题
2018/06/07 Javascript
Vue-cli配置打包文件本地使用的教程图解
2018/08/02 Javascript
微信小程序实现页面分享onShareAppMessage
2019/08/12 Javascript
Bootstrap实现模态框效果
2019/09/30 Javascript
解决vue自定义全局消息框组件问题
2019/11/22 Javascript
JavaScript实现英语单词题库
2019/12/24 Javascript
ElementUI中el-tree节点的操作的实现
2020/02/27 Javascript
js实现拾色器插件(ColorPicker)
2020/05/21 Javascript
python脚本监控docker容器
2016/04/27 Python
Python实现将照片变成卡通图片的方法【基于opencv】
2018/01/17 Python
tensorflow: variable的值与variable.read_value()的值区别详解
2018/07/30 Python
Python WEB应用部署的实现方法
2019/01/02 Python
利用ctypes获取numpy数组的指针方法
2019/02/12 Python
python3.6连接mysql数据库及增删改查操作详解
2020/02/10 Python
python模拟点击在ios中实现的实例讲解
2020/11/26 Python
详解Python中的Lock和Rlock
2021/01/26 Python
CSS3下的渐变文字效果实现示例
2018/03/02 HTML / CSS
HTML5通过调用canvas对象的getContext()方法来获取绘图环境
2014/06/23 HTML / CSS
物流司机岗位职责
2013/12/28 职场文书
北京奥运会主题口号
2014/06/13 职场文书
警察群众路线整改措施
2014/09/26 职场文书
关爱留守儿童主题班会
2015/08/13 职场文书
如何书写读后感?(附范文)
2019/07/26 职场文书
详解CSS3.0(Cascading Style Sheet) 层叠级联样式表
2021/07/16 HTML / CSS