Angularjs中的验证input输入框只能输入数字和小数点的写法(推荐)

 更新时间:2017年08月16日 09:33:53   作者:六一儿童节  
这篇文章主要介绍了Angularjs中的验证input输入框只能输入数字和小数点的写法,需要的朋友可以参考下

把js的验证方法改成angular可使用的方法

AngularJS文件的写法:

$scope.clearNoNum = function(obj,attr){
//先把非数字的都替换掉,除了数字和.
obj[attr] = obj[attr].replace(/[^\d.]/g,"");
//必须保证第一个为数字而不是.
obj[attr] = obj[attr].replace(/^\./g,"");
//保证只有出现一个.而没有多个.
obj[attr] = obj[attr].replace(/\.{2,}/g,"");
//保证.只出现一次,而不能出现两次以上
obj[attr] = obj[attr].replace(".","$#$").replace(/\./g,"").replace("$#$",".");
}

页面:

<input type="text" name="chargeid2" ng-model="item.chargeid2" ng-keyup="clearNoNum(item,'chargeid2')" placeholder="" class="form-control input-sm" >

总结

以上所述是小编给大家介绍的Angularjs中的验证input输入框只能输入数字和小数点的写法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

相关文章

  • Angular.js中处理页面闪烁的方法详解

    Angular.js中处理页面闪烁的方法详解

    我们在应用的页面或者组件需要加载数据时,浏览器和angular渲染页面都需要消耗一定的时间。这里的间隔可能很小,甚至让人感觉不到区别;但也可能很长,这样会导致让我们的用户看到了没有被渲染过的页面。本文将介绍Angular.js中处理页面闪烁的方法。
    2017-03-03
  • AngularJS 获取ng-repeat动态生成的ng-model值实例详解

    AngularJS 获取ng-repeat动态生成的ng-model值实例详解

    这篇文章主要介绍了AngularJS 获取ng-repeat动态生成的ng-model值实例详解的相关资料,这里提供实例代码及实现效果图,需要的朋友可以参考下
    2016-11-11
  • 基于angularjs实现图片放大镜效果

    基于angularjs实现图片放大镜效果

    这篇文章给大家分享了angularjs实现购物放大镜效果的源码实例,代码介绍的很详细,有需要的可以参考借鉴,下面来一起看看。
    2016-08-08
  • AngularJs用户登录问题处理(交互及验证、阻止FQ处理)

    AngularJs用户登录问题处理(交互及验证、阻止FQ处理)

    这篇文章主要为大家详细介绍了AngularJs用户登录问题处理,包括交互及验证、阻止FQ处理,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-10-10
  • 详解Angular路由动画及高阶动画函数

    详解Angular路由动画及高阶动画函数

    本文主要讲解了Angular的路由动画和高阶动画函数,对此感兴趣的同学,可以把代码亲自实验一下,理解其原理。
    2021-05-05
  • Angular如何由模板生成DOM树的方法

    Angular如何由模板生成DOM树的方法

    这篇文章主要介绍了Angular如何由模板生成DOM树的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-12-12
  • 在Angular使用ng-container元素的操作详解

    在Angular使用ng-container元素的操作详解

    ng-container 是 Angular 2+ 中可用的一个元素,可以作为结构指令的宿主,在本文中,您将探讨可以使用 ng-container 解决的场景,文中有相关的代码示例供大家参考,具有一定的参考价值,需要的朋友可以参考下
    2024-02-02
  • angularjs路由传值$routeParams详解

    angularjs路由传值$routeParams详解

    这篇文章主要为大家详细介绍了angularjs路由传值$routeParams的相关资料,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-09-09
  • 深入探究angular2 UI组件之primeNG用法

    深入探究angular2 UI组件之primeNG用法

    本篇文章主要介绍了深入探究angular2 UI组件之primeNG用法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-07-07
  • Angular进行简单单元测试的实现方法实例

    Angular进行简单单元测试的实现方法实例

    这篇文章主要给大家介绍了关于Angular进行简单单元测试的实现方法,文中仅用了几行代码,文中通过示例代码介绍的非常详细,对大家学习或者使用Angular具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧
    2020-08-08

最新评论