最初的目的是为了让输入的字段仅为数字,不要包含英文,理所当然想到了正则表达,比起对每一个字符判断ASCII码要方便的多

JS正则表达式的使用,可以参考正则表达式

以match为例,全局匹配非数字

 var reg = /\D/g;
var str = "abc12def";
var result = str.match(reg); //['abc','def']

结果会以数组的形式展示,因此不难发现,若数组长度为0,则全为数字。

但是,以怎样的形式表达“输入的字符全是数字”比较稳妥?

各有说法,有人认为通过字符过滤,当用户输入非数字时,字符会显示一瞬间然后因为不符合过滤要求被删除。

参考了张志成在知乎上的回答,一种只保留数字的简单写法。

<input type="text" id="text" ng-model="item.attr" ng-keyup="clearNum(item,'attr')">
var app = angular.module("myApp",[]);
app.controller("myCtrl", function ($scope) {
$scope.clearNum = function(obj, attr){
obj[attr] = obj[attr].replace(/\D/g,"");
}
});

但是这样的效果用户体验很糟糕。

未完待续。。。。明天更!

angularJS限制 input-text 只能输入数字的更多相关文章

  1. input text 只能输入数字 js 正则表达式

    $("#txt1").keyup(function () { $(this).val($(this).val().replace(/[^0-9.]/g, '')); }).bind ...

  2. input text 只能输入数字

    添加 onkeyup="value=value.replace(/[^\d]/g,'')"

  3. html input验证只能输入数字,不能输入其他

    html input验证只能输入数字,不能输入其他 此方法为借鉴别人的,在此只做记录. <input type="text" onkeyup="if(!/^\d+$ ...

  4. input输入框只能输入数字和 小数点后两位

    //input输入框只能输入数字和 小数点后两位 function num(obj,val){ obj.value = obj.value.replace(/[^\d.]/g,"" ...

  5. Html限制input输入框只能输入数字

    限制输入框只能输入数字, onafterpaste防止用户从其它地方copy内容粘贴到输入框: <input type="text" onkeyup="this.v ...

  6. input 输入框 只能输入数字、字母、汉字等

    1.文本框只能输入数字代码(小数点也不能输入) <input onkeyup="this.value=this.value.replace(/\D/g,'')" onafte ...

  7. 使用正则限制input框只能输入数字/英文/中文等等

    常用HTML正则表达式 1.只能输入数字和英文的: 复制代码代码如下: <input onkeyup="value=value.replace(/[/W]/g,'') " o ...

  8. input输入框 只能输入数字 oninput = "value=value.replace(/[^\d]/g,'')" input输入框输入大于0的数字 oninput="value=value.replace(/\D|^0/g,'')"

    项目中因为利用 element-ui 和avue两个ui框架搭建的 1.利用element-ui自带的校验需要注意点 prop  :rules ref这三个属性 2.利用oninput时间进行校验   ...

  9. javascript判断input框只能输入数字的方法

    javascript 只允许输入数字有很多方法,总结如下 1,只允许输入数字和小数点. <input onKeypress="return (/[\d.]/.test(String.f ...

  10. js控制input框只能输入数字和一位小数点和小数点后面两位小数

    <script language="JavaScript" type="text/javascript"> function clearNoNum( ...

随机推荐

  1. Digester库

    在之前所学习关于启动简单的Tomcat部分实现的代码中,我们使用一个启动类Bootstrap类 来实例化连接器.servlet容器.wrapper实例.和其他组件,然后调用各个对象的set方法将他们关 ...

  2. NSIS MUI 的内置向导页面

    MUI 的内置向导页面和安装程序有关的向导页面MUI_PAGE_WELCOME 该向导页面显示欢迎信息MUI_PAGE_LICENSE text/rtf_file 该向导页面显示软件授权申明MUI_P ...

  3. JavaScript笔记(3)

    字典(Array对象) Array对象当字典使用时,.length属性就不能使用了 如果想访问对象元素,不能使用索引,只能使用key 如果遍历字典,只能使用for--in语句 字典是另一种可变容器模型 ...

  4. 简单聊聊服务发现(redis, zk,etcd, consul)(转载)

    服务发现并没有怎样的高深莫测,它的原理再简单不过.只是市面上太多文章将服务发现的难度妖魔化,读者被绕的云里雾里,顿觉自己智商低下不敢高攀. 服务提供者是什么,简单点说就是一个HTTP服务器,提供了AP ...

  5. 能当壁纸用的Git常用命令速查表

    使用Microsoft Office 2016手工绘制. 链接: https://pan.baidu.com/s/18KsH-u5T2iSTHaXd6iQWGA 提取码: w8da 复制这段内容后打开 ...

  6. Java实现文本中的关键字高亮,匹配所有长度

    这个方法还不完整,后面想起来再看,直接放代码 public static String getHeightlightWord(String textWord, String key){ StringB ...

  7. STM32WB SRAM2

    SRAM2存储: 1.挂接总线及地址大小 2.地址镜像 3.RDP(read protection)等级 4.不同等级下的访问状态 5.声明位于SRAM2区中的数据 1)在icf文件中定义region ...

  8. contos7 yum 安装golang

    一.安装 [root@localhost golang]# yum install golang 安装默认目录为/usr/lib/golang/ 二.配置环境变量 echo "export ...

  9. httpleaks及url的小技巧(http:evil)

    HTTP Leak攻击简介 当前Web技术下包含了大量HTML元素和属性,这些HTML元素和属性会请求一些外部资源,而在它们的HTTP请求过程中,可能存在潜在的敏感信息泄露.为此,德国著名网络安全公司 ...

  10. 特殊字符的过滤方法,防sql防注入代码的过滤方法

    特殊字符的过滤方法 function strFilter($str){ //特殊字符的过滤方法 $str = str_replace('`', '', $str); $str = str_replac ...