利用正则表达式校验是否为小数或者整数，废话不多说直接上demo（此正则表达式无法校验负数和数字为00开头的数字）。

PS：（如果有不对之处，请批评指教）

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>checkNumber</title>

</head>

<body style="background-color: aliceblue;">

    <div id="main" style="margin: 0 auto; text-align: center; ">

        <form method="POST" action=""

            style="width: 50% ; height: 50%; text-align: center;margin: 0 auto;  padding-top: 20%;">

            <label>請輸入判斷的數字：</label><input type="text" id="amount" name="amount"

                onblur="checkAmount('amount','hint')" /><br />

            <p><span name="hint" id="hint" style="color: red"></span></p>

        </form>

    </div>

</body>

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>

<script type="text/javascript">

    $(function () {

        //設置div高度

        $("#main").css("height", $(document).height);

        $("#main").css("width", $(document).width);

    });

    function notIntOrDecimal(text) {

        //校驗(小數/數字)正則表達式

        let pattern = /^[0-9]+([.]{1}[0-9]+){0,1}$/;

        if (pattern.test(text)) {

            return false;

        } else {

            return true;

        }

    }

    function checkAmount(objName, hintName) {

        let judgeVal = $("#" + objName).val();

        if (judgeVal === '') {

            $("#" + hintName).html("請輸入一個校驗的數字!");

            return;

        }

        if (judgeVal !== '' && notIntOrDecimal(judgeVal)) {

            $("#" + hintName).html("请输入一个整数或小数!");

            $("#" + objName).focus();

        } else {

            $("#" + hintName).html("校驗成功!");

        }

    }

</script>

</html>

js验证小数或者整数的更多相关文章

  1. js验证是否是数字，支持正负数小数

    js验证是否是数字,支持正负数小数. function isShuzi(str){ //var regExp =/[0-9]$/;//不支持小数 var regExp =/^\-?[0-9]+(.[0 ...

  2. js 小数转整数，避免精度损失 bug

    js 小数转整数,避免精度损失 bug const arr = [ 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01 ]; // ( ...

  3. Jquery 校验文本框只能输入负数、小数、整数

     /*   umlzhang    date:2013-09-12   */   //检验只能输入整数,小数和负数    $(function () {          var obj = $(&q ...

  4. validator js验证器

    转自:https://github.com/jaywcjlove/validator.js 轻量级的JavaScript表单验证,字符串验证.没有依赖,支持UMD 导入js库 <script t ...

  5. 正则表达式的JS验证

    /判断输入内容是否为空    function IsNull(){        var str = document.getElementById('str').value.trim();      ...

  6. ASP.NET开发中主要的字符验证方法-JS验证、正则表达式、验证控件、后台验证

    ASP.NET开发中主要的字符验证方法-JS验证.正则表达式.验证控件.后台验证 2012年03月19日 星期一 下午 8:53 在ASP.NET开发中主要的验证方法收藏 <1>使用JS验 ...

  7. 分享我常用的一些JS验证和函数

    下面是我常用一些JS验证和函数,有一些验证我直接写到了对象的属性里面了,可以直接通过对象.方法来调用//浮点数除法运算 function fdiv(a, b, n) { if (n == undefi ...

  8. 常用JS验证和函数

    下面是我常用一些JS验证和函数,有一些验证我直接写到了对象的属性里面了,可以直接通过对象.方法来调用 //浮点数除法运算 function fdiv(a, b, n) { if (n == undef ...

  9. js验证是否为数字的总结（转）

    作者: 字体:[增加 减小] 类型:转载 时间:2013-04-14我要评论 js验证是否为数字的总结,需要的朋友可以参考一下 js验证是否为数字,最简单的方法: isNaN函数的使用: functi ...

随机推荐

  1. 人脸三维建模A Morphable Model For The Synthesis Of 3D Faces（三维人脸合成的变形模型）

    Abstract摘要 In this paper, a new technique for modeling textured 3D faces is introduced. 3D faces can ...

  2. python中继承、定制类

    2.4python中继承 继承中不要忘了调用super().__init__ def __init__(self,args) super(subclass,self).__init___(args) ...

  3. java开发需掌握技能1

    1.熟练掌握Java基础.语法规范.集合框架等,基础语法.Java关键字.内部类.泛型.集合类使用场景2.Java io/nio框架体系.文本文件.二进制文件读写.nio.buffer机制3.Jsp. ...

  4. Spring Cloud云架构 - SSO单点登录之OAuth2.0 根据token获取用户信息(4)

    上一篇我根据框架中OAuth2.0的使用总结,画了SSO单点登录之OAuth2.0 登出流程,今天我们看一下根据用户token获取yoghurt信息的流程: /** * 根据token获取用户信息 * ...

  5. 通过构造器配置Bean

    public class Role { private Log id; private String roleName; private String note; public Role(String ...

  6. JAVA第二周课程总结

    本周我们开始学习一门新的课程JAVA 本周主要学习内容: 1.认识java,以及它的开发工具jdk 2.了解Java的语言特点 3.搭建Java开发环境,jdk的安装和配置

  7. ACM ICPC 2011-2012 Northeastern European Regional Contest（NEERC）A ASCII Area

    A: 给你一个矩阵求'/' 和 '\' 围成的图形,简单签到题,有一些细节要考虑. 题解:一行一行的跑,遇到'/'和'\' 就加0.5, 在面积里面的'.' 就加1.用一个flag来判断是否在围住的图 ...

  8. laravel Route::resource() 资源路由

    格式: Route::resource('/order', 'OrderController', ['as' => 'admin']); 框架自动创建路由及其对应控制器中的方法: 请求方式 路由 ...

  9. linux系统PS命令，按CPU、内存使用率对进程排序

    https://blog.csdn.net/weixin_42123737/article/details/90081318

  10. Android传感器【转】

    本文转载自:http://blog.csdn.net/ffmxnjm/article/details/52101592?locationNum=3&fps=1 传感器的意义 事实上,目前智能手 ...