JS通过正则限制 input 输入框只能输入整数、小数(金额或者现金) 两位小数

第一: 限制只能是整数

<input type = "text" name= "number" id = 'number' onkeyup= "if(! /^d+$/.test(this.value)){alert('只能整数');this.value='';}" />

如果不是整数就直接alert

第二: 限制是两位的小数

<input type = "text" name= "price" id = 'price' onkeyup= "if( ! /^d*(?:.d{0,2})?$/.test(this.value)){alert('只能输入数字,小数点后只能保留两位');this.value='';}" />

原理:

通过 正则表达式判断,不满足 执行alert。

第一个正则表达式是 /^d+$/ 表示可以是一个或者多个数字

第二个正则表达式是

/^d*(?:.d{0,2})?$/

表示必须是数字开头,数字结尾。

这里重点是要数字结尾, 在计算机中通常小数 1. , 2. 这种写法, 就是可是小数点结尾的, 是正确的。这里强制让数字结尾。

test()

只要找到满足的部分就返回真。

意思是是

/d/. test ( 'a' ) // false
/d/. test ( 'a' ) // true
/d/. test ( 'a' ) // true

所以要保证谁开头谁结尾。 开头用 $, 结尾用 ^

下面给大家介绍js正则限制input框输入的常用代码

1.只能输入数字和英文的:

<input onkeyup="value=value.replace(/[\W]/g,'') "
onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^\d]/g,''))"
ID="Text1" NAME="Text1"> 

2.只能输入数字的:

<input onkeyup="value=value.replace(/[^\d]/g,'') "
onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^\d]/g,''))"
ID="Text2" NAME="Text2">

3.只能输入全角的:

<input onkeyup="value=value.replace(/[^\uFF00-\uFFFF]/g,'')"
onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^\uFF00-\uFFFF]/g,''))"
ID="Text3" NAME="Text3"> 

4.只能输入汉字的:

<input onkeyup="value=value.replace(/[^\u4E00-\u9FA5]/g,'')"
onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^\u4E00-\u9FA5]/g,''))"
ID="Text4" NAME="Text4"> 

5.邮件地址验证:

var regu =
"^(([0-9a-zA-Z]+)|([0-9a-zA-Z]+[_.0-9a-zA-Z-]*[0-9a-zA-Z]+))@([a-zA-Z0-9-]+[.])+([a-zA-Z]{2}|net|NET|com|COM|gov|GOV|mil|MIL|org|ORG|edu|EDU|int|INT)$"
var re = new RegExp(regu);
if (s.search(re) != -1) {
return true;
} else {
window.alert ("请输入有效合法的E-mail地址 !")
return false;
}

6.身份证:

"^\\d{17}(\\d|x)$"
7.17种正则表达式
"^\\d+$"  //非负整数(正整数 + 0)
"^[0-9]*[1-9][0-9]*$"  //正整数
"^((-\\d+)|(0+))$"  //非正整数(负整数 + 0)
"^-[0-9]*[1-9][0-9]*$"  //负整数
"^-?\\d+$"    //整数
"^\\d+(\\.\\d+)?$"  //非负浮点数(正浮点数 + 0)
"^(([0-9]+\\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\\.[0-9]+)|([0-9]*[1-9][0-9]*))$"  //正浮点数
"^((-\\d+(\\.\\d+)?)|(0+(\\.0+)?))$"  //非正浮点数(负浮点数 + 0)
"^(-(([0-9]+\\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\\.[0-9]+)|([0-9]*[1-9][0-9]*)))$"  //负浮点数
"^(-?\\d+)(\\.\\d+)?$"  //浮点数
"^[A-Za-z]+$"  //由26个英文字母组成的字符串
"^[A-Z]+$"  //由26个英文字母的大写组成的字符串
"^[a-z]+$"  //由26个英文字母的小写组成的字符串
"^[A-Za-z0-9]+$"  //由数字和26个英文字母组成的字符串
"^\\w+$"  //由数字、26个英文字母或者下划线组成的字符串
"^[\\w-]+(\\.[\\w-]+)*@[\\w-]+(\\.[\\w-]+)+$"    //email地址
"^[a-zA-z]+://(\\w+(-\\w+)*)(\\.(\\w+(-\\w+)*))*(\\?\\S*)?$"  //url 

1.取消按钮按下时的虚线框

  在input里添加属性值 hideFocus 或者 HideFocus=true

2.只读文本框内容

在input里添加属性值 readonly

3.防止退后清空的TEXT文档(可把style内容做做为类引用)

 <INPUT style=behavior:url(#default#savehistory); type=text
id=oPersistInput> 

4.ENTER键可以让光标移到下一个输入框

 <input onkeydown="if(event.keyCode==13)event.keyCode=9" > 

5.只能为中文(有闪动)

 <input onkeyup="value="/value.replace(/[" -~]/g,'')"
onkeydown="if(event.keyCode==13)event.keyCode=9"> 

6.只能为数字(有闪动)

  <input onkeyup="value="/value.replace(/["^\d]/g,'')
"onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^\d]/g,''))"> 

7.只能为数字(无闪动)

<input ime-mode:disabled"
onkeydown="if(event.keyCode==13)event.keyCode=9" onKeypress="if
((event.keyCode<48 || event.keyCode>57)) event.returnValue=false"> 

8.只能输入英文和数字(有闪动)

<input onkeyup="value="/value.replace(/[\W]/g,"'')"
onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^\d]/g,''))"> 

9.屏蔽输入法

  <input type="text" name="url" ime-mode:disabled"
onkeydown="if(event.keyCode==13)event.keyCode=9"> 

10. 只能输入 数字,小数点,减号(-) 字符(无闪动)

 <input onKeyPress="if (event.keyCode!=46 && event.keyCode!=45 &&
(event.keyCode<48 || event.keyCode>57)) event.returnValue=false"> 

11. 只能输入两位小数,三位小数(有闪动)

<input maxlength=9
onkeyup="if(value.match(/^\d{3}$/))value="/value.replace(value,parseInt(value/10))"
;value="/value.replace(/\.\d*\./g,'."')" onKeyPress="if((event.keyCode<48
|| event.keyCode>57) && event.keyCode!=46 && event.keyCode!=45 ||
value.match(/^\d{3}$/) || /\.\d{3}$/.test(value))
{event.returnValue=false}" id=text_kfxe name=text_kfxe>
时间: 2016-05-02

JS实现身份证输入框的输入效果

实现如图所示的输入效果: 实现这种效果,比较简单的一种方式就是给一个input添加一个背景图片,然后通过设置字间距来达到效果. 代码: html: <input type="text" maxlength="8" class="idInput" onkeyup='this.value=this.value.replace(/\D/gi,"")'> css: .idInput{ width: 24.95rem; he

js监听input输入框值的实时变化实例

1.在元素上同时绑定 oninput 和onporpertychanger事件 例: <script type="text/JavaScript"> function aa(e){alert("inputting!!");} </script> <input type="text" id="a" oninput="aa(event)" onporpertychange=&quo

JS验证input输入框(字母,数字,符号,中文)

只能输入英文 <input type="text" onkeyup="value=value.replace(/[^a-zA-Z]/g,'')"> 只能输入英文 <input type="text" onkeyup="value=value.replace(/[^\a-\z\A-\Z]/g,'')" onkeydown="fncKeyStop(event)" onpaste="r

JS获得多个同name 的input输入框的值的实现方法

先看下基于JS代码实现input密码输入框输入密码变黑点密文.具体代码如下所示: html代码 <form id="login-form" method="post" onsubmit="return checkForm()"> 输入密码<input type="password" id="input-password"> <input type="hidden&qu

JavaScript仿支付宝6位数字密码输入框

前几天,项目有个功能和某宝购物支付密码的输入框有点类似,就自己写了这篇博文,权当总结笔记吧. 啰嗦半天了,直接上代码: 结构层: <div> <div>请在下方输入6位数字</div> <div class="ipt-box-nick"> <input type="tel" maxlength="6" class="ipt-real-nick"/> <div c

js格式化输入框内金额、银行卡号

我们在项目中经常遇到需要格式化的金额数和银行卡号,一般我们常见的有两种表现形式:输入框内格式化和输入框外格式化.这里我主要把我在项目中遇到的输入框内部格式化的,代码亮出来,框外的格式化相对简单一点. 页面代码: <div class="wrap"> <input type="text" id="bankCard" placeholder="输入银行卡号"> </div> <div cl

JS解决移动web开发手机输入框弹出的问题

在移动web开发中和pc端不同的是,手机的输入是软键盘,这样就会有个问题,那就是当有输入的时候,键盘弹起来,整个页面难免会发生变化 1.页面提高背景会出现不够用的现象, 解决方法,在body中设置背景图,即便是页面抬升了,背景也依旧存在, 2.底部用fix布局 这个问题会使得页面提升而底部的fix也跟着提升,遮盖住相应的页面,这个有两种解决方法 一.是页面页相应的提高,页面变化多少我们让上面的页面滚动多少, $('input').bind('click',function(e){ var $th

JavaScript控制输入框中只能输入中文、数字和英文的方法【基于正则实现】

本文实例讲述了JavaScript控制输入框中只能输入中文.数字和英文的方法.分享给大家供大家参考,具体如下: 1.问题背景: 遇到这样一个问题:有一个输入框,要求只能输入中文.数字和英文(即过滤特殊字符串) 2.JS代码: function checkUsername() { //正则表达式 var reg = new RegExp("^[A-Za-z0-9\u4e00-\u9fa5]+$"); //获取输入框中的值 var username = document.getElemen

Js制作点击输入框时默认文字消失的效果

为了提高用户体验和易用度,一些设计师会对网页中用户经常用的东西进行优化,比如输入框.一般的输入框是怎样优化的呢?从用户体验的角度出发,简化用户使用步骤,让用户用得更方便就是提高了易用性,例如当鼠标悬浮在输入框时改变输入框颜色.自动选中输入框中的默认文字,或者点击输入框时自动清除默认内容等等. 这个效果听起来复杂,其实做起来却很简单,只要一小段javascript代码即可解决.下?面介绍一下几种效果的代码: 1.点击输入框选中内容的Html代码: <form id="form1"

jquery实现表单输入时提示文字滑动向上效果

本文实例讲述了jquery实现表单输入时提示文字滑动向上效果.分享给大家供大家参考.具体如下: 这里基于jQuery实现的表单输入框提示效果,当不输入的时候,提示文字就显示在输入框中,当鼠标点击文本框要输入文字的时候,提示文字向滑出输入框,好像很个性也很智能的样子,用户体验比较不错,运用了CSS3的部分属性,因此在测试时,请尽量要用高版本的IE9或chrome和火狐等网页浏览器. 运行效果截图如下: 具体代码如下: <!doctype html> <html> <head&g

js+css实现有立体感的按钮式文字竖排菜单效果

本文实例讲述了js+css实现有立体感的按钮式文字竖排菜单效果.分享给大家供大家参考.具体如下: 这是一款较不错的竖排菜单,有立体感效果的菜单,不要以为那些带立体特效的菜单是按钮啊,其实它就是用JavaScript代码修饰出来的按钮,鼠标放上的时候就会有明显的立体文字效果,竖向排列的,也可以修改成横向的. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-css-3d-nutton-v-menu-codes/ 具体代码如下: <!DOCTYP

js制作的鼠标悬浮时产生的下拉框效果

先给大家补补课,讲个简单的例子: 复制代码 代码如下: <html><head> <meta type-equiv="Content-Type" content="text/html"> <meta charset="utf-8″> <script type="text/javascript"> jq=jQuery.noConflict(); jq=(document).rea

zepto中使用swipe.js制作轮播图附swipeUp,swipeDown不起效果问题

在移动web开发中,由于手机界面较小,为了能展示更多的图片经常使用轮播图并且还需要考虑到手机流量的问题,通过请教他人以及百度,个人感觉swipe.js比较好用. 它是一个纯javascript工具,不需要跟其它js库一起导入,同时兼容jQuery和zepto,压缩版的大小只有6kb很适合移动端的开发,它的git地址:https://github.com/thebird/swipe 在git上对其的使用方式介绍的相当清楚,关键代码如下 <div id='slider' class='swipe'>

js实现类似光照的炫彩文字渐变视觉冲击效果

炫彩的文字效果 body,div,td{font:menu} 欢迎使用 Internet 信息服务! Microsoft Internet 信息服务是一个桌面 Web 服务器,使用它,您可以从自己的计算机上发布个人主页,并把您计算机上的文档共享到整个网络. 在将站点上载到 Internet 提供商之前,也可以将 IIS 用作开发平台. [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

用html5 js实现点击一个按钮达到浏览器全屏效果

项目中需要将后台浏览器的窗口全屏,也就是我们点击一个按钮要实现按F11全屏的效果. 在HTML5中,W3C制定了关于全屏的API,就可以实现全屏幕的效果,也可以让页面中的图片,视频等全屏目前只有google chrome 15 +, safri5.1+,firfox10+,IE11支持 全屏 var docElm = document.documentElement; //W3C if (docElm.requestFullscreen) { docElm.requestFullscreen()

javaScript实现鼠标在文字上悬浮时弹出悬浮层效果

在人人,CSDN等一些网站,当鼠标在某个东西上悬浮时,会弹出一个悬浮层,鼠标移开悬浮层消失. 比如说CSDN的通知(应该是进入写新文章的页面后页面上方的那个铃铛),具体是什么实现的呢?上代码: <!doctype html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>TEST</title

文本框点击时文字消失,失去焦点时文字出现

文本框点击时文字消失,失去焦点时文字出现 function addListener(element,e,fn){ if(element.addEventListener){ element.addEventListener(e,fn,false); } else { element.attachEvent("on" + e,fn); } } var myinput = document.getElementById("myinput"); addListener(m

JS实现点击文字对应DIV层不停闪动效果的方法

本文实例讲述了JS实现点击文字对应DIV层不停闪动效果的方法.分享给大家供大家参考.具体分析如下: 在很多娱乐网站我们经常看到这种效果,点击网页中某个方块中的文字,然后整个方块就不停的闪动起来,很不错的一个动态效果,容易引起顾客的注意,这个代码就是实现了这个效果,点击某个方块后,方块就会闪动 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.o