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 相关文章推荐
IE JS无提示关闭窗口不提示的方法
Apr 29 Javascript
js实现可拖动DIV的方法
Dec 17 Javascript
在JavaScript里防止事件函数高频触发和高频调用的方法
Sep 06 Javascript
jQuery学习笔记之jQuery+CSS3的浏览器兼容性
Jan 19 Javascript
JS简单实现多级Select联动菜单效果代码
Sep 06 Javascript
手机移动端实现 jquery和HTML5 Canvas的幸运大奖盘特效
Dec 06 Javascript
BootStrap中
Dec 10 Javascript
jQuery插件FusionCharts绘制的2D帕累托图效果示例【附demo源码】
Mar 28 jQuery
AngularJS实现表格的增删改查(仅限前端)
Jul 04 Javascript
浅谈JS和jQuery的区别
Mar 27 jQuery
layui 根据后台数据动态创建下拉框并同时默认选中的实例
Sep 02 Javascript
vue2.0实现列表数据增加和删除
Jun 17 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自动加载autoload机制示例分享
2014/02/20 PHP
Yii入门教程之目录结构、入口文件及路由设置
2014/11/25 PHP
ThinkPHP连接数据库的方式汇总
2014/12/05 PHP
PHP的关于变量和日期处理的一些面试题目整理
2015/08/10 PHP
php实现获取农历(阴历)、节日、节气的类与用法示例
2017/11/20 PHP
购物车实现的几种方式优缺点对比
2018/05/02 PHP
jquery判断字符输入个数(数字英文长度记为1,中文记为2,超过长度自动截取)
2010/10/15 Javascript
JQuery触发radio或checkbox的change事件
2012/12/18 Javascript
基于jQuery实现表单提交验证
2014/11/24 Javascript
什么是MEAN?JavaScript编程中的MEAN是什么意思?
2014/12/18 Javascript
提交按钮的name='submit'引起的js失效问题及原因
2015/02/25 Javascript
使用jquery制作弹出框效果
2015/04/03 Javascript
浅析JavaScript动画
2015/06/10 Javascript
Angular ng-repeat遍历渲染完页面后执行其他操作详细介绍
2016/12/13 Javascript
Angular在一个页面中使用两个ng-app的方法(二)
2017/02/20 Javascript
详解Angular.js数据绑定时自动转义html标签及内容
2017/03/30 Javascript
vue使用监听实现全选反选功能
2018/07/06 Javascript
Fetch超时设置与终止请求详解
2019/05/18 Javascript
浅析JavaScript预编译和暗示全局变量
2020/09/03 Javascript
详解JavaScript中new操作符的解析和实现
2020/09/04 Javascript
[03:07]DOTA2英雄基础教程 冰霜诅咒极寒幽魂
2013/12/06 DOTA
[03:57]2016完美“圣”典风云人物:rOtk专访
2016/12/09 DOTA
Python 时间处理datetime实例
2008/09/06 Python
Python多线程实例教程
2014/09/06 Python
Python中模块pymysql查询结果后如何获取字段列表
2017/06/05 Python
Python列表切片常用操作实例解析
2019/12/16 Python
Django REST framwork的权限验证实例
2020/04/02 Python
python推导式的使用方法实例
2021/02/28 Python
html5使用canvas实现跟随光标跳动的火焰效果
2014/01/07 HTML / CSS
Avène雅漾美国官方网站:敏感肌肤护理专家
2016/10/24 全球购物
白酒市场开发计划书
2014/01/09 职场文书
大学生英语演讲稿
2014/04/24 职场文书
个人委托书怎么写
2014/09/17 职场文书
大二学生自我检讨书
2014/10/23 职场文书
2019生态环境保护倡议书!
2019/07/03 职场文书
SQL Server一个字符串拆分多行显示或者多行数据合并成一个字符串
2022/05/25 SQL Server