js自动检查验证用户输入是否正确onblue

一般来说，当用户输入的时候都要检查输入数据是否正确，诸如只能输入数字却输入了字符、数据长度是否超标、不能输入特殊字符等。检查得比较多的通常是密码验证，并且要求自动及时检查，即用户输入一停止就检查。

网页中的用户输入自动检查验证，在客户端通过 js 来完成，即当用户输入停止后触发一个 javascript 事件，调用 js 的函数进入检查验证，不符合要求提示用户重新输入。这类检查验证有些 js 就能全部完成，有些需要与服务器通信才能完成，后者需要用 ajax 与服务器通信，根据服务器返回的值进行处理。

一、js自动检查验证用户输入的是否为数字

假设有一个文本框只能输入数字，不能输入字符，当用户输入完成后立即检查，示例代码如下：

html代码：

<div>
    手机号码：<input type="text" id="mobelId" maxlength="11" onblur="inputCheck()" />
  </div>

javascript代码：

<script type="text/javascript">
  function inputCheck() {
    var obj = document.getElementById("mobelId");
    if (!isNumber(obj.value)) {
      alert("产品价格只能输入11位数字！");
    }
  }
  function isNumber(str) { var rul = /^[0-9]{1,11}$/; return rul.test(str); }
  </script>

以上代码要求用户输入11位以内的手机号码，如果输入超11位数字，或者输入了字母、符号，则会返回要求重输入；当用户输入结束后，只要单击了任意位置（包括另一个文本框）就会检查。

二、js自动检查验证用户输入的字符是否超过规则长度

文本框都有限制用户输入多少个字符的属性，但不能区分中英文，也就是每个汉字也算一个字符，这与实际长度不符，所以需要准确统计用户输入字符的实际长度。

html元素：

<div>
    产品简介：<input type="text" id="prointro" maxlength="200" onblur="countTextLength()" style="width:600px;" />
  </div>

javascript代码：

<script type="text/javascript">
  function countTextLength() {
    var obj = document.getElementById("prointro");
    if (len(obj.value) > 200) {
      alert("产品简介只能输入200个字符！");
    }
  }

function len(str) {
    var n = 0;
    if (str == "") { return n; }
    var arr = str.split("");
    for (var i = 0; i < arr.length; i++) {
      if (arr[i].charCodeAt(0) < 299) {
        n++;
      }
       else {
         n += 2;
      }
    }
    return n;
  }
  </script>

以上代码只允许用户输入200个字符，也就是只能输入100个汉字，200个英文字母，超过这个长度将提示。