zoukankan      html  css  js  c++  java
  • JS通过正则限制 input 输入框只能输入整数、小数(金额或者现金)

    第一: 限制只能是整数

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

    如果不是整数就直接alert

    第二: 限制是两位的小数

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

    原理:

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

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

    第二个正则表达式是

    [js] view plain copy
     
    1. /^d*(?:.d{0,2})?$/  

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

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

    test()

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

    意思是是

    [js] view plain copy
     
    1. /d/. test ( 'a' ) // false  
    2. /d/. test ( 'a' ) // true  
    3. /d/. test ( 'a' ) // true  

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

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

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

    [js] view plain copy
     
    1. <input onkeyup="value=value.replace(/[W]/g,'') "   
    2. onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^d]/g,''))"   
    3. ID="Text1" NAME="Text1">   

    2.只能输入数字的: 

    [js] view plain copy
     
    1. <input onkeyup="value=value.replace(/[^d]/g,'') "   
    2. onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^d]/g,''))"   
    3. ID="Text2" NAME="Text2">  

    3.只能输入全角的: 

    [js] view plain copy
     
    1. <input onkeyup="value=value.replace(/[^uFF00-uFFFF]/g,'')"   
    2. onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^uFF00-uFFFF]/g,''))"   
    3. ID="Text3" NAME="Text3">   

    4.只能输入汉字的: 

    [js] view plain copy
     
    1. <input onkeyup="value=value.replace(/[^u4E00-u9FA5]/g,'')"   
    2. onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^u4E00-u9FA5]/g,''))"   
    3. ID="Text4" NAME="Text4">   

    5.邮件地址验证:

    [js] view plain copy
     
    1. var regu =   
    2. "^(([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)$"   
    3. var re = new RegExp(regu);   
    4. if (s.search(re) != -1) {   
    5. return true;   
    6. else {   
    7. window.alert ("请输入有效合法的E-mail地址 !")   
    8. return false;   
    9. }  

    6.身份证:

    [js] view plain copy
     
    1. "^\d{17}(\d|x)$"   
    2. 7.17种正则表达式   
    3. "^\d+$"  //非负整数(正整数 + 0)   
    4. "^[0-9]*[1-9][0-9]*$"  //正整数   
    5. "^((-\d+)|(0+))$"  //非正整数(负整数 + 0)   
    6. "^-[0-9]*[1-9][0-9]*$"  //负整数   
    7. "^-?\d+$"    //整数   
    8. "^\d+(\.\d+)?$"  //非负浮点数(正浮点数 + 0)   
    9. "^(([0-9]+\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\.[0-9]+)|([0-9]*[1-9][0-9]*))$"  //正浮点数   
    10. "^((-\d+(\.\d+)?)|(0+(\.0+)?))$"  //非正浮点数(负浮点数 + 0)   
    11. "^(-(([0-9]+\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\.[0-9]+)|([0-9]*[1-9][0-9]*)))$"  //负浮点数   
    12. "^(-?\d+)(\.\d+)?$"  //浮点数   
    13. "^[A-Za-z]+$"  //由26个英文字母组成的字符串   
    14. "^[A-Z]+$"  //由26个英文字母的大写组成的字符串   
    15. "^[a-z]+$"  //由26个英文字母的小写组成的字符串   
    16. "^[A-Za-z0-9]+$"  //由数字和26个英文字母组成的字符串   
    17. "^\w+$"  //由数字、26个英文字母或者下划线组成的字符串   
    18. "^[\w-]+(\.[\w-]+)*@[\w-]+(\.[\w-]+)+$"    //email地址   
    19. "^[a-zA-z]+://(\w+(-\w+)*)(\.(\w+(-\w+)*))*(\?\S*)?$"  //url   

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

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

    2.只读文本框内容

    在input里添加属性值 readonly 

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

    [js] view plain copy
     
    1. <INPUT style=behavior:url(#default#savehistory); type=text   
    2. d=oPersistInput>   

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

    [js] view plain copy
     
    1. <input onkeydown="if(event.keyCode==13)event.keyCode=9" >   

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

    [js] view plain copy
     
    1. <input onkeyup="value="/value.replace(/[" -~]/g,'')"   
    2. nkeydown="if(event.keyCode==13)event.keyCode=9">   

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

    [js] view plain copy
     
    1. <input onkeyup="value="/value.replace(/["^d]/g,'')   
    2. nbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^d]/g,''))">   

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

    [js] view plain copy
     
    1. <input ime-mode:disabled"   
    2. onkeydown="if(event.keyCode==13)event.keyCode=9" onKeypress="if   
    3. ((event.keyCode<48 || event.keyCode>57)) event.returnValue=false">   

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

    [js] view plain copy
     
    1. <input onkeyup="value="/value.replace(/[W]/g,"'')"   
    2. onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^d]/g,''))">   

    9.屏蔽输入法

    [js] view plain copy
     
    1. <input type="text" name="url" ime-mode:disabled"   
    2. keydown="if(event.keyCode==13)event.keyCode=9">   

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

    [js] view plain copy
     
    1. <input onKeyPress="if (event.keyCode!=46 && event.keyCode!=45 &&   
    2. event.keyCode<48 || event.keyCode>57)) event.returnValue=false">   

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

    [js] view plain copy
     
    1. <input maxlength=9   
    2. onkeyup="if(value.match(/^d{3}$/))value="/value.replace(value,parseInt(value/10))"   
    3. ;value="/value.replace(/.d*./g,'."')" onKeyPress="if((event.keyCode<48   
    4. || event.keyCode>57) && event.keyCode!=46 && event.keyCode!=45 ||   
    5. value.match(/^d{3}$/) || /.d{3}$/.test(value))   
    6. {event.returnValue=false}" id=text_kfxe name=text_kfxe>  
    7. <p style="">密码的强度必须是包含大小写字母和数字的组合,不能使用特殊字符,长度在8-10之间。  
    8. </p><div class="jb51code" style=""><pre class="js" name="code">^(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,10}$ </pre></div><p style=""><span style="color:#00ff; float:right; padding-left:20px; padding-right:20px"><strong>2. 校验中文</strong></span><br></p><p style="">字符串仅能是中文。<br></p><div class="jb51code" style=""><pre class="js" name="code">^[\u4e00-\u9fa5]{0,}$ </pre></div><p style=""><span style="color:#00ff; float:right; padding-left:20px; padding-right:20px"><strong> 3. 由数字、26个英文字母或下划线组成的字符串</strong></span><br></p><div class="jb51code" style=""><pre class="js" name="code">^\w+$ </pre></div><p style=""><span style="color:#00ff; float:right; padding-left:20px; padding-right:20px"><strong>4. 校验E-Mail 地址<br></strong></span></p><p style="">同密码一样,下面是E-mail地址合规性的正则检查语句。</p><div class="jb51code" style=""><pre class="js" name="code">[\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])? </pre></div><p style=""><span style="color:#00ff; float:right; padding-left:20px; padding-right:20px"><strong>5. 校验身份证号码</strong></span><br></p><p style="">下面是身份证号码的正则校验。15 或 18位。<br></p><p style=""><strong>15位:<br></strong></p><div class="jb51code" style=""><pre class="js" name="code"> ^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$ </pre></div><p style=""><strong> 18位:</strong></p><div class="jb51code" style=""><pre class="js" name="code">^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}([0-9]|X)$ </pre></div><p style=""><span style="color:#00ff; float:right; padding-left:20px; padding-right:20px"><strong>6. 校验日期</strong></span><br></p><p style="">“yyyy-mm-dd“ 格式的日期校验,已考虑平闰年。<br></p><div class="jb51code" style=""><pre class="js" name="code">^(?:(?!0000)[0-9]{4}-(?:(?:0[1-9]|1[0-2])-(?:0[1-9]|1[0-9]|2[0-8])|(?:0[13-9]|1[0-2])-(?:29|30)|(?:0[13578]|1[02])-31)|(?:[0-9]{2}(?:0[48]|[2468][048]|[13579][26])|(?:0[48]|[2468][048]|[13579][26])00)-02-29)$</pre></div><p style=""><span style="color:#00ff; float:right; padding-left:20px; padding-right:20px"><strong>7. 校验金额</strong></span><br></p><p style="">金额校验,精确到2位小数。<br></p><div class="jb51code" style=""><pre class="js" name="code">^[0-9]+(.[0-9]{2})?$ </pre></div><p style=""><span style="color:#00ff; float:right; padding-left:20px; padding-right:20px"><strong>8. 校验手机号</strong></span><br></p><p style="">下面是国内 13、15、18开头的手机号正则表达式。</p><div class="jb51code" style=""><pre class="js" name="code">^(13[0-9]|14[5|7]|15[0|1|2|3|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$ </pre></div><p style=""><span style="color:#00ff; float:right; padding-left:20px; padding-right:20px"><strong>9. 判断IE的版本</strong></span><br></p><p style="">IE目前还没被完全取代,很多页面还是需要做版本兼容,下面是IE版本检查的表达式。<br></p><div class="jb51code" style=""><pre class="js" name="code">^.*MSIE [5-8](?:\.[0-9]+)?(?!.*Trident\/[5-9]\.0).*$ </pre></div><p style=""><span style="color:#00ff; float:right; padding-left:20px; padding-right:20px"><strong>10. 校验IP-v4地址<br></strong></span></p><p style="">IP4 正则语句。<br></p><p style=""><span style="color:#00ff; float:right; padding-left:20px; padding-right:20px"><strong>11. 校验IP-v6地址</strong></span><br></p><p style="">IP6 正则语句。<br></p><div class="jb51code" style=""><pre class="js" name="code">(([0-9a-fA-F]{1,4}:){7,7}[0-9a-fA-F]{1,4}|([0-9a-fA-F]{1,4}:){1,7}:|([0-9a-fA-F]{1,4}:){1,6}:[0-9a-fA-F]{1,4}|([0-9a-fA-F]{1,4}:){1,5}(:[0-9a-fA-F]{1,4}){1,2}|([0-9a-fA-F]{1,4}:){1,4}(:[0-9a-fA-F]{1,4}){1,3}|([0-9a-fA-F]{1,4}:){1,3}(:[0-9a-fA-F]{1,4}){1,4}|([0-9a-fA-F]{1,4}:){1,2}(:[0-9a-fA-F]{1,4}){1,5}|[0-9a-fA-F]{1,4}:((:[0-9a-fA-F]{1,4}){1,6})|:((:[0-9a-fA-F]{1,4}){1,7}|:)|fe80:(:[0-9a-fA-F]{0,4}){0,4}%[0-9a-zA-Z]{1,}|::(ffff(:0{1,4}){0,1}:){0,1}((25[0-5]|(2[0-4]|1{0,1}[0-9]){0,1}[0-9])\.){3,3}(25[0-5]|(2[0-4]|1{0,1}[0-9]){0,1}[0-9])|([0-9a-fA-F]{1,4}:){1,4}:((25[0-5]|(2[0-4]|1{0,1}[0-9]){0,1}[0-9])\.){3,3}(25[0-5]|(2[0-4]|1{0,1}[0-9]){0,1}[0-9])) </pre></div><p style=""><span style="color:#00ff; float:right; padding-left:20px; padding-right:20px"><strong>12. 检查URL的前缀</strong></span><br></p><p style="">应用开发中很多时候需要区分请求是HTTPS还是HTTP,通过下面的表达式可以取出一个url的前缀然后再逻辑判断。<br></p><div class="jb51code" style=""><pre class="js" name="code">if (!s.match(/^[a-zA-Z]+:\/\//))  
    9. {  
    10.   s = 'http://' + s;  
    11. }</pre></div><p style=""><span style="color:#00ff; float:right; padding-left:20px; padding-right:20px"><strong>13. 提取URL链接<br></strong></span></p><p style="">下面的这个表达式可以筛选出一段文本中的URL。</p><div class="jb51code" style=""><pre class="js" name="code">^(f|ht){1}(tp|tps):\/\/([\w-]+\.)+[\w-]+(\/[\w- ./?%&=]*)? </pre></div><p style=""><span style="color:#00ff; float:right; padding-left:20px; padding-right:20px"><strong>14. 文件路径及扩展名校验</strong></span><br></p><p style="">验证文件路径和扩展名</p><div class="jb51code" style=""><pre class="js" name="code">^([a-zA-Z]\:|\\)\\([^\\]+\\)*[^\/:*?"<>|]+\.txt(l)?$ </pre></div><p style=""><span style="color:#00ff; float:right; padding-left:20px; padding-right:20px"><strong>15. 提取Color Hex  Codes</strong></span><br></p><p style="">有时需要抽取网页中的颜色代码,可以使用下面的表达式。</p><div class="jb51code" style=""><pre class="js" name="code">\#([a-fA-F]|[0-9]){3,6} </pre></div><p style=""><span style="color:#00ff; float:right; padding-left:20px; padding-right:20px"><strong>16. 提取网页图片</strong></span><br></p><p style="">假若你想提取网页中所有图片信息,可以利用下面的表达式。<br></p><div class="jb51code" style=""><pre class="js" name="code">\< *[img][^\>]*[src] *= *[\"\']{0,1}([^\"\'\ >]*) </pre></div><p style=""><span style="color:#00ff; float:right; padding-left:20px; padding-right:20px"><strong>17. 提取页面超链接<br></strong></span></p><p style="">提取html中的超链接。</p><div class="jb51code" style=""><pre class="js" name="code">(<;a\s*(?!.*\brel=)[^>;]*)(href="https?://)((?!(?:(?:www\.)?'.implode('|(?:www\.)?', $follow_list).'))[^"]+)"((?!.*\brel=)[^>;]*)(?:[^>;]*)> </pre></div><p style=""><span style="color:#00ff; float:right; padding-left:20px; padding-right:20px"><strong>18. 精炼CSS</strong></span><br></p><p style="">通过下面的表达式,可以搜索相同属性值的CSS,从而达到精炼代码的目的。<br></p><div class="jb51code" style=""><pre class="js" name="code">^\s*[a-zA-Z\-]+\s*[:]{1}\s[a-zA-Z0-9\s.#]+[;]{1} </pre></div><p style=""><span style="color:#00ff; float:right; padding-left:20px; padding-right:20px"><strong>19. 抽取注释<br></strong></span></p><p style="">如果你需要移除HMTL中的注释,可以使用如下的表达式。<br></p><p style=""><!--(.*?)--> <br></p><p style=""><span style="color:#00ff; float:right; padding-left:20px; padding-right:20px"><strong>20. 匹配HTML标签</strong></span><br></p><p style="">通过下面的表达式可以匹配出HTML中的标签。<br></p><div class="jb51code" style=""><pre class="js" name="code"></?\w+((\s+\w+(\s*=\s*(?:".*?"|'.*?'|[\^'">\s]+))?)+\s*|\s*)/?> </pre></div><br>  
  • 相关阅读:
    “XXXXX” is damaged and can’t be opened. You should move it to the Trash 解决方案
    深入浅出 eBPF 安全项目 Tracee
    Unity3d开发的知名大型游戏案例
    Unity 3D 拥有强大的编辑界面
    Unity 3D物理引擎详解
    Unity 3D图形用户界面及常用控件
    Unity 3D的视图与相应的基础操作方法
    Unity Technologies 公司开发的三维游戏制作引擎——Unity 3D
    重学计算机
    windows cmd用户操作,添加,设备管理员组,允许修改密码
  • 原文地址:https://www.cnblogs.com/haw2106/p/7839979.html
Copyright © 2011-2022 走看看