`
qifeifei
  • 浏览: 27662 次
  • 来自: 上海
社区版块
存档分类
最新评论

js控制input输入框的方法封装(数字,中文,字母,浮点数等)

阅读更多
在项目开发的时候,经常有一些输入框,控制输入的格式,而不是等输入好了再去检查格式,格式错了就报错,体验不好。
/** 数字,中文,字母,浮点数(+/-/.) 类型输入限制,只要在input标签上加上 jInput="number,chinese,alphabet,floating" 备注:floating属性只能单独用*/
 
 
function limitInptFormat(){
    var inputType=['number','chinese','alphabet','floating'];

	$('body').delegate("input[jInput]", "keyup", function(e) {
		var input_type = $(this).attr('jInput').split(',')
		var value = $(this).val();
		if (!input_type && input_type.length <= 0) {
			return;
		}
		var values_of_type = [];
		var RegStr = '^[';
		for (var i = 0; i < input_type.length; i++) {
			if (input_type[i]) {
				if (input_type[i] == 'number') {
					RegStr += '\\d';
				} else if (input_type[i] == 'chinese') {
					RegStr += '\\u4e00-\\u9fa5';
				} else if (input_type[i] == 'alphabet') {
					RegStr += 'a-zA-Z';
				} else if (input_type[i] == 'floating') {
					RegStr = '^[\\+\\-]?\\d+\\.?\\d+';
					$(this).val(value.match(new RegExp(RegStr, 'g')));
					return;
				}
			}
		}
		RegStr += ']*';
		if (RegStr.length <= 3) {
			return;
		}
		var expression = new RegExp(RegStr, 'g');
		var return_value = value.match(expression);
		$(this).val(return_value);
	});
}
 
 

 

1
0
分享到:
评论
1 楼 yangsong158 2015-05-08  
短小精炼。非常不错。

相关推荐

    angular inputNumber指令输入框只能输入数字的实现

    在实际应用开发中,我们可能会遇到需要一个只能输入数字的input输入框的需求,以确保收集到的数据为数字类型。本文就详细介绍了如何通过Angular指令实现一个只能输入数字的inputNumber指令输入框。 首先,我们需要...

    JS输入框限制数值输入插件

    在JavaScript编程中,输入框(INPUT)是网页交互中常用的一种元素,用户可以通过它输入文本。然而,在某些情况下,我们可能需要对用户输入的数据进行特定的限制,例如限制输入为数值,只允许整数、浮点数或者特定的...

    jquery图片插件旋转、拖动、滑动条、数字输入框

    5. **数字输入框(Numeric Input)**: 为了限制输入框只接受数字,可以使用`numeric`插件,如`jQuery.numeric`。它能确保用户只能输入整数或浮点数: ```javascript $("#inputBox").numeric(); ``` 若要允许...

    JavaScript 通用库(一)

    JavaScript 通用库是一种为了简化开发工作,提高代码复用率而创建的集合,它包含了一系列常用的函数或方法,便于在不同的项目中应用。本篇主要介绍一个名为 `Common.js` 的 JavaScript 类库,该库提供了多种实用的...

    Guess my Number Game using JavaScript with Source Code.zip

    "猜数字游戏"是利用JavaScript实现的一个简单但有趣的小程序,它能提供给初学者一个了解JavaScript编程逻辑和交互设计的实例。在这个游戏中,计算机随机选择一个数字,然后玩家需要通过提示来猜测这个数字,直到猜对...

    JS计算器 v1.0-源码.zip

    通过研究这个源码,不仅可以学习到JavaScript的基础语法,还能了解前端开发中的事件处理、DOM操作、函数封装等实践技巧。对于初学者来说,这是一个很好的动手项目,有助于理解和应用所学知识。同时,对有经验的...

    WEB实验题目及代码.doc

    【描述】:本实验主要针对JavaScript的基础知识进行训练,包括语法、控制结构、函数以及预定义对象和浏览器对象的使用。实验要求在MyEclipse环境下创建Web项目,编写JavaScript代码并嵌入HTML页面,实现客户端表单...

    js常用技巧

    根据给定文件的信息,我们可以总结出一系列JavaScript(简称JS)中的常见技巧与基本操作方法。以下将对这些知识点进行详细解析: ### 1. 输出文本到文档 ```javascript document.write(""); ``` 此方法用于向文档...

    javascript

    ### JavaScript核心知识点详解 #### 一、JavaScript简介与基本语法 **JavaScript**是一种广泛用于网页开发的脚本语言,能够使网页具备动态效果,增强用户体验。以下是一些基础且实用的JavaScript技巧和语法要点。 ...

    常用Javascript语句109

    还深入探讨了DOM操作、数据类型转换、控制流、函数设计、表单交互、窗口管理、字符串与数学处理、以及日期时间操作等关键领域,是任何希望深入了解并掌握JavaScript编程语言的开发者的宝贵资源。

    108个常用JS脚本

    根据提供的文件信息,我们可以归纳出一系列与JavaScript相关的知识点。这些知识点涵盖了从基本语法到文档对象模型(DOM)操作,以及一些常用的内置函数等各个方面。接下来,我们将对这些知识点进行详细的阐述。 ###...

    常用javascript小技巧

    以下是对给定文件中提到的一些常用JavaScript小技巧的深入解析,这些技巧涵盖了DOM操作、数据类型处理、流程控制等方面,对于提高代码效率和可读性具有重要意义。 #### 1. 使用`document.write("")` `document....

    javascript常用关键字

    根据给定的文件信息,以下是对...以上涵盖了文件中提到的大部分JavaScript知识点,涉及DOM操作、字符串处理、数据类型、流程控制、数学函数、日期对象等多个方面,对于理解和运用JavaScript进行Web开发具有重要意义。

    实用的jquery计算器

    此外,jQuery还提供了丰富的数学运算方法,如`parseFloat()`用于转换字符串为浮点数,`+`号用于数值相加,`*`号用于乘法等,可用于实现复杂的计算逻辑。 CSS在计算器中负责样式设计,确保计算器界面美观且易于操作...

    JS函数集合大全

    根据给定的文件信息,以下是对“JS函数集合大全”的详细解析,涵盖了JavaScript中的关键概念、函数和操作,旨在提供一个全面的JavaScript编程指南。 ### 1. JavaScript基础语法与DOM操作 - **document.write("")**...

    Javascript的107则使用技巧大全

    此例展示了如何获取一个表单元素的值,并使用`toUpperCase()`方法将其转换为全部大写字母,然后再赋值给另一个表单元素。 #### 7. JavaScript的基本数据类型:`String, Number, Boolean, Null, Object, Function` ...

    guessthenumberjs:猜数字名称

    "猜数字游戏"(Guess the Number)是一款广受欢迎的智力游戏,现在我们将其与JavaScript结合,创建一个基于浏览器的版本。在这个项目中,我们将学习如何使用JavaScript实现一个基本的交互式游戏,提升对JavaScript...

    servlet获取表单数据详解(十分全)

    首先,对于普通的输入框、密码框、隐藏字段等,我们可以使用`HttpServletRequest`对象的`getParameter()`方法。例如,如果JSP页面中有如下表单元素: ```html &lt;input type="text" name="name" /&gt; &lt;input type=...

    2021-2022计算机二级等级考试试题及答案No.14126.docx

    计算机二级等级考试主要涵盖计算机基础知识、Word处理、Excel电子表格、PowerPoint演示文稿、Internet应用等多方面内容。以下是对部分题目知识点的详细解析: 1. 通配符文件名选择题涉及到文件系统的基本操作,`?`...

Global site tag (gtag.js) - Google Analytics