大学解惑06 - 要求输入框内只能输入2位以内小数，怎么做？

请听题：有一个输入框，准备用于计算使用，要求点击“校验”按钮的时候进行验证，必须输入数字，并且只能是2位以内的小数，如果输入不合法，请给出提示，如果输入合法通过验证，则提示 "输入正确"

 

    这里我们用span标签做一个按钮，然后为其添加onclick事件，用于点击的时候做校验用，input输入框添加id属性，页面布局大概是这样：

<div class="box">
   请输入合法的数字：
   <input type="text" id="num1" />
   <span class="equal" onclick="check()"> 校验 span>
div>

 一、第一步，验证必须是数字

        1、获取输入框的dom元素

            var inputDom = document.getElementById('num1') ;

        2、通过dom元素，获取输入框的内的值，注意，获取输入框的值用的value属性

              var num = inputDom.value;

        3、验证是否是数字

              验证是否是数字有那么几种方法：

                isNaN(xxx)   

                typeof(xxx)

                Object.prototype.tostring.call(xxx);

        4、首先必须输入内容，这就看获取的num值得length长度就可以，长度大于0就是输入了，等于0就是没有输入

         5、这里推荐使用isNaN，如果输入的是数字，isNaN方法会返回false，如果不是数字呢，返回的就是true。到这一步，我们先看一下代码：

function check() {
   var inputDom = document.getElementById('num1');
   var num = inputDom.value;
   if (num.length === 0) {
     alert('请输入数字');
     return;
   }
   if (isNaN(num)) {
     alert('请输入数字');
     return;
   }
}

二、第二步，验证输入的小数位，不能超出2位小数

        刚刚我们已经验证了必须输入数字，而且小数也可以算作是数字。javascript里没有浮点型，什么双精度型，都是数值型。所以怎么验证出用户输入的是超过2位小数了呢，比如3.333这种。在这里提供几种思路

        1、通过input输入框获取到的value值，是字符串类型的，哪怕是输入的是100，刚刚取出来，那个新鲜的热乎的值也是字符串类型的。

        所以可以通过小数点进行分割，也就是数组的split方法，可以将3.323分割成数组，数组的2个元素，第2个就是小数部分。然后看一看小数部分的长度。代码就像这样：

var numArray = [];
if (num.indexOf('.') !== -1) {
  numArray = num.split('.');
  if (numArray[1].length > 2) {
     alert('请输入2位以内小数的数字');
     return;
   }
}

        2、也可以用这种方法，我们需要验证的是小数位不能大于2位，那我们给这个数字乘以100以后，如果还有小数点，那不就是输入的超出范围了。

        但是乘以100以后怎么判断还有小数呢，也可以用刚才的方法，这里用一个运算符号  余数；

        比如5除以2，等于2.5对吧。但在js里，还可以用 余数 的运算符号， 5%2 = 1 ;

        但需要注意的是，Input取出来的值是字符串的，如果用于计算，需要转换成数值型的，这里用一下Number方法.代码就像这样：

num = Number(num);
num = num * 100;
if (num%1 !== 0) {
  alert('请输入2位以内小数的数字');
  return;
}

        

总结：

        通过以上的校验判断，就可以一步步确定用户输入的内容是否合法，等全部验证通过就可以真正的拿到数值去做计算或者其他逻辑操作了。这里的判断逻辑比较细化，以后还会有正则表达式相关的内容，正则表达式可以更加简洁的高效的校验数据信息。

        大家在学习过程中，哪些地方不明白，有疑惑都可以告诉我，欢迎留言。