最初的目的是为了让输入的字段仅为数字,不要包含英文,理所当然想到了正则表达,比起对每一个字符判断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. X86逆向7:特殊窗体的破解思路

    本章我们来看两个案例,这两个案例同样使用爆破的方式破解,但是与其他的程序不同,这个程序没有弹窗,提示成功或失败使用的是图片或是一个类似图片的窗体,本章将学习两个新的API函数的使用技巧. ------ ...

  2. django 支持跨域请求配置

    参考:https://www.jianshu.com/p/63fb55bee142 核心注意点:

  3. Atcoder-SoundHound Inc.Contest 2018 -Masters Tournament-比赛报告

    A C++ Example #include <iostream> #include <cstdio> #include <cstdlib> #include &l ...

  4. Lab 色彩模型和取值范围

    L∈(0,100) a∈(-128,127) b∈(-128,127) opencv 的Lab数据对齐做了量化,使其处于0-255范围 L=L*2.55 a=a+128 b=b+128

  5. CentOS7安装Docker-CE并部署项目

    前言 这是我第一次使用dokcer部署项目,现学现卖.成功之后把所有用到的安装及部署和操作命令做一个总结.如有不足,请指教. 使用的是阿里云服务器.CentOS7版本. Dokcer安装 1.Cent ...

  6. js小功能3:一个简单的计算器功能

    html: <input type='text' id='txt1' /> <select id='select'> <option value='+'>+< ...

  7. docker容器生态技术链

    图片来源:https://blog.51cto.com/liuleis/2067116 说明:学习Docker容器技术,先纵向了解大致内容架构,再横向逐一分解涉及的各项技术内容,对容器所涉及的技术体系 ...

  8. linux重装docker-compose后无法执行docker-compose命令

    背景 使用自动化脚本重装docker和docker-compose(但脚本中未对旧版本的docker-compose进行任何处理,比如卸载删除) 导致执行docker-compose命令时报了错,大多 ...

  9. 分布式系统读写模型中的Quorum机制

    分布式系统的设计中会涉及到许多的协议.机制用来解决可靠性问题.数据一致性问题等,Quorum 机制就是其中的一种.我们通过分布式系统中的读写模型来简单介绍它. 分布式系统中的读写模型 分布式系统是由多 ...

  10. win10编译maskrcnn benchmark

    步骤 1. 按照官网的Option1安装步骤安装 https://github.com/facebookresearch/maskrcnn-benchmark/blob/master/INSTALL. ...