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实现居中弹出层代码
Aug 25 Javascript
十个迅速提升JQuery性能让你的JQuery跑得更快
Dec 10 Javascript
获取select元素被选中的文本内容的js代码
Jan 29 Javascript
javascript使用正则表达式检测IP地址
Dec 03 Javascript
jquery实现简洁文件上传表单样式
Nov 02 Javascript
JavaScript九九乘法口诀表的简单实现
Oct 04 Javascript
jQuery中ztree 点击文本框弹出下拉框的实例代码
Feb 05 Javascript
JS正则表达式判断有效数实例代码
Mar 13 Javascript
Vue实现动态显示textarea剩余字数
May 22 Javascript
vue获取DOM元素并设置属性的两种实现方法
Sep 30 Javascript
详解如何用模块化的方式写vuejs
Dec 16 Javascript
浅谈vant组件Picker 选择器选单选问题
Nov 04 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 截取字符串专题集合
2010/08/19 PHP
WordPress主题中添加文章列表页页码导航的PHP代码实例
2015/12/22 PHP
php+mongodb判断坐标是否在指定多边形区域内的实例
2016/10/28 PHP
PHP PDOStatement::debugDumpParams讲解
2019/01/30 PHP
js multiple全选与取消全选实现代码
2012/12/04 Javascript
使用jQuery fancybox插件打造一个实用的数据传输模态弹出窗体
2013/01/15 Javascript
javascript中解析四则运算表达式的算法和示例
2014/08/11 Javascript
JS基于VML技术实现的五角星礼花效果代码
2015/10/26 Javascript
超实用的JavaScript表单代码段
2016/02/26 Javascript
JavaScript重定向URL参数的两种方法小结
2016/10/19 Javascript
jsp 网站引入外部css或者js失效问题解决
2016/10/31 Javascript
Vue.js实战之组件之间的数据传递
2017/04/01 Javascript
react路由配置方式详解
2017/08/07 Javascript
详解如何在vue项目中使用eslint+prettier格式化代码
2018/11/10 Javascript
VUE UPLOAD 通过ACTION返回上传结果操作
2020/09/07 Javascript
解决antd日期选择组件,添加value就无法点击下一年和下一月问题
2020/10/29 Javascript
python使用append合并两个数组的方法
2015/04/28 Python
在Django同1个页面中的多表单处理详解
2017/01/25 Python
Python3中的列表,元组,字典,字符串相关知识小结
2017/11/10 Python
用Python逐行分析文件方法
2019/01/28 Python
分享8个非常流行的 Python 可视化工具包
2019/06/05 Python
Python 分享10个PyCharm技巧
2019/07/13 Python
Python 3.8 新功能来一波(大部分人都不知道)
2020/03/11 Python
python用opencv 图像傅里叶变换
2021/01/04 Python
韩国三星集团旗下时尚品牌官网:SSF SHOP
2016/08/02 全球购物
什么是类的返射机制
2016/02/06 面试题
函数指针的定义是什么
2016/08/14 面试题
《童年的发现》教学反思
2014/02/14 职场文书
农村葬礼主持词
2014/03/31 职场文书
文体活动总结范文
2014/05/05 职场文书
副校长个人对照检查材料思想汇报
2014/10/04 职场文书
企业财务人员岗位职责
2015/04/14 职场文书
《学会看病》教学反思
2016/02/17 职场文书
node.js使用express-fileupload中间件实现文件上传
2021/07/16 Javascript
在Spring-Boot中如何使用@Value注解注入集合类
2021/08/02 Java/Android
Python中使用Opencv开发停车位计数器功能
2022/04/04 Python